元素类型
1、从CSS的显示为出发点,把所有的html标签分为:
块状元素 block
内联元素 inline
内联块元素 inline-block
不显示 none
2、block特点:
(1)在页面中以矩形区域显示
(2)能直接设置宽度和高度
(3)自上而下排列,独占一行
(4)块状元素一般作为其他内容的容器
(5)块状元素在不添加宽度的时候,宽度跟随父元素宽度
3、inline特点:
(1)在页面中以矩形区域显示
(2)不能直接添加宽度和高度
(3)在一行内从左到右排列
(4)支持盒模型的规则,但是个别属性位置不能正常显示
(padding/margin-top/bottom)
(5)内联元素的宽度是被内容撑开的
(6)内联元素在默认的情况下,如果给父元素添加text-align/line-height,会使整个内联元素的位置发生改变
4、inline-block特点:
(1)根据上下文布局来确定最终生成的元素为块或内联
5、none的特点:
在页面加载的时候是进行加载的,但是在渲染的过程中是不显示的
元素类型分类
块和内联显示的特点
1、块状元素在不添加宽度的时候,宽度跟随父元素的宽度
2、内联元素的大小是被子元素撑开的
3、内联元素在默认的情况下,如果给父元素添加text-align/line-height能使整个内联元素位置发生改变
4、如果给一个元素添加了display:none;这个元素在页面加载的时候也是会加载的,只是在页面渲染过程中是不显示的
5、DOM tree包括页面上所有的元素,RENDER tree包括了在页面上显示出来的元素
display:none在DOM tree中,但不在RENDER tree中。
6、
常见的元素类型 ★★★★★
块元素
div dl dt dd form h1-h6 hr ol p ul
fieldset colgroup col table tr td
li:display:list-item
内联元素
a b br em i img
label span strong sub sup u select
input/textarea:display:inline-block
行内块元素
特点:
1、在一行内逐个显示
2、能直接添加大小
3、如果两个元素之间有回车,浏览器之间是有间距的
元素类型的转换
display属性
检索或者设置元素所生成的元素类型
属性值:
block 转成块状元素
inline 转成内联元素
none 元素隐藏且不占据空间
inline-block
list-item
元素嵌套规则
1、尽量让块状元素作为父元素出现
2、内联元素的子元素尽量也是内联元素
3、h标签不能互相嵌套
4、p标签不能互相嵌套,p标签中尽量放内联元素
添加display:none声明的元素,在dom树和渲染树中的区别
在dom层中,display:none的元素是在dom树中存在的
在render层中,因为结合了css样式表,display:none的元素是不在渲染树中的
元素类型的应用
导航体验优化
给外围的nav添加背景,把a放在li中,将a转成block,只给a添加大小,用a撑开li,给a添加hover
上下对齐
垂直对齐virtical-align:
top:顶线对齐
middle:中线对齐
baseline:基线对齐
bottom:底线对齐
将元素上下居中:
1、确定一个参照物的中线
在要做上下居中的元素后面(不要回车),添加一个span
span{
width:0px;
height:100%;
display:inline-block;
vertical-align:middle;
}
2、要做上下居中的元素设置
{
display:inline-block;
vertical-align:middle;
}
3、让元素左右居中
给父元素添加text-align:center;
导航栏文字翻译
结构:
<li>
<a href="#">
<p>home</p>
<span>首页</span>
</a>
</li>
css编写思路:
给p和span的样式设置一样,然后给span设置display:none; 最后给a添加hover,让p隐藏让span显示。
注意:
1、给a只添加高度,使用padding撑开左右
2、给li添加宽度,如果只靠a撑开li的话,在中英文变化的时候会造成文字框宽度的变化