美文网首页
css调试样式整理

css调试样式整理

作者: 青苹果和梨 | 来源:发表于2017-03-03 21:28 被阅读0次

之前项目开发,零零散散笔记了些开发的知识,一直没有想整理总结,现在写博客整理吧


css篇

1.如何让div中的内容垂直居中

内边距(padding)法

padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
2.如何让div显示边框样式呢?

.divcss5{border:1px solid #F00}

3.CSS3 圆角(border-radius)

-moz用于Firefox
-webkit用于Safari和Chrome。
例如

#round {
padding:10px; width:300px; height:50px;
border: 5px solid #dedede;
-moz-border-radius: 15px;      /* Gecko browsers */
-webkit-border-radius: 15px;   /* Webkit browsers */
border-radius:15px;            /* W3C syntax */
}
4.web手机字体自适应

css方法

@media screen and (min-width: 320px) {
html {font-size: 12px;}
}
@media screen and (min-width: 360px) {
html {font-size: 14px;}
}
@media screen and (min-width: 400px) {
html {font-size: 16px;}
}
@media screen and (min-width: 440px) {
html {font-size: 18px;}
}
@media screen and (min-width: 480px) {
html {font-size: 20px;}
}
@media screen and (min-width: 640px) {
html {font-size: 26px;}
}

标签就可用:font-size: 1.0rem,然后字体size就会根据屏幕适应了。

5.规定段落中的文本不进行换行:
p{
white-space: nowrap
}

<small>normal默认。空白会被浏览器忽略。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
<small>

相关文章

  • css调试样式整理

    之前项目开发,零零散散笔记了些开发的知识,一直没有想整理总结,现在写博客整理吧 css篇 1.如何让div中的内容...

  • 03-CSS文字文本样式

    CSS字体样式属性调试工具 目标 应用使用css字体样式完成对字体的设置使用css外观属性给页面元素添加样式使用常...

  • CSS相关---字体文本样式

    CSS字体样式属性调试工具 目标 应用使用css字体样式完成对字体的设置使用css外观属性给页面元素添加样式使用常...

  • 九月第三周学习笔记分享

    整理 代码/整理 术语整理 代码/整理 CSS:层叠样式表 CSS中的元素样式设置叫做类选择器:.be-text{...

  • CSS 样式调试

    a. 找到对应的需要调试的元素,右键,检查 b. 出现黄色三角形的警告,表示该 CSS 属性出错 可能的原因有:①...

  • css样式整理

    字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般...

  • css样式整理

    css样式整理 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small...

  • Css样式整理

    标签页横线带小箭头 单行溢出省略号 多行溢出省略号 背景色渐变

  • JavaScript 程序设计——基础篇 1-6

    1.JS 介绍 与 JS 调试 HTML描述网页的内容 CSS描述网页的样式 HTML和 CSS可以静态页面...

  • css样式入门书目录

    css样式-字体属性 css样式-背景属性 css样式-边框属性 css样式-列表属性 css样式-定位属性 cs...

网友评论

      本文标题:css调试样式整理

      本文链接:https://www.haomeiwen.com/subject/mvgrgttx.html