CSS系列：CSS中盒子模型

　　盒子模型是CSS控制页面时一个很重要的概念。所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。

1. 盒子的内部结构

　　在CSS中，一个独立的盒子模型由content（内容）、border（边框）、padding（内边接）和margin（外边距）4个部分组成。

　　一个盒子实际所占的宽度（或高度）是由“内容 + 内边距 + 边框 + 外边距”组成的。在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding和margin。

2. 边框（border）

　　border一般用于分隔不同元素，border的外围即为元素的最外围，在计算元素实际的宽和高时，需要将border纳入，即border会占据空间。

　　border的属性主要有3个，分别是color、width和style。在使用CSS设置边框的时候，可以分别使用border-color、border-width和border-style来设置。

　　对不同的边框设置不同的属性值方法：按照规定的顺序，给出2个、3个或者4个属性值。

　　◊ 如果给出1个属性值，表示上下左右4条边框的属性值，同为一个值。

　　◊ 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性。

　　◊ 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。

　　◊ 如果给出4个属性值，依次是上右下左边框的属性，即顺时针排序。

　　示例：

border-style: solid;
border-style: solid dashed;
border-style: solid dashed dotted;
border-style: solid dashed dotted double;

　　对于border-width，border-color的属性值设置与border-style类似，支持相同的缩写形式。

border: 1px solid #ff0000;

3. 内边距（padding）

　　padding内边距用于控制内容与边框直接的距离。

padding: 5px;
padding: 5px 10px;
padding: 5px 10px 2px;
padding: 5px 10px 2px 3px;

4. 外边距（margin）

　　margin是元素与元素之间的距离。

margin: 5px;
margin: 5px 10px;
margin: 5px 10px 2px;
margin: 5px 10px 2px 3px;

转载于:https://www.cnblogs.com/libingql/p/4185295.html

CSS系列：CSS中盒子模型相关推荐

Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
CSS基本知识之盒子模型
CSS基本知识之盒子模型首先要知道什么是盒子模型? 所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器.CSS 盒子模型本质上是一个盒子,封装周围的 HT ...
CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
CSS 三大特性与盒子模型
CSS 三大特性 CSS层叠性 css=层叠样式表所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个 ...
html如何设置浮动的盒子,CSS的浮动以及盒子模型
原标题:CSS的浮动以及盒子模型 "没错,就是他." 今天我们来了解一下浮动我们之前说过div是一个块级元素单独占一行的,排版会很不方便,这就引出了我们今天要学习的内容:浮动这 ...
CSS入门三、盒子模型
零.文章目录 CSS入门三.盒子模型 1.网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
html盒子模型多个盒子,css如何使用不同盒子模型
css如何使用不同盒子模型 css使用不同盒子模型可以通过css属性box-sizing来设置,当它的值为content-box时,是标准的盒子模型:当它的值为border-box时,是IE盒子模型: ...
css中盒子模型的布局
目录一水平布局二垂直布局 css中的盒子模型布局分为两种:水平布局和垂直布局一水平布局盒子模型中水平方向影响因素有7个,分别是:margin-left border-left padd ...

CSS系列：CSS中盒子模型

CSS系列：CSS中盒子模型相关推荐

最新文章

热门文章