css深入浅出之宽度与高度
文档流：文档内元素的流动方向
-
内联元素从左往右
-
块级元素从上往下
block，inline，inline-block 元素的区别：
block 元素独占一行，宽度占满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。 block 元素可以包含其他 block 元素和 inline 元素，比较特别的是 <p> 只能包含 inline 元素。
inline 元素不换行，宽度由其内容决定。设置 width, height 无效。如 span em strong 等。 设置水平方向 padding(padding-left, padding-right) 和 margin(margin-left, margin-right) 有效， 垂直方向的 padding(padding-top, padding-bottom)，margin(margin-top, margin-bottom) 无效。
inline-block 元素不换行，设置 width, height, padding, margin 属性有效。 由于 inline-block 元素会产生新的 BFC，因此可以包含浮动。
div高度
div高度由其内部文档流的高度总和决定
- 仅一行 内联元素
<style>
div{
border:1px solid red;
font-size:20px;
}
</style>
<div>
1
</div>
设置字体高度为20px，使用默认字体时，div高度为28.67
设置
font-family:Arial； div高度为24.67
设置
line-height:20px；font-size:60px; div高度为22
当仅一行时，div高度由行高确定，与字体大小无关(不同字体行高不同，字体建议行高由设计师确定)
- 多行
<div>
<span>1</span><br>
<span>2</span><br>
<span>3</span>
</div>
使用默认字体：
设置
font-family:Arial;
当多行时，div高度由多行行高相加
-
inline-block
既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高，内外边距)
缝隙问题(inline-block 之间有空格、Tab、换行符等会产生缝隙)
<div class="box">
<span class="inner">welcome,welcome,welcome</span>
<span class="inner">welcome,welcome,welcome</span>
<span class="inner">welcome,welcome,welcome</span>
</div>
<style>
.box{
border:1px solid green;
text-align:center;
}
.inner{
display:inline-block;
border:1px solid red;
width:220px;
padding:10px;
margin-bottom:10px;
}
</style>
注：通过给span标签设置inline-block属性，发现既呈现 inline 特性、又呈现 block 特性
不占据整行又可设置width、height、padding、margin
消除缝隙
- 两标签并排
<div class="box">
<span class="inner">welcome,welcome,welcome</span><span class="inner">welcome,welcome,welcome</span>
<span class="inner">welcome,welcome,welcome</span>
</div>
- 使用font-size:0(父元素设置0，子元素自定义）
.box{
border:1px solid green;
text-align:center;
font-size:0;
}
.inner{
display:inline-block;
border:1px solid red;
width:220px;
padding:10px;
margin-bottom:10px;
font-size:16px;
}
- 使用float:left
<style>
.inner{
float:left;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
</style>
<div class="box clearfix">
清除浮动
未清除浮动
如果用了浮动，其父元素一般(最好)需要清除浮动。若未清除浮动，会出现浮动溢出现象
-
word-break
<style>
div{
border:1px solid red;
//word-break:break-all;
}
</style>
<div>
aa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cc
dd
</div>
先要明确一点，不加word-break的时候，就是浏览器默认的时候，如果有一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去：
在没有单词内断句的情况，单词太长会溢出了包裹它的容器
使用break-all强制断句
word-break与word-wrap区别
-
Test：实现文字两端对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
border: 1px solid red;
font-size: 20px;
}
span{
border: 1px solid green;
display: inline-block;
width: 5em;
text-align: justify;
line-height: 20px;
overflow: hidden;
height: 20px;
}
span::after{
content: '';
display: inline-block;
width: 100%;
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<span>姓名</span> <br>
<span>联系方式</span>
</div>
</body>
</html>
效果
-
文字垂直居中
少用height(会将高度写死，一旦文字变动会出现bug)
使用 line-height + padding 实现给定行高！！！！！
实现行高为130px
line-height + padding
Tips: 四行每行行高为30px， 30*4 = 120 + 5*2 = 130
height
溢出
line-height + padding
通过新增文字，对比发现，若高度固定，新增文字会溢出；使用padding会自适应，不会出现溢出现象
-
文字溢出
1. 单行文字溢出
初始状态
文字不换行
white-space:nowrap;
超出部分隐藏
overflow:hidden;
...显示
text-overflow:ellipsis;
//完整css代码
<style>
div{
border:1px solid red;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
</style>
2. 多行溢出
google
效果
//完整代码
<style>
div{
border:1px solid red;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
-webkit-line-clamp: 3可控制显示行数
超出部分若不想显示，使用overflow:hidden隐藏即可
3. margin合并
<div class="dad">
<div class="son">
text
</div>
</div>
<style>
.dad{
outline:1px solid red;
}
.son{
border:1px solid green;
padding:10px;
margin:10px;
}
</style>
设置子元素margin高度，发现margin-top、margin-bottom未生效。
因为父元素无遮挡，造成子元素外边距margin与父元素合并。
son
解决办法：
- 设置border
.dad{
outline:1px solid green;
border-top:10px solid red;
border-bottom:10px solid black;
}
通过对父元素设置上下border实现对子元素的遮挡，margin正常显示
border
- 设置padding
.dad{
outline:1px solid red;
padding:1px;
}
padding
- overflow:hidden
.dad{
outline:1px solid red;
overflow:hidden;
}
不到万不得已，尽量不用
overflow:hidden。
-
Test：实现div水平垂直居中(不定宽高）
vh/vw
vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;
<style>
body{
margin: 0;
}
.son{
border: 5px solid red;
padding:10px;
}
.dad{
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<div class=dad>
<div class=son>
block block block
</div>
</div>
-
Test：实现一比一的 div
<style>
div{
padding-top:100%;
border:1px solid red;
}
</style>
