说明
源代码1.1 CSS属性书写顺序(重点)
建议遵循以下顺序:
1.布局定位属性: display / position / float / clear / visibility / overflow (建议display第一个写, 毕竟关系到模式)
2.自身属性: width / height / margin / padding / border / background
3.文本属性: color / font / text-decoration / text-align / verticle-align / white-space / break-word
4.其他属性(CSS3): content / cursor / border-radius / box-shadow/ text-shadow / background:linear-gradient…
.dbs {display: block;position: relative;float: left;width: 100px;height: 100px;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0 ,0 ,0, .5);webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;}
以上只是建议,能满足尽量满足.
1.2 常见初始化
* {padding: 0;margin: 0;}body {background-color: #f3f5f7;}button {border: none;}li {list-style: none;}a {text-decoration: none;}
1.3 颜色的语义
项目用到了蓝白灰的组合
蓝色
:颜色代码#00a4ff,主要负责突出颜色.或者状态变化显示的颜色
蓝色在项目中主要起强调作用
白色
: 颜色代码#fff,主要是把网页划分成主要的模块
灰色
: 颜色代码#f3f5f7,整个网页的背景色
1.4 可视区域
这个页面的可视区是1200像素,每个可视区都要居中对齐,定义如下:
.w {width: 1200px;margin: auto;}
大概中间的位置就是可视区域
1.5 常见阴影样式
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
1.6 常见可以被继承的属性
font-xxx
line-xxx
text-xxx
color
1.7 清除浮动
当使用了浮动的盒子,没有规定高度时,需要清除浮动因为浮动的盒子脱离了标准流,如果后面有一个标准流的盒子,会被当前的浮动盒子所遮盖.box1 {width: 110px;}.b1-item {float: left;width: 50px;height: 50px;background-color: pink;}.box2 {width: 300px;height: 300px;background-color: purple;}
<div class="box1"><div class="b1-item"></div><div class="b1-item"></div></div><div class="box2"></div>
说明:
box1脱离了文档流,box2在文档流内.因此它会在box1的位置
1.7.1 使用浮动时,让盒子高度为0的情况
在使用浮动的时候,有时候不确定盒子中到底会有多少个元素.因此无法设置高度(或者是设置高度不很麻烦), 这个时候就不会设置盒子的高度.
1.7.2 常见的清除浮动的代码
.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}
只需要在使用浮动,但未设置高度的元素上添加类clearfix
即可
<div class="box-bd clearfix">
1.8 关于padding
有一个宽高已经声明好的盒子div {width: 500px;height: 500px;background: pink;}
当设置padding时,就会撑开盒子已有的宽高
div {width: 500px;height: 500px;padding: 50px;background: pink;}
此时,占据文档里的宽高是 600px / 600 px需要写出如下:
div {width: 400px;height: 400px;padding: 50px;background: pink;}
1.9 字体大小的语义
16px
: 一般用作页面中的导航、链接(比较突出)14px
: 一般用作页面中的内容(字数最多的)
12px
: 用于补充说明内容