CSS笔记--day05

1.CSS属性书写顺序(重点)

1).布局定位属性：display / position / float / clear / visibility / overflow (建议display 第一个写，毕竟关系到模式)

2).自身属性：width / height / margin / padding / border / background

3).文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word

4).其他属性(CSS3)：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient...

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helevetica Neue', Helevetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit -border -radius: 10px;
    -moz -border -radius: 1opx;
    -o-border-radius: 10px;
    -ms-border-radius:10px;
    border-radius: 10px;
}

 2.布局流程

为了提高网页制作的效率，布局时通常有以下的布局流程，具体如下：

1. 必须确定页面的版心（可视区），测量可得知。
2. 分析页面中的行模块。以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成
3. 制作HTML结构，我们还是遵循，先有结构，后有样式的原则。结构永远最重要
4. 然后开始运用盒子模型的原理，通过div+css布局来控制网页的各个模块

 3.通过颜色判断盒子

蓝色是盒子的宽度高度   青色是内边距   橙色是外边距   通过这个很方便的看到盒子给的范围