css+div

                                                      

Css 的标准流/非标准流

标准流，网页布局中，写在前面的元素，出现在前面，后面的元素，出现在后面，这是默认的布局方式，也称为标准流。

非标准流：在实际网页布局中，我们可能需要使用非标准流的方式来布局（让某个元素，脱离1它本身的位置1）

                      

padding属性的书写格式总共有以下几种： padding:10px; 意思是上下左右值全是10px padding:5px 10px; 意思是上下为5px，左右为10px; padding:1px 2px 3px 4px; 这个写法意思是：上为1px，右为2px，下为3px，左为4px padding:5px 10px 7px; 这种写法意思是：上为5px，左右为10px，下为7px （注意：padding后面4个值定义的顺序分别为：上 右 下 左） 而padding-top或者padding-bottom这种写法，只是单方面的定义了一个方向的值，这样写会增加CSS代码的长度，增加CSS样式的代码量，拖慢页面的加载速度。

定义和用法;

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

说明;

该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制

                                   

可能的值：

                               

 

定义和用法

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

· border-width

· border-style

· border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

              

 

Css盒子模型

盒子模型的原理图：

                                                                        

 

细节说明：

Html元素

看成一个盒子。

盒子模型的参照物不一样，则使用的csss属性不一样，比如从div的角度，是margih-right,从div2看，则是margih-left.

如果你不希望破坏外观，则尽量使用margih布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性），margin如果太大，盒子内容被挤到外面去，但是盒子本身没有变化。

盒子模型-理解

 

盒子模型-进一步理解

 

浮动

                                                          

 

浮动是一个重要的概念：分为左浮动，清除浮动

浮动的必要性，因为默认情况下，div纵向排列：比如：