css --- > [练手小项目]样式小结(字体、颜色的语义 && 清除浮动的使用)

说明

• 源代码

---

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: 用于补充说明内容