CSS权重和display水平

CSS 权重

1
2
3
4
5

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/ 
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

元素分类

在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

• 常用的块状元素有：

1

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

• 常用的内联元素有：

1

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

• 常用的内联块状元素有：

1

<img>、<input>

内联元素 如下操作会隐性 display: inline-block

1
2
3

position : absolute
float : left 或 float:right

• ← Previous Post
• Next Post →