CSS 盒模型

前端小胡兔

已于 2023-03-27 11:27:10 修改

阅读量571

点赞数

分类专栏：前端基础1--(html/css/浏览器/相关) 文章标签：前端

于 2022-07-08 17:08:23 首次发布

本文链接：https://blog.csdn.net/weixin_44805839/article/details/125644468

版权

前端基础1--(html/css/浏览器/相关) 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是盒模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

盒模型种类

css的盒模型有2种，分别为：

W3c标准的盒子模型（标准盒模型），width和height指的是内容区域的宽度和高度；
IE标准的盒子模型（怪异盒模型），width和height指的是内容区域、边框、内边距总的宽度和高度。

盒模型构成

一个盒子中主要的属性分为width、height、padding、border、margin。如下：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

盒模型示意图

盒模型

为什么要设计盒模型

盒模型的设计极大地方便了开发者在开发页面时的布局问题。

两种盒模型的优缺点

标准盒子的好处在于比较符合人定义元素的宽高度，但IE 盒子更适合布局和表单。

把盒子设置为IE盒模型，不论内边距距，边框如何改变盒子的真实宽高都不会发生改变。

有一个场景会比较常见，比如有两个div，各占50% ，很明显如果设定padding border margin ，这两个div就不会在一行了。所以IE 盒子更适合布局。
目前css3有个属性 box-sizing 可以设定div 的盒子模型类别。如下：

box-sizing: conteng-box(标准的) | border-box(IE的) | inherit

盒模型构建及布局

盒模型构建之margin

定义

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
margin

用法

margin-top:100px; //上外边距是 25px
margin-bottom:100px; //右外边距是 25px
margin-right:50px; //下外边距是 25px
margin-left:50px; //左外边距是 25px

当然,有更简便的书写方式:

margin属性可以有一到四个值。

margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px

margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px

margin:25px 50px;
上下边距为25px
左右边距为50px

margin:25px;
所有的4个边距都是25px

*margin属性允许使用负值，用于重叠等操作。
*margin属性可以定义一个固定的填充(像素, pt, em,等),也可以使用%,用百分比值定义一个填充。
*margin属性还可以使用"auto"来设置浏览器边距，但这样做的结果会依赖于浏览器。

盒模型构建之border

定义

CSS边框属性允许指定一个元素边框的样式和颜色。

用法

颜色-border-color

border-color属性用于设置边框的颜色。可以设置的颜色：

name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
还可以设置边框的颜色为"transparent"。

举个例子:

border-style:solid;
border-color:red;

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

单独设置各边样式-border-style

在CSS中，可以指定不同的侧面不同的边框：

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;

border-style属性可以有1-4个值：

border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed

border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double

border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid

border-style:dotted;
四面边框是 dotted

*也可以和border-width 、 border-color一起使用。

边框-简写属性

border:5px solid red;

border其他属性

盒模型构建之padding

定义

padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
padding

用法

padding-top:25px; //上内边距是 25px
padding-bottom:25px; //下内边距是 25px
padding-right:50px; //右内边距是 25px
padding-left:50px; //左内边距是 25px

当然,有更简便的书写方式:

Padding属性，可以有一到四个值。

padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px
	
padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px
	
padding:25px 50px;
上下填充为25px
左右填充为50px
	
padding:25px;
所有的填充都是25px

*padding属性不允许使用负值。
*padding属性可以定义一个固定的填充(像素, pt, em,等),也可以使用%,用百分比值定义一个填充。