盒模型就是把HTML页面中的元素看作是以一个矩形的盒子,也就是一个装东西的容器
一、本质:
二、网页布局过程:
1.先准备好相关的网页元素,网页元素都可以看成一个盒子Box
2.利用CSS设置好盒子样式,然后摆放到相应位置;
3.往盒子里面装内容
盒模组成:
1.内容框的内容,其中显示文本和图像。
2.内边距:清除内容周围的边距(内边距是透明的)
3.外框:围绕内边距和内容的边框
4.外边距:清除边界外的区域(外边距是透明的)
三、 基本代码:
1.width:内容的宽度
heigh:内容的高度
注:行内元素不支持设置高度和宽度
2.border-边框
border-width|border-style|border-color
3.padding-内边距
属性:
padding-left:左内边距
padding-right:右内边距
padding-top:上内边距
padding-bottom:下内边距
padding:复合写法
4.margin-外边距
属性:
margin-left:左外边距
margin-right:右外边距
margin-top:上外边距
margin-bottom:下外边距
margin:复合写法
5.其他
box-sizing:用来设置盒子尺寸的计算方式
outline:用来设置元素的轮廓线
box-shadow:用来设定值元素的阴影效果
border-radius:用于设变边框的圆角
word-break: break-all;文字环绕