在学习css的过程中,总会遇到各式各样的超自然现象无法解释,当中有不少疑惑,决定用这篇文章来一探究竟。本文重点用常见例子的方式来探讨已知div的高度和宽度时的实际应用。
Previously,请记住一点:
写css请用border调试
写css请用border调试
写css请用border调试
1.包裹文字时的div高度
从上面是div的高度不是20px,说明跟font-size属性无关,只是由line-height决定,由字体的行高决定。
扩展知识:line-height和font-size之间的关系是由字体设计师决定的,当然我们可以自己手动设置line-height。
2.多行文字实现左右对齐的效果
这时候设置border只是便于调试。
css代码应该是这样的:
<style>
div{
border:1px solid green;
font-size:20px;
}
span{
border:1px solid red;
display:inline-block;
width:5em;
text-align:justify;
line-height:20px; /*行高和高度相同 */
overflow: hidden; /*超出范围隐藏 */
height:20px; /* 高度设置和外层div相同 */
}
span::after{
content:'';
display:inline-block;
width: 100%;
border:1px solid blue;
} /*给span补充一个和span等宽的block元素*/
</style>
3. 老生常谈的清除浮动
css结构如下:
ul{
margin:0px;
padding:0px;
list-style:none;
border:1px solid red;
}
ul>li{
float:left;
border:1px solid green;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
4. 多行文本溢出时省略
4.1. 只显示单行
效果如下:
css如下:
div{
white-space:overrap;
overflow:hidden;
text-overflow: ellipsis;
}
4.2. 显示多行
效果如下:
代码:
/*以下代码并不兼容IE8*/
div{
border:1px solid red;
display:-webkit-box;
-webkit-line-clamp:2; /*代表只显示几行*/
-webkit-box-orient:vertical;
}
5.文字垂直居中
文字需要显示垂直居中的时候,千万不要设置height的高度
文字需要显示垂直居中的时候,千万不要设置height的高度
文字需要显示垂直居中的时候,千万不要设置height的高度
不然会出现这样恶心的效果;
正确的解法应该是通过设置line-height的值,然后通过padding、margin的值自适应高度的方式设置div的高度
div{
border:1px solid red;
line-height:30px;
padding:10px;
text-align: center;
}
6. margin合并
当div里面嵌套div(块级元素)的时候,在子div设置margin的时候会有两种情况
- 父级div没有设置margin或者border的时候,子级div会出现合并父级的情况,父元素并未因此撑高(左右宽度是有撑大的)。
- 父级div设置了margin或者border的时候,父级的高度会因此被撑高,并且子级的div的margin会被框在父级的border之内。
7.总结
- 如果div里面包裹内联元素,div 的高度取决与内联元素 line-height 行高,line-height 由字体设计师决定
- 特定的font-family(字体)会有建议的line-height
- 两个行内元素之间有看不见的符号(Tab,Space,Enter )都只显示一个空格
- div的高度是由内部文档流中元素的总和决定的。其中,内联元素的排列顺序从左到右,块级元素从上到下
- 脱离文档流的意思是该元素不计入高度,分别有三种方式:position:fixed;position:absolute;float:left。
- 内联元素的宽度是会受margin、padding的影响,但是高度并不受它们的影响。
- 块级元素的宽度千万不要去改,其高度是由其包裹内的文档流的高度决定的。
- 如果块级里面包裹内联元素,则根据内联元素的line-height决定。
- 如果块级里面包裹块级元素,则跟里面的margin、padding、border都有关