元素的水平方向布局：

元素在其父元素中水平方向的位置由以下几个属性共同决定

margin-left 左外边距

border-left 左边框宽度

padding-left 左内边距

width 内容区宽度

padding-right 右内边距

border-right 右边框

margin-right 右外边距

必须要满足的等式

一个元素在其父元素中，水平方向必须要满足以下的等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度（必须满足）

以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整

调整的情况：

如果这七个值中没有为auto的情况，则浏览器自动调整margin-right值以使等式满足

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{height: 200px;width: 800px;border: 10px red solid;}.inner{width: 200px;height: 200px;background-color: #bfa;}/*一个元素在其父元素中，水平方向必须要满足以下的等式margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度（必须满足）0+0+0+200+0+0+0=800以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整调整的情况：如果这七个值中没有为auto的情况，则浏览器自动调整margin-right值以使等式满足0+0+0+200+0+0+600*/</style>
</head>
<body><div class="outer"><div class="inner "></div></div></body>
</html>

设置auto的情况

这七个值中有三个值可以设置为auto，
分别为
width
margin-left
margin-right
如果这个值为auto，则会自动调整为auto的那个值以使等式成立
0+0+0+auto+0+0+0=800
auto=800

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{height: 200px;width: 800px;border: 10px red solid;}.inner{width: auto;height: 200px;background-color: #bfa;}/*这七个值中有三个值可以设置为auto，分别为widthmargin-leftmargin-right如果这个值为auto，则会自动调整为auto的那个值以使等式成立0+0+0+auto+0+0+0=800auto=800*/</style>
</head>
<body><div class="outer"><div class="inner "></div></div></body>
</html>

根据等式得出的一些结论：

如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0

如果将三个值都设置为auto，则外边距都是0，宽度最大

如果将两个外边距设置为auto,宽度固定值，则会将外边距设置为相同的值

所以我们经常利用这个特点来使一个元素在其父元素中水平居中

示例：

width:xxxxpx

margin:0 auto

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{height: 200px;width: 800px;border: 10px red solid;}.inner{width: 200px;height: 200px;background-color: aqua;margin: 0 auto;}/*如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值所以我们经常利用这个特点来使一个元素在其父元素中水平居中*/</style>
</head>
<body><div class="outer"><div class="inner "></div></div></body>
</html>

什么是盒子模型中的水平方向的布局相关推荐

HTML元素 span,div,p,h,a盒子模型中padding属性的演示和理解
在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其 ...
CSS之元素的水平方向的布局
元素水平方向的布局: margin-left: border-left padding-left: width: padding-right border-right margin-right 一个元 ...
盒子模型中box-sizing: border-box；的作用
我们都知道盒子模型它都是由外边距(margin) + 边框(border) + 内边距(padding) + 内容(content)组成的. 如果我们按照下面的设置,得到的是一个300*300大 ...
弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知:  .css {white-space: nowrap;overflow: hidden;text-overf ...
Flutter基础之水平方向列表布局
在Flutter中,用ListView来显示列表项,其支持垂直和水平方向展示,通过过一个属性我们就可以控制其方向,列表有以下分类: ListView组件属性及描述属性名类型默认值说明 Scro ...
CSS盒子模型和水平、竖直方向的布局
一.块元素.行内元素和行内块元素行内元素特征: (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行块状元素 ...
【前端-CSS】盒子模型-水平方向、垂直方向的布局
框模型/ 盒模型/盒子模型水平布局元素在其父元素中的水平方向位置由margin-left.border-left.padding-left.width.padding-right.border-r ...
html盒子模型子元素怎么水平占满父元素_前端面试常考问题之css盒模型
一.题目:谈一谈你对CSS盒模型的认识专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型. ...
css中盒子模型的布局
目录一水平布局二垂直布局 css中的盒子模型布局分为两种:水平布局和垂直布局一水平布局盒子模型中水平方向影响因素有7个,分别是:margin-left border-left padd ...

什么是盒子模型中的水平方向的布局

元素的水平方向布局：

必须要满足的等式

调整的情况：

设置auto的情况

什么是盒子模型中的水平方向的布局相关推荐

最新文章

热门文章