HTML标签和CSS属性总结

width

width:auto

  • 子元素（包括content+padding+border+margin）撑满整个父元素的content区域。

  • 子元素有margin、border、padding时，会减去子元素content区域相对应的width值

  • 父元素的content = 子元素（content + padding + border + margin )

width:100%

  • 强制将子元素的content区域 撑满 父元素的content区域

  • 子元素有margin、border、padding时，不改变子元素content区域的width，而是溢出父盒子，保持原有值

  • 父元素的content = 子元素的content

    例如：

    1
    2
    3
    4
    5
    6
    <h4>width:100%</h4>
    <div class="nav">
      <a href="" class="nav-a width">导航1</a>
      <a href="" class="nav-a width">导航2</a>
      <a href="" class="nav-a width">导航3</a>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.width {
  width: 100%;
}

.nav {
  background-color: #cd0000;
}
.nav-a {
  display: block;
  margin: 0 10px;
  padding: 9px 10px;
  border-bottom: 1px solid #b70000;
  border-top: 1px solid #de3636;
  color: #fff;
}
.nav-a:first-child { border-top: 0; }
.nav-a + .nav-a + .nav-a { border-bottom: 0;}

就会产生如下效果：

white-space

设置如何处理元素内的空白

white-space:nowrap;：文本会在同一行上继续，知道遇到<br>
white-space:pre;：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

<pre></pre>

定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。常见应用就是用来表示计算机的源代码。

:before

在被选元素的内容前面插入内容。使用 content 属性来指定要插入的内容。例：

1
2
3
4
5
6
7
8
9
10
11
12
13
HTML:

<p>我是唐老鸭。</p>

CSS:

p:before
{
content:"台词：";
background-color:yellow;
color:red;
font-weight:bold;
}

效果：
2

vertical-align

设置元素的垂直对齐方式。

值 描述
baseline 默认。元素放置在父元素的基线上。
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。 
1
2
3
4
5
6
7
8
9
10
11
12
CSS:
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}

HTML:
<p>
这是一幅<img class="top"/>位于段落中的图像。
</p> 

<p>
这是一幅<img class="bottom"/>位于段落中的图像。
</p>

3

<label></label>

<label> 标签为 input 元素定义标注。label 元素不会向用户呈现任何特殊效果。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label>标签的 for 属性应当与相关元素的 id 属性相同。

例：

1
2
3
<input id="check" type="checkbox">
<label for="check" class="check-in">更多↓</label>
<label for="check" class="check-out">收起↑</label>


当点击更多↓或者收起↑时，选择框的状态就会改变（是否被选中）。

关系选择器

  • 后代选择器：选择所有合乎规则的后代元素。空格连接。

  • 相邻后代选择器：仅仅选择合乎规则的儿子元素，孙子、重孙元素忽略。>连接。

  • 兄弟选择器：选择当前元素后面的所有合乎规则的兄弟元素。~连接。例：:checked ~ .element选择被选中的标签后面所有class=”element”的元素。

  • 相邻兄弟选择器：仅仅选择当前元素相邻的那个合乎规则的兄弟选择器。+连接。