css模型

一.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

内部样式和外部样式就近原则