一.css显示模式
概述:元素以什么方式显示,如div默认独占一行,span默认可以多个在一起排列,了解他们的特点与分类可以更好的布局.
元素默认显示模式与元素特性总结
本身属性 | 元素 |
---|---|
display:block | 块级元素 |
display:inline | 行级元素 |
display:inline-block | 行内块元素 |
块级元素特性总结
1.宽度默认撑满整个父元素,高度默认由内容撑开
2.独立成行,垂直布局
3.具有盒模型(可以设置 宽 高 padding margin border)
行级元素特性总结
1.宽度 , 高度 默认由内容撑开
2.水平布局,相邻的行级元素在同一行显示,一行显示不下,自动换行
3.换行和空格会被解析
4.不能设置宽高
5.只能设置左右的外边距, 不能设置上下的外间距
6.行内元素只能容纳文本或者其他行级元素
7.行级元素不能嵌套块级元素和行内块元素
行内块元素特性总结
1.可以设置宽高
2.横向显示,水平布局,相邻的行级元素会在同一行显示,直到一行排不下才会换行
3.换行和空格会被解析
4.具有盒模型特征(可以设置 宽 高 padding margin border)
元素类型转换
概述:改变一种元素模式使其拥有另一种元素模式的特性
display:inline | 转换为行内元素 |
---|---|
display:block | 转换为块级元素 |
display:inline-block | 转换为行内块元素 |
二.css显示隐藏
display:
none:隐藏元素并且该元素所占的空间也不存在
block:显示元素
visibility:
hidden:隐藏该元素但是该元素所在的空间还存在
visible:显示元素
三.垂直对齐方式vertical-align属性
vertical-align:baseline; | 默认值,基线对齐 |
---|---|
vertical-align:top | 顶端对齐 |
vertical-align:bottom | 底部对齐 |
vertical-align:middle | 中部对齐 |
应用:图片与图片垂直
图片与文字垂直
图片与文本框垂直对齐
四.图片下间隙问题
原因:父元素没有设置高度,默认由内容撑开,就会有图片三像素产生
解决办法:
1.为img标签的父元素设置font-size:0,或line-height;0
2.将img标签转成块级元素img(display:block)
3.为img标签设置垂直对齐方式(vertical-zlign:top bottom middle)
4.为img标签的父元素设置高度,高和图片的高度都一样
五.css三大特性总结
1.继承性
概念:父元素像后代元素传递属性的机制
表现:后代元素会继承父元素的属性
a标签不能继承字体颜色color em i 不能继承字体样式font-style b strong 不能继承font-weight h标签不能继承font-weight
2.优先级
概述:浏览器通过优先级来判断哪些属性值与一个元素最为相关,从而在该元素上应用这些属性值.
样式不冲突,优先级无意义
权重越大,优先级越高
基础选择器的权重
选择器 | 权重 |
---|---|
全局选择器 | 0 |
标签选择器 | 1 |
类选择器 | 10 |
ID选择器 | 100 |
复合选择器的权重是所有单一选择器的累加
权重相同的后写的会覆盖先写的
继承样式的优先级为0,子元素设置样式会覆盖继承样式
行间样式权重(1000),优于id选择器
!imporant优于行间样式
样式引入方式优先级
行间样式优于内部和外部样式,但是高不过!imporant
内部样式和外部样式就近原则