文档流
文档流就是文档内元素的流动方向。
内联元素从左到右流动，遇到阻碍分行继续流。
块级元素从上往下流动，每一个块独占一行。
CSS高度
设计字体时要给一个建议行高，所以除了用line-height固定行高外，很难写死字体高度
内联元素的宽高
- 宽度
内联元素的宽度是由里面的字个数决定的 - 高度
内联元素的高度是由行高(line-height)决定的，padding和margin无法改变其高度。
块级元素的宽高
- 宽度
块级元素的宽度是由里面的字个数，以及内外边距决定的。 - 高度
块级元素的高度是由里面文档流的元素高度总和决定的
小技巧
居中
- 文字垂直居中
使用padding属性可以实现垂直居中 - 文字水平居中
使用text-align:center;属性可以实现水平居中
两端对齐
- 一段话
1.使用text-align:justify;可以让一段话两端对齐，但如果只有一行，是不能对齐的
2.给元素加上::after伪类，在该伪类里使用width100%，给原话加上text-align:justify;,同时两端属性均加上display:inline-block;来两端对齐 - 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div{
font-size:20px;
}
span{
display:inline-block;
text-align:justify;
line-height:20px;
height:20px;
width:5em;
overflow:hidden;
}
span::after{
content:'';
display:inline-block;
width:100%;
text-align:justify;
}
</style>
</head>
<body>
<div>
<span>姓名</span><br><span>联系方式</span>
</div>
</body>
</html>
文字打断
因为中英文语言上的区别，默认的文字打断属性是不同的，可以通过改该属性实现英文分行
- 英文
默认属性为word-break:break-word;，通过改该属性来实现英文分行
也可以在单词中加上连字符"-"来实现英文分行 - 中文
默认属性是word-break:break-all;，即为每个字都分开来算
inline空格问题
只要是inline元素，两个元素间不相邻的话一定会有空格，可以通过脱离文档流来解决这个问题
margin合并问题
假设一个父元素包裹住一个子元素，如果父子元素都有margin属性，而父元素没有挡住子元素的东西，那么子元素的margin会和父元素的margin合并起来
使用padding或者block可以解决这个问题
文字省略效果怎么做
- 单行文本
div{
white-space:nowrap; //不换行
overflow:hidden; //超出div边界部分隐藏
text-overflow:ellipsis; //超出部分文本以省略号显示
}
- 多行文本
- 直接google关键词"
css multi line text ellipsis"然后点击第一条关键词，直接抄代码，略改一下以完成需求。 - 抄下方代码
div{
overflow:hidden; //超出div边界部分隐藏
display:-webkit-box;
-webkit-line-clamp:2; //显示两行文本
-webkit-box-orient:vertical;
}
实现一个1:1的div
- 以下代码
div{
padding-top:100%;
}
border调试大法
在调试css之前，给所有div都加上一个1px的border用来看，方便调试
网友评论