1.什么是盒子模型
a)盒子模型是CSS中重要的理论，它是页面布局的基石；
b)它认为页面中所有元素都可以看做是一个盒子p、div、span、a、img；
c)它认为可以通过设置盒子的属性进而改变元素（盒子）的显示效果；
d)它认为盒子间是相互影响；
2.盒子的属性
a)width：设置元素的宽度，属性值为像素值、百分比、auto（自适应宽度）
b)height：设置元素的高度，属性值为像素值、百分比、auto（自适应高度）
c)border：设置元素边框，注意在设置边框时类型不可省略
border-style：设置边框类型，属性值为solid（实线，默认）dashed（虚线）dotted（点线）none（无）
border-width：设置边框宽度，属性值为像素值，值越大，边框越粗，默认3px
border-color：设置边框颜色，属性值颜色名称、十六进制代码、rgb、rgba，默认黑色
border的复合属性，格式border:值1 值2 值3
上边框：border-top-width
下边框：border-bottom-style
左边框：border-left-color
右边框：border-right：值1值2值3
d)padding：设置内容和边框的距离（内边距），属性值可以是像素值，该属性通常被应用于祖先元素上
上内边距padding-top
下内边距padding-bottom
左内边距padding-left
右内边距padding-right
也可以通过值的个数来表示上下左右内边距
padding:值1 上下左右相同
padding：值1（上下）值2（左右）
padding：值1（上）值2（左右）值3（下）
padding：值1（上）值2（右）值3（下）值4（左）
e)margin：设置元素间的距离（外边距），属性值可以是像素值
上外边距：margin-top
下外边距：margin-bottom
左外边距：margin-left
右外边距：margin-right
margin:值1上下左右相同
margin：值1（上下）值2（左右）
margin：值1（上）值2（左右）值3（下）
margin：值1（上）值2（右）值3（下）值4（左）
f)注意事项
两个上下关系的元素，它们间的margin值不是和的关系，是用两个margin值中较大的那个；
如果两个元素是父子关系（包含与被包含关系），那么当给子元素设置margin-top时，父元素会同步下移，解决方法：
子元素不加margin-top，给父元素加padding-top；
子元素可以加margin-top，同时给父元素加边框；
子元素可以加margin-top，同时给父元素加paddint-top:0.1px；
页面中元素具有默认的内外边距，所以在做页面时需要将元素所有的默认值清零，方法*{margin:0;padding:0}
lmargin:0auto使用时的注意事项：该方法的适用对象为块元素
行内元素不支持margin-top和margin-bottom
什么时候用margin、什么时候用padding
如果要调节的是文本距离容器的距离，只能给容器加padding
如果要调节的是两个元素间的距离，分为这样几种情况
a)两个元素是平行关系，只能用margin
b)如果两个元素是包含关系，那么既可以用margin（子元素），也可以用padding（父元素）
g)盒子的实际尺寸（标准盒模型，元素的宽度只表示内容的宽度，内边距和边框会影响元素实际宽度、高度，此时需要在width上做减法）
实际宽度=左边框+左内边距+width+右内边距+右边框
实际高度=上边框+上内边距+height+下内边距+下边框
h)box-sizing:border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即( Element width = width )
i)border-radius：设置圆角边框，属性值为像素值，属性值越大，弧度越大
左上角：border-top-left-radius
左下角：border-bottom-left-radius
右上角：border-top-right-radius
右下角：border-bottom-right-radius
也可以用值的个数表示元素的四个角
border-radius：值（四个角弧度相同）
border-radius：值1（左上、右下）值2（右上、左下）
border-radius：值1（左上）值2（右上、左下）值3（右下）
border-radius：值1（左上）值2（右上）值3（右下）值4（左下）
网友评论