1、文本溢出
<style>.d1 {width: 400px;height: 300px;background-color: antiquewhite;/* 超出部分色设置为可见，默认方式 *//* overflow: visible; *//* 超出部分使用滚动条 *//* overflow: scroll; *//* 如果内容未超出元素则正常显示，超出元素则加上滚动条 *//* overflow: auto; *//* 超过元素的全部隐藏 *//* overflow: hidden; */}.d2 {width: 600px;background-color: aqua;/* 将文本变为一行溢出部分使用省略号代替 */overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
</style>
2、元素隐藏
<style>div {width: 100px;height: 100px;}.d1 {background-color: aqua;/* 将元素隐藏并不占位 *//* display: none; *//* 将元素隐藏占位 */visibility: hidden;}.d2 {background-color: blueviolet;}
</style>
3、属性继承
能继承的属性都是不影响布局的，比如字体属性、文本属性、文字颜色等，其他的属性，比如宽高等会影响布局的属性是不会继承的。
<style>.d1 {height: 400px;width: 400px;background-color: antiquewhite;font-size: 30px;}.d2 {height: 100px;width: 100px;background-color: aqua;}.d3 {height: 100px;width: 100px;background-color: blueviolet;}
</style>
4、默认样式
一些元素具有默认样式，比如下面的a标签。
<style>/* 清除默认样式 */a {color: black;cursor:auto;text-decoration: none;}
</style>
5、绝对居中实现
由于字体设计，字体可能并不是绝对居中的，可以通过将父元素的font-size属性设置为0来实现绝对中。
<style>div {height: 400px;width: 400px;background-color: aqua;text-align: center;line-height: 400px;font-size: 0;text-indent: 20px;}img {height: 80px;width: 100px;vertical-align: middle;}span {font-size: 20px;vertical-align: middle;}
</style>
ertical-align: middle;
}
span {font-size: 20px;vertical-align: middle;
}
