盒子的属性

目录

盒子：

border 边框：

边距：

内边距 padding ：

外边距 margin：

块级盒子水平居中：

行内元素或行内块元素水平居中：

嵌套块元素塌陷：

清除网页元素内外边距：

盒子阴影：

---

盒子：

        封装html元素，包括但不限于边框、内外边距和实际内容。

        分别是 border 边框，content 内容， padding 内边距，margin 外边距。

border 边框：

        宽度 border-width ：1px；

        颜色 border-color：red；

样式 border-style ：solid（实线）| dashed（虚线）| dotted（点线）| double（双边框）；

圆角：

        border-radius ：length；参数或者百分比

以左上角为起点，设置两个值既对角的半径，四个值则是顺时针的四个脚半径，分写也要按照顺序。

简写无顺序，空格隔开。

边框分开写：

上：border-top;

下：border-bottom；

左：border-left；

右：border-right；

边距：

内边距 padding ：

内边距：left、right、top、bottom。

padding ：5px;  只有一个值代表上下左右都有5px的像素。

padding ：5px  10px; 上下 5 px，左右 10 px；

padding ：5px  10px 20px；上 5 px，左右 10 px，下 20 px。

padding ：5px  10px 20px 30px；上 5 px，右 10 px，下 20 px,左 30 px（顺时针）。

外边距 margin：

外边距：left、right、top、bottom。

简写方式与 padding 一样。

块级盒子水平居中：

1、盒子设置了宽度（width）。

2、左右边距设置为auto。

既 margin = 0 auto；

行内元素或行内块元素水平居中：

父元素加 text-aligh：center;

嵌套块元素塌陷：

对于两个有嵌套关系的盒子，父元素有上外边距同时子元素也有上外边距，子元素会贴着父盒子的顶部，子元素加大内边距只会连着父盒子一起往下推。

解决办法：

1、父元素加一个边框，颜色为透明（transparent）;

2、父元素加内边距。

3、父元素加 overflow：hidden;（推荐）。

清除网页元素内外边距：

浏览器会自带边距，为了不造成影响，开局先清内外边距。

*{
padding : 0;
margin : 0;
}

 行内元素为了照顾兼容，尽量值设置左右内外边距。

盒子阴影：

box-shadow： h-shadow（水平阴影 必 可负值）| v-shadow（垂直阴影 必 可负值）| blur（模糊距离）| spread（尺寸）| color（颜色）| inset（外部阴影改内部）；

按照顺序，不占用空间

box-shadow: 20px 20px 0 10px red ;

文字阴影：

tex-shadow：h-shadow | v-shadow | blur | color；