CSS盒子模型 2.16

一，盒子模型

1，盒子模型就是把HTML页面中的元素看作一个矩形的盒子，一个装内容的容器。

css盒子模型本质上是一个盒子，用于封装HTML 元素，包括：边框，内外边距，和实际内容

• margin(外边距) - 清除边框外的区域，外边距是透明的。b
• order(边框) - 围绕在内边距和内容外的边框。
• padding(内边距) - 清除内容周围的区域，内边距是透明的。
• content(内容) - 盒子的内容，显示文本和图像。

1.1  border(边框) 

属性	作用
border-width	定义边框粗细，px
border-style	边框样式
border-color	边框颜色

                border-style                solid        实线边框

                                                    dashed    虚线边框

                                                    dotted        点线边框

边框简写                border：1px solid red； /*没有顺序*/                                                    

边框分开写法：

border-top：5px solid red；                /*上边框*/

border-bottom：                                /* 下边框*/

border-left：                                           左

border-reight：                                       右

border-collapse: collapse;                合并边框线

边框会影响盒子大小

 圆角边框

border-radius: 10px 20px 30px 40px；                可以分开设置，左上开始顺时针

1.2    margin(外边距)

/* 应用于所有边 */
margin: 1em;
margin: 20px;

/* 上边下边 | 左边右边 */
margin: 5% auto;

/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;

/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;

将左右外边距设置为auto，盒子水平居中

margin: 0  auto；

行内元素和行内块元素水平居中对齐，给父类元素添加text-aling：center 即可

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

1，为父类元素添加一个边框

border：1px solid transparent；                /*透明边框*/

2，为父类元素定义一个上内边距

padding：1px；

3，可以为父元素添加上overflow.hidden

清除盒子的内外边距

        *{

             margin：0；

              padding：0；

}

1.3  padding(内边距)

padding:10px 5px 15px 20px;

• 上内边距是 10px
• 右内边距是 5px
• 下内边距是 15px
• 左内边距是 20px

内边距会影响盒子大小

特殊情况：如果盒子本身没有设定width/height属性，此时padding不会撑大盒子。

1.4  content(内容)

/*让图片适应盒子宽度*/

.img {

        width：100%；

}

1.5  盒子阴影

文字阴影

text-shadow: