CSS基础教程6——元素显示模式与CSS特性
CSS基础教程6——元素显示模式与CSS特性
块级元素
元素独占一行，宽度默认是父元素的宽度，可以设置宽高，<div>、<h>、<p>、<ul>、<li>等等。
行级元素
元素一行可以显示多个，宽度和高度默认由内容撑开，不可以设置宽高，<a>、<span>、<b>、<i>、<u>、<s>等等>
行内块元素
元素一行可以显示多个，可以设置宽高，<input>、<textarea>、<button>、<select>、<img>等等。
元素显示模式转换
display：值 ；取值可以有block(转换成块级元素)，inline-block(行内块元素)，inline(行内元素)元素显示模式转换有什么用？例如行级元素我们想给他设置宽高时就需要给他转为行内块级别，或者是块级元素我们想让他在同一行也需要转为行内块级别，实际转换根据需求而改变。
CSS继承性
子元素默认继承父元素样式的特点，但是有些元素不发继承某些属性，例如：<a>中color失效，<h~>中font-size会失效。
CSS层叠性
给同一个标签设置相同的样式时只会生效最后写上的样式。
CSS优先级
CSS的优先级根据：继承<通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important注意： !import不要给继承添加，自己有样式也会导致无法继承！！！！！
权重层叠计算
复合选择器（行内个数(1000)，id个数(100)，类个数(10)，标签个数(1)）从头比较个数一旦比较出结果就不用继续比下去，例如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div .one{ height: 300px; width: 200px; color: red; } div #one{ height: 300px; width: 400px; color: blue; } .two{ font-size: 18px !important; } #two{ font-size: 28px; } </style> </head> <body> <div></div> </body> </html>
在案例中div .one的权重为1+10=11，div #one的权重为1+100=101，则实际会生效的是div #one的样式，而.two的权重为10，#two的权重为100，但是由于.two中存在!important则.two的权重最高，因此实际生效的是.two的样式。
