什么是盒子模型
所有HTML元素可以看作盒子,无论是div、span、还是a都是盒子
但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己 就是自己的内容。
一个盒子中主要的属性就5个:width、height、padding、border、margin
width和height:内容的宽度、高度(不是盒子的宽度、高度)。
border:边框。
padding:内边距。
margin:外边距。边框
border-color:边框颜色
border-width:边框粗细
border-style:边框样式
边框粗细和样式的用法和颜色的用法一致
示列
border-top-width:5px;
border-top-style:solid;
边框样式常用属性solid(实线)dashed(虚线)
简写(没有顺序)
border: 1px #F00 dashed ;
- padding 内边距
写法与边框一致
示列
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;
- margin外边距
用法与内边距相同
示列
margin-top: 1 px;
margin-right : 2 px;
margin-bottom : 2 px;
margin-left : 1 px;
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;
网页居中对齐
margin:0px auto;
或者
maring-left:auto;margin-right:auto;
- 盒子模型的尺寸
- 标准文档流
网页在解析的时候的一个“默认”状态。,html元素排版布局过程中遵循于从上向下,从左向右的一个顺序,由窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。