盒子布局之属性

盒子

盒子模型

属性: width、height、border(边框)、padding(内边距)、margin(外边距)

组成部分：content(内容)、border(边框)、padding(内边距)、margin(外边距)。

网页中盒子模型是用于排版布局的矩形块，div标签。

属性

基本属性

content(宽width、高height)

border-width 变宽

border-color 边颜

border-style 边线 （solid实线/dashed虚线/dotted点线/none无边框）

单独设置某个方向的边框：

border-方向词:宽 线 颜色；

单独设置某个方向的某一效果：

• border-方向词-color:颜色
• border-方向词-width:像素px
• border-方向词-style:线型

去掉边框两大类：

• 边框粗细为0：border:0px; border-with:0px;
• 边框线型没有：border:none; border-style:none;

border复合属性

border:宽度 线型 颜色；

• 边框线型不能省；
• 边框宽度，默认3px；
• 边框颜色，默认文字颜色；

内边距

内边距：设置内容与边框之间的距离；

parring-方向词:长度值;(单位px，不可为负值)

内边距复合属性

padding:属性值；

改变4个值；

属性值个数的改变：（顺时针方向）

1个值时，上下左右

2个值时，上下，左右

3个值时，上，左右，下

4个值时，上，右，下，左

 外边距

外边距：设置框与框的距离；

margin-方向词:长度值；(可负值)

外边距复合属性；

margin:属性值；

margin:0 auto; /*实现水平方向居中显示效果*/

属性值个数与内边距一样；

俩盒子都设置外边距margin，会发生合并；

• 两值相等，取平均；
• 两值不等，取最大；

浮动属性

浮动属性是对页面元素设置水平方式布局的CSS属性；

float：浮动

float:left/right/none；

        属性值：

                left  左浮  顺序靠左

                right    右浮   倒叙靠有

                none   默认无浮动

 规律 ：   子盒所占空间宽度总和<=父盒子内容宽度

                右侧盒子右浮动，其他盒子左浮动     

clear  清除浮动影响

clear:left/right/both/none;

浮动基本应用：

横向导航、div排版布局、新闻列表、图文混排

搭建思路要清晰：

由外到里，由上到下，由左到右！