1.基本概念
(1)正常流：是指西方语言文本从左向右，从上向下显示。如果要让一个元素不在正常流中国，唯一的办法
就是使之成为浮动或定位元素。
(2)非替换元素：如果元素的内容包含在文档中，则称之为非替换元素。
(3)替换元素：指用作为其他内容占位符的一个元素。例子：img中的图像
(4)块级元素：在正常流中，会在其框之前和之后生成“换行”
所以出于正常流中的块级元素会垂直摆放。
(5)行内元素：不会再之前或之后生成行分隔符，它们是块级元素的后台。
(6)根元素：位于文档树顶端的元素。在HTML中，就是元素HTML。
2.水平格式化
- 通常指的是元素的内容宽度。
image.png
- 水平格式化的七大属性：margin-left,border-left,padding-left,width,padding-right,border-right,margin-left
这七个水平属性的总和要等于父元素的width。
这里面只有width,margin-left,margin-right这三个可以设置为：auto
其他都必须设为特定的值或者默认宽度为0.
3.水平格式化的几种情况
- margin-left:auto (auto值会计算具体值）
//.html文件
<div class="div1">
<p class="p1">This is a paragraph.</p>
</div>
//.css文件
div,p{
border:1px solid black;
}
.p1{
margin-left:auto;
width:400px;
margin-right:100px;
}
image.png
- margin-left,width,margin-right都为具体值，此时总会把margin-right设为auto（因为正常流是从左到右的方式）
//.html文件
<div class="div2">
<p class="p2">This is a paragraph.</p>
</div>
//.css文件
div,p{
border:1px solid black;
}
.p2{
margin-left:100px;
width:400px;
margin-right:100px;
}
image.png
- margin-left,width,margin-right都为具体值，改变正常流的方向，此时总会把margin-left设为auto。
//.html文件
<div class="div3">
<p class="p3">This is a paragraph.</p>
</div>
//.css文件
div,p{
border:1px solid black;
}
.div3,.p3{
direction:rtl;//从右往左读
}
.p3{
margin-left:100px;
width:400px;
margin-right:100px;
}
image.png
- width:auto(auto值会计算具体值)
//.html文件
<div class="div4">
<p class="p5">This is a paragraph.</p>
</div>
//.css文件
div,p{
border:1px solid black;
}
.p4{
margin-left:100px;
width:auto;
margin-right:100px;
}
image.png
- margin-left,margin-right为auto值（auto值会计算具体值，子元素会居中）
//.html文件
<div class="div5">
<p class="p5">This is a paragraph.</p>
</div>
//.css文件
div,p{
border:1px solid black;
}
.p5{
margin-left:auto;
width:400px;
margin-right:auto;
}
image.png
- width为具体值，设置text-aligin:center(没有效果，只针对块级中的内联内容居中）
//.html文件
<div class="div6">
<p class="p6">This is a paragraph.</p>
</div>
//.css文件
div,p{
border:1px solid black;
}
..p6{
text-align:center;//没有效果，只针对块级中的内联内容居中
width:400px;
}
image.png
- width和margin-right或margin-left为auto(width中auto值会计算具体值，margin-right或margin-left的auto值会减为0）
//.html文件
<div class="div7">
<p class="p7">This is a paragraph.</p>
</div>
//.css文件
div,p{
border:1px solid black;
}
.p7{
margin-left:100px;
width:auto;
margin-right:auto;
}
image.png
- width,margin-left,margin-right都为auto,marin的auto减为0，width会尽可能宽。
//.html文件
<div class="div8">
<p class="p8">This is a paragraph.</p>
</div>
//.css文件
··
div,p{
border:1px solid black;
}
.p8{
margin-left:auto;
width:auto;
margin-right:auto;
}
image.png
- width为auto值，存在负外边距（用七个属性之和等于父元素的宽度，求出width值）
//.html文件
<div class="div9">
<p class="p9">This is a paragraph.</p>
</div>
//.css文件
··
div,p{
border:1px solid black;
}
.div9{
width:400px;
}
.p9{
margin-left:10px;
width:auto;
margin-right:-50px;
}
image.png
- margin-right为auto值，但是width的值大于父元素的宽度（用七个属性之和等于父元素的宽度，求出width值）
//.html文件
<div class="div10">
<p class="p10">This is a paragraph.</p>
</div>
//.css文件
··
div,p{
border:1px solid black;
}
.div10{
width:400px;
}
.p10{
margin-left:10px;
width:500px;
margin-right:auto;
}
image.png
- margin-right为auto值，存在百分数，auto值为0，
//.html文件
<div class="div11">
<p class="p11">This is a paragraph.</p>
</div>
//.css文件
··
div,p{
border:1px solid black;
}
.div11{
width:400px;
}
.p11{
margin-left:5%;
padding-left:5%;
width:67%;
padding-right:5%;
margin-right:auto;
}
image.png
- 当外部div的width有三种情况时，内部div如何变化的
//.html文件
<div class="div12">
<p class="p12">This is a paragraph.</p>
</div>
//.css文件
··
div,p{
border:1px solid black;
}
.div12{
width:27.4em;//三种情况，大于，小于，等于
}
.p12{
margin-left:5em;
padding-left:2em;
width:67%;
padding-right:2em;
margin-right:auto;
}
image.png
- margin的值为auto,图片为disblcok的情况
//.html文件
<div class="div13">
<p class="p13">This is a paragraph.</p>
</div>
//.css文件
··
div,p{
border:1px solid black;
}
.div13{
width:400px;
height:400px;
}
/* img{
margin:0;
width:auto;
} */
img{
display:block;
margin:auto;
width:200px;
}
image.png
