CSS盒模型

什么是盒模型（逆战班）

在这里插入图片描述
上面图片就是一个盒子模型。

所有的HTML素都可以看做是一个盒子，在CSS中盒子模型是为了布局和设计使用的，CSS盒模型本质上就是一个盒字，封装HTML素包括:margin(边距)、padding（填充）、border（边框）、content（实际内容），盒模型允许我们在其它素和周围素边框之间的空间放置素。

1、content：代表内容区，文本和图像在这里面显示。

2、padding：内填充，定义内容与素边框的空间，即上下左右的内边距，不可以写负值，可以单独设置内容与素边框之间的上下左右的间距。

padding-top：上填充
padding-right：右填充
padding-bottom：下填充
padding-left：左填充
padding也可以单独使用，有一个简单的写法，也叫复合式写法。
当写一个值的时候：
padding：5px；
代表：上填充5像素，右填充5像素，下填充5像素，左填充5像素。
两个值：
padding：5px 6px;
代表：上下填充5像素，左右填充5像素。
三个值：
padding：5px 6px 7px;
代表：上填充5像素，左右填充6像素，下填充7像素。
四个值：
padding：1px 2px 3px 4px;
代表：上填充1像素，右填充2像素，下填充3像素，左填充4像素。
顺序遵循上右下左的原则，按顺时针旋转，这个顺序是不变的。

3、margin：外边距，定义素外面周围的空间。

margin-top：上边距
margin-right：右边距
margin-bottom：下边距
margin-left：左边距

margin也可以单独使用，跟padding使用规则一样，也有复合式写法。
一个值：
margin：2px；
代表：上外边距2像素，右外边距2像素，下外边距2像素，左外边距2像素。
两个值：
margin：3px 6px;
代表：上下外边距3像素，左右外边距5像素。
三个值：
margin：5px 6px 7px;
代表：上外边距5像素，左右外边距6像素，下外边距7像素。
四个值：
margin：1px 2px 3px 4px;
代表：上外边距1像素，右外边距2像素，下外边距3像素，左外边距4像素。
顺序也是按顺时针添加边距，顺序是不可变的。

4、border：边框，指定素的边框样式和颜色。

border-style：指定边框样式。
属性值有 none（默认无边框）、dotted（定义一个点线边框）、dashed（定义一个虚线边框）、solid（定义一个实线边框）double（定义两个边框，两个边框的宽度和 border-width 的值相同）
border-color：定义边框颜色，如果使用这个属性不显示，则先定义一个边框样式在使用。
属性值有name（颜色的名称如：red）、RGB（指定rgb值如：rgb(255,0,0)）、Hex （指定16进制值如：#ffffff;）
border-style的值可以有四个值：
border-style:dotted solid double dashed;
上边框是 dotted；
右边框是 solid；
下边框是 double；
左边框是 dashed；

border也可以写复合式写法：
border：1px solid #cccccc；
代表：上右下左1像素的边框，样式是实线的，颜色是灰色的。

下面是一个简易的盒子样式代码：

 /*给素盒子加边框和外边距*/ div{ 
    width: 300px; height: 300px; background: red; border: 5px solid #ccc; margin: 100px; } /* 给内容区添加边距和填充*/ p{ 
    margin-top: 30px; padding-left: 100px; } <body> <!--开始盒子样式--> <div> <p>今天很开心</p> </div> </body>

在这里插入图片描述

今天的文章 CSS盒模型分享到此就结束了，感谢您的阅读。

什么是盒模型（逆战班）

相关推荐