css框模块

今天药忘吃喽~ 2022-06-06 11:11 186阅读 0赞

css框模型（box model）规定了元素框处理元素内容、内边距、边框和外边框的方式。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。  
**注意：背景应用于由内容和内边距、边框组成的区域。**  
![这里写图片描述][SouthEast]

在浏览器中，内边距、边框和外边框都是可选的，默认值为0，但是许多元素将由用户代理样式设置外边距和内边距。可以通过将元素的margin和padding设置为零类覆盖浏览器样式。

在css中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素的总尺寸。  
**注意：外边距可以是负值，而且在很多情况下都要使用负值的外边距**

下面来介绍下 各个模型对应的属性值：  
**1、css内边距**  
元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。css padding属性定义元素边框与元素内容之间的空白区域。

**padding属性**  
声明设置所以内边距属性，设置元素所有内边距的宽度，或者设置个边上边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看看你会延伸到其它行，有可能还会与其它内容重叠。元素的背景会延伸穿过内边距，**不允许指定负值的边距值**。  
eg：

padding:10px 5px 15px 20px

设置后  
上内边距是10px  
右内边距是5px  
下内边距是15px  
左内边距是20px  
如果只填了一个值，你们所有内边距都是对应一个值。  
值：  
auto：浏览器技术内边距  
length：规定以具体单位计的内边距值。  
%：规定基于父元素的宽度的百分比的内边距  
iherit：从父元素继承内边距。

其他属性：  
padding-buttom  
padding-left  
padding-right  
padding-top  
都对应padding中各个值。

**2、css边框**  
元素的边框（border）是围绕元素内容和内边距的一条或多条线。css border属性允许归集元素的边框样式、宽度和颜色。  
**边框样式属性（border-style）**  
border-style属性用于设置元素所有边框的样式，或单独地位各边设置边框样式  
eg

border-style:dotted solid double dashed;

设置后  
上边框是点状  
右边框是实线  
下边框是双线  
左边框是虚线  
值：  
none：定义无边框  
hidden：和none一样。不过应用于表时除外，对应表，hidden用于解决边框冲突。  
dotted：定义点状边框。在大多数浏览器中呈现为实线。  
dashed：定义虚线。在大多数浏览器中呈现为实现。  
solid：定义实线。  
double：定义双线。双线的宽度等于border-width的值。  
groove：定义3D凹槽边框，其效果取决于border-color的值。  
ridge:定义3D垄型边框，其效果取决于border-color的值。  
inset：定义3D inset边框，其效果取决于border-color的值。  
outset：定义3D outset边框，其效果取决于border-color的值。

类似的属性：  
border-top-style  
border-right-style  
border-bottom-style  
border-left-style

**设置边框的宽度（border-width）**  
border-width属性为元素的所有边框设置宽度，或者单独为个边边框设置宽度。  
只有当边框样式不是none时才起作用。如果边框样式是none，边框宽度实际上会重置为0。**注意不能设置为负值。**  
例子：

border-width:thin medium thick 10px;

设置后  
上边框是细边框  
右边框是中等边框  
下边框是粗边框  
左边框是 10px 宽的边框

值：  
thin：定义细的边框。  
medium：定义中等的边框（默认）  
thick：定义粗的边框。  
length：自定义边框的宽度。  
inherit：从父元素中继承。  
同等属性：  
border-top-width  
border-right-width  
border-bottom-width  
border-left-width

**3、设置边框颜色(border-color)**  
border-color属性设置4条边框的颜色。此属性可设置1到4中颜色。**注意，边框必须存在，不为none或hidden才可以设置颜色**  
eg：

border-color:red green blue pink;

上边框是红色  
右边框是绿色  
下边框是蓝色  
左边框是粉色  
值：  
color\_name：规定边框颜色值的颜色名称，如例子。  
hex\_number：规定颜色值为16进制值的边框颜色。  
rgb\_number：规定颜色值为rgb代码的边框颜色。  
transparent：边框颜色为透明，默认值。  
同等的属性  
border-top-color  
border-right-color  
border-bottom-color  
border-left-color

**3、css外边距**  
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距最简单的方法是使用margin属性，这个属性接受任何长度单位、百分数甚至负值。  
**设置外边框的大小（margin）**  
margin属性设置所有外边距，可以为负值  
eg：

margin:10px 5px 15px 20px;

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

值：  
auto：浏览器计算外边距。  
length：规定具体单位计的外边距值。  
%：规定基于父元素的宽度的百分比的外边距。  
inherit：从父元素中继承。

[SouthEast]: /images/20220606/ade39fbfaafe44fa8327721ff74db0b4.png