网页的布局本质就是把网页上的元素,如图片,文字,都放入盒子里面,然后按照自己的需要摆放盒子的过程就是网页布局
1.盒子模型的组成
1.width(内容宽度)+padding(内边距) +border(边框)+margin(外边距)
2.边框
边框有三部分组成:
border: 边框大小 边框样式( solid 实线 dashed 虚线 dotted 点线 double 双实线 ) 边框颜色;
直接这么写边框控制的是上下左右四条边框,如果想要单独某一条边框的写法
border-方位名词:边框大小 边框样式 边框颜色;
边框是一个复合属性,每一个部分都可以有单独的属性去控制 用的较少
边框大小;border-width
边框样式:border-style
框颜色:border-color
细线表格 border-collapse:collapse;
圆角:borde-radius:值; 一个值控制的上左 上右 下右 下左;
3.内边距
一个值:控制整个上下左右
两个值:第一个控制上下 第二个控制左右
三个值:第一个控制的上 第二个控制的左右 第三个控制的下
四个值:上右下左
也可以单独写
padding-top
padding-bottom
padding-left
padding-right
4.外边距
margin的取值方式和padding一样
margin的大小只会移动盒子的位置,并不会对盒子的大小造成影响(特殊情况例外)
行内元素也不要给上下的margin
特殊值:auto margin:0 auto; 可以让一个块级元素水平居中
前提条件:必须是块级元素 同时必须有固定的width
注意:text-align和margin:0 auto的不同 前者是控制盒子内部的文字或者内部的行内块 后者控制的是盒子本身
清楚内外边距
* {
padding: 0;
margin: 0;
}