CSS 盒子模型详解

子模型:

由content(内容)、border(边框)、padding(间隙)、margin(边框)

一个盒子的实际宽度(或高度)是由content+padding+border+margin组成的;

在CSS中可以通过设定width和height的值来控制content的大小, 并且对于任何一个盒子, 都可以分别设定4条边各自的border、padding和margin。

所有的元素都是一个盒子

如: a标记也可以设置padding margin;

在浏览器中, width和height的值兼容性很差, 具体指代跟HTML第一行的声明有关, 如果不声明则

IE7 width=content的宽度 + padding + border + margin

height=content的高度 + padding + border + margin

W3C标准: width=content的宽度

padding 会影响盒子的问题

盒子真正的大小 width 总的宽度：盒子的宽度 + 左右padding + 左右border 值 + 左右margin

如果做一下DTD声明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

则只代的都是content的宽和高。通常情况下尽量使用上述声明，这样浏览器之间的兼容性会大大提高。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.father{
width:300px;
height:150px;
background-color:pink;
padding:100px; /* 盒子实际宽度变成500px, 实际高度变成:350px */
}
</style>
</head>
<body>
<div class="father">
</div>
</body>
</html>

简单计算题

问：一个盒子的宽度为 200像素, 这个盒子, 有一个左边为 15 像素的内边距, 还有 3 像素的边框? 问, 这个盒子的实体宽度是?

答：实际宽度=width+ padding-left + border

=200 + 15 + 3*2

=221

中等数学题

问：一个盒子的宽度为 200 像素, 这个盒子, 有一个左边为 15 像素的内边距, 还有 3 像素的边框? 但是, 我们盒子的大小是不能变的。问怎么办?

盒子大小不能变, 盒子的最终大小不能变。

答：实际宽度=width+ padding-left + border

200=x + 15 + 6

x=200 - 15 -6

x=179

这个盒子的width变成 179 就可以了。

复杂数学题

要求小盒子在大盒子里面水平居中, 垂直居中?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.father{
/*width:300px;
height:150px;
background-color:pink;
padding:75px 100px;*/
width:400px;
height:225px;
background-color:pink;
padding:75px 0 0 100px;
}
.son{
width:300px;
height:150px;
background-color:deeppink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

padding不会影响盒子的情况：

继承的盒子默认和父亲一样宽, 如果继承的盒子没有宽度, 则padding值不会撑开盒子的宽度, 不用再去减了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.father{
width:300px;
height:200px;
background-color:pink;
}
.son{
height:50px;
background-color:deeppink;
padding-left:50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

盒子透明

1 background：rgba(),这是一个CSS3属性,IE6 7 8 不支持

可以再小括号内里面设置第四个参数opacity:0-1

background:rgba(0,0,0,0.4);

2 CSS滤镜：首先给IE高版本和其他高版本浏览器(chome、Firefox)设置属性opacity:0-1

如果让低版本IE浏览器也支持半透明我们可以利用filter:appha(opacity=40); 此时的0-100表示全透明到不透明

opacity:0.4;
filter:alpha(opacity=40);

盒子居中

盒子水平居中的方法：

div{
width:500px
margin:14px auto;
}

盒子水平和垂直居中：

如何让一个盒子在屏幕水平和垂直居中显示？

以400*300的盒子为例：

首先给这个盒子设置一个绝对定位，position：absolute.然后将他的left top都设置为50%,此时这个盒子的左边界和尚边界都在中间的位置,

最后我们只需要再给这个盒子margin-left:-200px;margin-top:-140px,让这个盒子在往左、上走自身的一半;

div{
position:absolute;
left:50%; top:50%;
margin-left:-200px;
margin-top:-150px;
}

注意:让盒子居中必须写<!DOCTYPE>

margin的塌陷现象

标准文档流中, 竖直方向的margin不叠加, 以较大的为准。

*{
margin: 0;
padding: 0;
}
.p1{
width: 300px;
height: 200px;
background-color: orange;
margin-bottom: 30px;
}
.p2{
width: 300px;
height: 200px;
background-color: orange;
margin-top: 50px;
}
<p class="p1"></p>
<p class="p2"></p>

如果不在标准流, 比如盒子都浮动了, 那么两个盒子之间是没有塌陷现象的：

*{
margin: 0;
padding: 0;
}
div{
width: 200px;
border: 10px solid red;
overflow: hidden;
}
.p1{
width: 200px;
height: 100px;
background-color: orange;
margin-bottom: 40px;
float: left;
}
.p2{
width: 200px;
height: 100px;
background-color: orange;
margin-top: 30px;
float: left;
}
<div>
<p class="p1"></p>
<p class="p2"></p>
</div>

善于使用父亲的padding，, 而不是儿子的margin

如果父亲没有border, 那么儿子的margin实际上踹的是"流", 踹的是这"行"。所以, 父亲整体也掉下来了

这个p有一个margin-top踹父亲, 试图将自己下移

*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 250px;
background-color: orange;
}
p{
width: 100px;
height: 100px;
margin-top: 60px;
background-color: green;
}
<div>
<p></p>
</div>

儿子用margin-top踹父亲, 父亲没有border, 结果父亲也下来了

第一种解决方法：

*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 250px;
padding-top: 50px;
background-color: orange;
}
p{
width: 100px;
height: 100px;
background-color: green;
}
<div>
<p></p>
</div>

使用在父亲使用padding-top, 代替儿子使用margin-top

第二种解决方法：

*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 250px;
background-color: orange;
border: 1px solid red;
}
p{
width: 100px;
height: 100px;
margin-top: 60px;
background-color: green;
}
<div>
<p></p>
</div>

儿子用margin-top踹父亲，但是父亲有border。达到了我们的目的。

margin这个属性, 本质上描述的是兄弟和兄弟之间的距离；最好不要用这个marign表达父子之间的距离。

所以, 我们一定要善于使用父亲的padding, 而不是儿子的margin。

凡是盒子模型(width/height+padding+border+marign)的东西都不能继承

CSS可以继承的属性:

font-系列

text-系列

color

line-height

握CSS盒子模型：一站式指南-CSDN博客

盒子模型

01-选择器

结构伪类选择器

基本使用

作用：根据元素的结构关系查找元素。

选择器	说明
E:first-child	匹配父元素的第一个子元素E
E:last-child	匹配父元素的最后一个子元素E
E:nth-child(n)	匹配父元素的第n个子元素E
E:nth-last-child(n)	匹配父元素的倒数第n个子元素E
E:first-of-type	匹配父元素下同类型元素中的第一个E
E:last-of-type	匹配父元素下同类型元素中的最后一个E
E:nth-of-type(n)	匹配父元素下同类型元素中的第n个E
E:nth-last-of-type(n)	匹配父元素下同类型元素中的倒数第n个E

:nth-child(公式)

以下是针对:nth-child()伪类中公式的说明表格：

功能	公式
匹配第n个子元素	:nth-child(n)
匹配偶数位置的子元素	:nth-child(2n)
匹配奇数位置的子元素	:nth-child(2n+1)
匹配前n个子元素	:nth-child(-n+3)
匹配后n个子元素	:nth-last-child(n)
匹配倒数第n个子元素	:nth-last-child(-n)
匹配从第n个开始的子元素	:nth-child(n+x)
匹配从第n个结束的子元素	:nth-last-child(n+x)

这些公式可以用于选择符合特定条件的子元素，并为它们应用样式。

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

div::before {
  content: "before 伪元素";
}
div::after {
  content: "after 伪元素";
}

注意点：

必须设置 content: ””属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式
权重和标签选择器相同

扩展：PxCook（像素大厨）是一款切图设计工具软件。

02-盒子模型

作用：布局网页，摆放盒子和内容。

盒子模型-组成

内容区域 – width & height
内边距 – padding（出现在内容与盒子边缘之间）
边框线 – border
外边距 – margin（出现在盒子外面）

div {
  margin: 50px;
  border: 5px solid brown;
  padding: 20px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

边框线

四个方向

属性名：border（bd）

属性值：边框线粗细线条样式颜色（不区分顺序）

以下是关于表框线属性的表格：

属性值	线条样式
none	无
hidden	隐藏
dotted	点线
dashed	虚线
solid	实线
double	双实线
groove	凹槽效果
ridge	凸起效果
inset	内阴影效果
outset	外阴影效果

这些属性值可用于控制表框线的样式，从而实现不同的外观效果。

div {
  border: 5px solid brown;
  width: 200px;
  height: 200px;
  background-color: pink;
}

尝试一下>>>菜鸟教程在线编辑器

单方向边框线

属性名：border-方位名词（bd+方位名词首字母，例如，bdl）

属性值：边框线粗细线条样式颜色（不区分顺序）

div {
  border-top: 2px solid red;
  border-right: 3px dashed green;
  border-bottom: 4px dotted blue;
  border-left: 5px solid orange;
  width: 200px;
  height: 200px;
  background-color: pink;
}

内边距

作用：设置内容与盒子边缘之间的距离。

属性名：padding / padding-方位名词

div {
  /* 四个方向 内边距相同 */
  padding: 30px;
  /* 单独设置一个方向内边距 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 80px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

提示：添加 padding 会撑大盒子。

padding 多值写法

取值个数	示例	含义
1	padding: 10px;	设置四个方向的内边距为10像素
2	padding: 10px 20px;	设置上下内边距为10像素，左右内边距为20像素
3	padding: 10px 20px 15px;	设置上内边距为10像素，左右内边距为20像素，下内边距为15像素
4	padding: 10px 20px 15px 25px;	分别设置上、右、下、左内边距为10、20、15、25像素

这些多值写法可以用于同时设置不同方向的内边距。

技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。

尺寸计算

默认情况：盒子尺寸=内容尺寸 + border 尺寸 + 内边距尺寸

结论：给盒子加 border / padding 会撑大盒子

解决：

手动做减法，减掉 border / padding 的尺寸
內减模式：box-sizing: border-box

外边距

作用：拉开两个盒子之间的距离

属性名：margin

提示：与 padding 属性值写法、含义相同

版心居中

左右 margin 值为 auto（盒子要有宽度）

div {
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  background-color: pink;
}

清除默认样式

清除标签默认的样式，比如：默认的内外边距。

/* 清除默认内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 清除列表项目符号 */
li {
  list-style: none;
}

元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

属性值	效果
visible	默认值，溢出内容可见，不会出现滚动条。
hidden	溢出内容被隐藏，不可见。
scroll	溢出内容被隐藏，但会显示滚动条。
auto	当内容溢出时显示滚动条，没有溢出时不显示滚动条。

这些属性值用于控制元素在内容溢出时的行为，如是否显示滚动条以及如何处理溢出内容。

外边距问题

合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中的较大值生效

.one {
  margin-bottom: 50px;
}
.two {
  margin-top: 20px;
}

外边距塌陷

场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题

现象：导致父级一起向下移动

.son {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color: orange;
}

解决方法：

取消子级margin，父级设置padding
父级设置 overflow: hidden
父级设置 border-top

提示：设置子集 display: inline-block; 也能解决此问题；注意多个子集控件的情况。

尝试一下>>>菜鸟教程在线编辑器

行内元素-内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

span {
  /* margin 和 padding 属性，无法改变垂直位置 */
  margin: 50px;
  padding: 20px;
  /* 行高可以改变垂直位置 */
  line-height: 100px;
}

圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字+px / 百分比

提示：属性值是圆角半径盒子阴影(拓展)

多值写法

取值个数	示例	含义
1	border-radius: 10px;	设置四个角的圆角半径都为10像素
2	border-radius: 10px 20px;	设置水平方向上的圆角半径为10像素，垂直方向上的圆角半径为20像素
3	border-radius: 10px 20px 15px;	设置左上角和右下角的圆角半径为10像素，右上角和左下角的圆角半径为20像素和15像素
4	border-radius: 10px 20px 15px 25px;	分别设置左上、右上、右下、左下的圆角半径为10、20、15、25像素

技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%

img {
  width: 200px;
  height: 200px;
  
  border-radius: 100px;
  border-radius: 50%;
}

胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半

div {
  width: 200px;
  height: 80px;
  background-color: orange;
  border-radius: 40px;
}

盒子阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量模糊半径扩散半径颜色内外阴影

注意：

X 轴偏移量和 Y 轴偏移量必须书写
默认是外阴影，内阴影需要添加 inset

关注，不迷路，每天分享大量前端知识

css中的盒子模型 css处理网页时，他认为每个元素都包含在一个不可见的矩形盒子盒子是由内容区，内边距(padding)，边框，外边距(margin)组成

在浏览器中，其默认样式中存在一些body等元素存在的默认样式，比如一些外边距，内边距等,它的这些默认样式

所以在编写样式之前我们需要将默认样式取消掉，在书写代码时在style中引入下面的reset.css文件即可，下面的效果不好的话，可以百度reset.css粘贴进去。

内联元素的盒模型，设置width和height无效，水平方向的内边距可以用，内联元素可以设置垂直方向的外边距，不会影响页面的布局，即不影响其他元素的位置，仅仅是其显示效果发生变化可以使用边框，外边距，两个内联元素的相邻外边距会相加，垂直外边距不支持！

css中的display，通过display可修改元素类型，比如块元素转化为内联元素，内联元素转化为块元素，还可以设置为内联块元素，拥有他们的共性，可以设置宽高，但又

不独占一行，比如img标签。display：none 元素不显示，也不在页面占有位置。

visiblity visiblity：none 元素不显示，但在页面占有位置。

css盒子模型中的overflow 如果子元素大小超过父元素的大小，超出父元素的内容

会在超过父元素的区域显示，父元素默认是将溢出的内容，在父元素外边显示，通过overflow可以处理溢出的内容。比如overflow：scroll/auto，添加滚动条，来查看所有内容。

文档流文档指的是HTML的页面，每个页面都是一个文档，文档流就是处在网页中的底层表示一个页面的位置，我们创建的元素默认处在文档流中

元素在文档流中的特点。

1.块元素在文档流中会默认独占一行，默认自上往下排列，默认宽度是父元素的100%

块元素的高度默认被内容撑开。

2.内联元素在文档流中只占自身的大小，默认从左向右排列，如果一行内容纳不了所有元素则会另起一行，接着自左向右。

在内联元素，宽度和高度默认被内容撑开。

浮动（float）

块元素在文档流中默认垂直排列，如果希望块元素水平排列，可以使其脱离文档流。

百度reset.css即可搜到去除浏览器默认样式的css文件

在线咨询

上一篇：亚马逊卖家如何有效的进行站外推广？
下一篇：APP开发编程与ipa签名小白怎么入门

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商