第一关:块级元素
1、什么是块级元素?
“块级元素”和“display为block的元素”并不是一个概念。例如:<li>元素默认的display值是list-item,<table>元素默认的display值是table,但是他们均是“块级元素”。
“块级元素”的基本特征是一个水平流上只能单独显示的元素,多个块级元素则换行显示
2、怎么清除浮动?
配合clear属性
.clear:after {
content: '';
display: block; // 也可以是table或list-item
clear:both;
}
3、为什么list-item元素会出现项目符号(display: list-item)
因为所有“块级元素”都有一个“主块级盒子”,list-item除此外还有一个“附加盒子”,学名“标记盒子”(marker box),专门用来放圆点、数字这些项目符号.
4、display: inline-block 盒子结构?
该元素既能和图文一行显示,又能直接设置width/height.
原因:盒子结构为两个盒子,外面的盒子是inline级别,里面的盒子是block级别
同理:display: inline-table会渲染成一个可以和文字一行显示的表格
5、width/height作用在哪个盒子上?
作用在内在盒子,也就是“容器盒子”
6、外部尺寸与流体特性
(1)正常流宽度:当我们在一个容器中倒入足量的水时,水一定会均匀铺满整个容器。在页面中随便扔一个<div>元素,其尺寸表现就会和这水流一样铺满容器。
很多网站垂直导航有这样的写法:a { display: block; width: 100%}
<a>元素默认display是inline,所以需要垂直导航时可直接设置display:block使其块级化,没必要设置宽度,一旦设置宽度就会使流动性丢失。对比图如下:
代码:
HTML:
<h4>无宽度,借助流动性</h4><div class="nav">
<a href="" class="nav-a">导航1</a>
<a href="" class="nav-a">导航2</a>
<a href="" class="nav-a">导航3</a></div><h4>width:100%</h4><div class="nav">
<a href="" class="nav-a width">导航1</a>
<a href="" class="nav-a width">导航2</a>
<a href="" class="nav-a width">导航3</a></div>
CSS:
.width {
width: 100%;
}
.nav {
background-color: #cd0000;
}.nav-a {
display: block;
margin: 0 10px;
padding: 9px 10px;
border-bottom: 1px solid #b70000;
border-top: 1px solid #de3636;
color: #fff;
}.nav-a:first-child { border-top: 0; }.nav-a + .nav-a + .nav-a { border-bottom: 0;}
所谓流动性,是一种margin/border/padding和content内容区域自动分配水平空间的机制。
注:三准则:无宽度 ,无图片,无浮动。
其中,无宽度保留了容器流特性,使代码更简洁,更好维护。
(2)格式化宽度
div { position:absolute; left: 20px; right: 20px;}
假设该<div>元素最近的具有定位特性的祖先元素的宽度是1000像素,则这个<div>元素的宽度是960像素。和普通流一样,“格式化宽度”具有完全的刘提醒,也就是margin、border、padding和content内容区域同样会自动分配水平(垂直)空间。