盒子塌陷:解决方案,父元素浮动
盒子模型:在网页中一个模块就是一个盒子模型(大大小小的有无数个)
组成:content(具体的内容)+padding(内填充)+border(边框)+margin(外边距)
盒子模型中唯一一个可以设置负值的属性是margin,为负值时反方向运动
margin值得设置方式:
方式1:实际开发酌情使用
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
方式2:实际开发推荐使用
margin:10px(上) 20px(右) 30px(下) 40px(左);
margin:20px(上) 30px(左右) 40px(下);
margin:30px(上下) 40px(左右);
margin:40px(上下左右);
margin:0 600px 0 0;
总结:
当float:left时,改变margin-left的值时,盒子自己本身移动(往右运动)
改变margin-right的值时,盒子相邻的元素移动
当float:right时,改变margin-right的值时,盒子自己本身移动(往左运动)
改变margin-left的值时,盒子相邻的元素移动
无论左浮动还是右浮动,margin-top都是作用于自己本身,margin-bottom都i是作用于下面相邻的元素
盒子边框(border)
- 语法:border : border-width || border-style || border-color
| 属性 | 作用 |
| border-width | 定义边框粗细,单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
- 边框的样式:
- none:没有边框即忽略所有边框的宽度(默认值)
- solid:边框为单实线(最为常用的)
- dashed:边框为虚线
- dotted:边框为点线
- double:双线
块级盒子水平居中可以让一个块级盒子实现水平居中必须:
- 盒子必须指定了宽度(width)
- 然后就给**左右的外边距都设置为auto**,
实际工作中常用这种方式进行网页布局,示例代码如下:
.header{ width:960px; margin:0 auto;}
常见的写法,以下下三种都可以。
* margin-left: auto; margin-right: auto;
* margin: auto; * margin: 0 auto;