css中盒模型的理解与整理-白红宇

css中盒模型的理解与整理

阅读量：5085 次

发布时间：2019-06-13

本文共 1799 字，大约阅读时间需要 5 分钟。

margin: 20px;

margin: 外边距

① 只写一个值：表示四周的外边距都是这个值；

② 写两个值：第一个数表示上下，第二个数表示左右；

③ 写三个值：分别表示上、右、下，左边默认等于右边；

④ 写四个值：分别表示上、右、下、左，顺时针方向。

⑤ margin: 0 auto; 设置块级元素在父容器中水平居中！

------------------------------------------------------------------------------------------------------

padding: 20px;

padding：内边距

* 设置方式与margin完全相同。

》》》》》 * 注意：设置padding后，将导致div可见区域被撑大！使用时必须注意div所占的实际大小。

------------------------------------------------------------------------------------------------------

border: 10px solid blue;

border：边框

* 共接收三个属性：边框的宽度、边框的样式、边框的颜色。

* 边框样式不能省略，其他的两个可以省略，但是原则上一般三个属性都要写。

* 三个属性的顺序，可以随意修改，没有先后要求。

【父容器高度塌陷问题】                                原因： 当父盒子包裹子盒子，给子盒子添加margin-top时，子盒子和父盒子的上边线重合，而导致两个盒子同时下来。             * [解决办法]             1、 给父容器添加一定的padding-top。 会导致父容器产生不必要的padding区域，不推荐使用；             2、 给父容器添加一定的上边框。会导致父容器产生不必要的边框。                 3、 给父容器或子容器添加float属性；             4、 给父容器添加overflow属性。推荐！！

border-radius: 260px;

border-radius:圆角

1、 border-radius共接收8个属性值，分别表示：

X轴（左上、右上、右下、左下）/Y轴（左上、右上、右下、左下）

eg:border-radius: 20px 30px 40px 50px/50px 40px 30px 20px;

2、 缩写形式：                 省略Y轴，默认与X轴相等；                四角写不全，默认对角相等；                 只写一个值，默认8个值均等；                eg: border-radius: 50px 20px;                    =border-radius: 50px 20px 50px 20px;                   =border-radius: 50px 20px 50px 20px/50px 20px 50px 20px;              3、 当圆角弧度>=正方形边长的一半时，将显示为原形

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

box-shadow 盒子阴影

* 共接收6个属性值，用空格分隔：

* ① 水平阴影距离(必选)：可正可负。正数右移，负数左移；

* ② 垂直阴影距离(必选)：可正可负。正数下移，负数上移；

* ③ 阴影模糊半径(可选)：只能为正数，默认为0. 数值越大，阴影越模糊；

* ④ 阴影扩展半径(可选)：可正可负，默认为0. 数值增大，阴影扩大，数值减小，阴影缩小；

* ⑤ 阴影颜色(可选值)：默认为黑色。

* ⑥ 内外阴影(可选值)：默认为外阴影。 inset 表示内阴影。

outline: 10px solid red;

outline 外围线

* 在元素的边框以为，不占据任何空间，可能会覆盖四周的内容。