文章目录
width:auto;
帮助明白的一些概念
display:inline-block; 应脑补成两个盒子外层盒子是 display:inline;内层盒子是 display:block；他既有块级盒子的宽高，又在一个 inline的盒子里具有行内元素的属性。
display:block;也应该脑补成display:block-block;
display:table;是display:block-table;
display:inline-table;是外层inline盒子内层table盒子;
块级元素的默认宽度是auto于包含块的；
a{
display:block;
width:100%;
}
width设置成100%是没必要的，反而会让结果变得麻烦。
所谓流动性，并不是看上去的宽度100%显示的这么简单，而是种/margin/border/padding和content内容区域自动分配水平空间的机制。
https://demo.cssworld.cn/3/2-3.php
设置width:100%;出现了不必要的麻烦。
首选最小宽度
当外部容器的宽度是0时，里边的内容宽度并非也是0，在css世界中，图片和文字的权重远大于布局，因此css的设计者不会让图文在width:auto时候宽度变成0的，此时表现出来的就是“首选最小宽度”。
- 东南亚文字(如中文)最小宽度是每个汉字的宽度。
- 西方文字的最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格、段横线、问号以及其他非英文字符等。如果想让英文字符和中文一样，可以使用css中的word-break:break-all。
可以用这个特性画出一个凹凸
https://demo.cssworld.cn/3/2-6.php
盒子模型
首先明确
内在盒子模型有content box、padding box、border box和margin box；
content box有content-box;
padding box有padding-box;
border box有border-box;
唯margin box没有css关键字名称？
because margin永远是透明的，就算设置了margin的值大小也不会决定盒子的尺寸。
div{width:100px}是怎么作用在盒子上的
- 当直接作用在盒子上没有margin、padding时候，此<div>的呈现的大小就是100px。
- 当设置了padding、border后结果就不一样了。
div{
width:100px;
padding:20px;
border:20px solid;
}
变成加上了两边padding和border后的宽高了。
这是因为css的div默认 box-sizing: content-box;
如果把box-sizing设置成box-sizing: border-box;
这样盒子的宽度就是按照这个border进行设置了。
流体布局下宽度分离
在前端领域，一提到分离，作用一定是便于维护。
表现、样式和行为分离
前后端分离
宽度分离：就是宽度设置在包含元素上，padding、border设置在子元素上。
为什么要这样做呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宽度分离</title>
<style>
.box{
width: 102px;
height: 100px;
padding: 5px;
box-sizing: border-box;
background: rgba(1,222,15,0.1);
}
.father{
width: 102px;
background: #cd3000;
}
.son{
background: rgba(1,222,15,0.1);
height: 100px;
padding: 5px;
border: 1px solid;
}
</style>
</head>
<body>
<div class="box">lorem</div>
<br>
<br>
<br>
<div class="father">
<div class="son">lorem</div>
</div>
</body>
</html>
https://bb798sky.github.io/powerful-css/width-height细节/宽度分离.html
当我们业务需求给内容加padding时候width和border、padding写在一起会导致盒子被撑大，布局打乱。
新建一个包含元素包着呈现内容的子元素，这样再给内容加padding，只会缩小content的区域。
在ie10以上可以用box-sizing:border-box; 来代替宽度分离，如果想适配ie8那么还是需要用宽度分离来解决。
height:100%
div{
width:100%;/*多余的*/
height:100%;/*无效的*/
background:red;
}
要让height:100%起作用必需设置
html,body{
height:100%;
}
单独设置body100%还不行。
再就是用绝对定位的方法，不过width也需要设置
比!important权重更大！
超越比!important权重更大
我把width属性设置成内联的又加上了!important还是干不过min-width;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>100%高度</title>
<style>
html,body{
height: 100%;
}
.div1{
background: red;
height: 200px;
min-width: 200px;
}
</style>
</head>
<body>
<div class="div1" style="width:100px;!important;"></div>
</body>
</html>
超越最大，不是“后来居上”。
.container{
height: 100px;
min-width:200px;
max-width:100px;
background-color: blue;
}
后来的max-width没干过min-width，因为min-width大。
幽灵空白节点
名词解释
内联盒子包含了许多的术语和概念，换句通俗的说法，包含了很多种盒子：
绿色框内的称为匿名内联盒子<em>里的是非匿名内联盒子；
红色框内称为行框盒子；
黄色的称为包含盒子；
在HTML5文档中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白借点”，这个节点是透明的不占宽度，但确实存在有高度。
https://bb798sky.github.io/powerful-css/height/幽灵空白节点.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>幽灵空白节点</title>
<style>
div{
background-color: red;
}
span{
display: inline-block;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
如果把里边的<span>去掉，则高度没了。