第四周 盒子模型总结

一 边框

border：各种属性；

border-width  定义边框粗细，单位为px

border-style  边框的样式

             none 无边框

           hidden 隐藏边框

            dotted 实线框（正常平台上）

               solid实线框

double （双线框）两条线及其距离的总和为设定的边框宽度

border-color  边框的颜色

属性为四个值    按上，右，下，左的顺序设定

属性为三个值    第一个为上，第二个设定左右，第三个设定下

属性为两个值   第一个上下，第二个左右

属性为一个值   包含所有边框

二 内边距（一般用来控制盒子边框与盒子内容之间的距离）

padding：属性；

后面可设定一至四个值，单位为px，表达效果同上（如果盒子本身有wideh，height属性，则会撑开盒子，否则不会改变盒子大小）

三 外边距（控制盒子之间的距离）

margin：各种属性；

其后可接left，right，top，bottom修改特定方向的距离

盒子水平居中

      两个条件 1 盒子有宽度

                     2 盒子左右外边距设置为auto

      三种写法 1 margin-left：auto；  margin-right：auto；

                      2 margin：auto；

                      3 margin：0 auto；（最常用）

垂直块元素外边距塌陷问题

对于两个嵌套的块元素，父元素有上外边框的同时子元素也会有上外边距，此时父元素会塌陷

解决方法（给父元素添加）

1 定义上边框（为不影响效果可添加透明边框）

2 定义上内边框

3 添加overflow：hidden；

清楚内外边框（浏览器自带）

*{

padding：0；

margin：0；

}

四 圆角边框

border-radis：length；

radius（圆与边框交际形成的圆角效果）

属性

1 参数值可以为数值或百分比的形式
2 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
如果是个矩形,设置为高度的一半就可以4
4 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和
border-bottom-left-radrùs

五 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需，水平阴影的位置，允许负值。

v-shadow 必需，垂直阴影的位置。允许负值。

blur 可选。模糊距离。
spread可选。阴影的尺寸。
 color可选。阴影的颜色。请参阅CSS颜色值。
inset可选。将外部阴影(outset）改为内部阴影.
注意：
1.默认的是外阴影(outset)，但是不可以写这个单词，否则导致阴影无效
2.盒子阴影不占用空间，不会影响其他盒子排列。

六 文字阴影

6.文字阴影
 

text-shadow: h-shadow v-shadow blur color;

描述
h-shadow必需。水平阴影的位置。允许负值。

v-shadow必需。垂直阴影的位置。允许负值。

blur可选。模糊的距离。
color可选。阴影的颜色。参阅CSS 颜色值。