前端学习笔记2-2 CSS

元素的分类、盒模型与复合属性

在css中，html的标签元素大体上分为三类：块状元素、内联元素、内联块状元素。盒模型的组成主要由：外填充、边框、内填充、内容。介绍常见的复合属性。

1. 元素分类

1-1 块状元素

常见块状元素：<div>、<p>、<h1>→<h6>、<ol>、<ul>、<dl>、<li>、<table>、<address>、<blockquote>、<form> 

块状元素特点：
1. 每个块状元素都从新的一行开始，其后的元素也另起一行
2. 元素的高、宽、行高及顶/底边距可设置
3. 不设置宽的时候，宽度默认是父元素宽度的100%(和父元素一样宽)

<!-- 块元素 --><div id="box1" style="width:200px;height:200px;border:1px solid red;">    <div id="d1" style="width:50px;background:green;"></div>    <div id="d2" style="height:50px;background:pink;"></div>    <div id="d3" style="width:50px;height:50px;background:blue;"></div>    <div id="d4" style="width:50px;height:50px;background:yellow;"></div></div>

上述代码显示的样式：

d1:没设高度，默认高度为0；所以没显示。有内容时高度随内容高度变化。
d2:没设置宽度，默认和父元素一样宽；
d3:有宽高，显示和设置宽高一样。
d4:有宽高，但是没和d3在一行显示，而是重新起了一行。因为块元素自己占一行。

1-2 内联元素

常见内联元素：<a>、<span>、<br/>、<i>、<em>、<strong>、<label>、<q>、<code>

内联元素特点：
1. 和其他元素在一行显示，一行放不下时会换行(内联元素与内联元素之间有间隔，其实是标签之间的空格或换行符被解析)
2. 元素的高、宽、行高及顶/底边距不可设置
3. 元素的宽高由里面内容撑开，不可改变

<!-- 内联元素 --><div id="box2" style="width:200px;height:200px;border:1px solid red;margin-top: 30px;">    <span id="span1" style="width:50px;background:green;">1</span><span id="span2" style="height:50px;background:pink;">span2</span>    <span id="span3" style="width:50px;height:50px;background:blue;">我的span3</span>    <span id="span4" style="width:50px;height:50px;background:yellow;"></span></div>

上述代码显示的样式：

span1:设置宽度，但不起作用。
span2:设置了高度，但不起作用。但是span2和span1紧挨着写的，所以两个之间没有空白。因为他们之间没有换行或空格，没法解析为空白。
span3:设置了宽高，但不起作用。但是span3和span2之间有空白，因为两个标签是换行写的，换行被解析为了空白。
span4:设置了宽高，但不起作用。内联元素的宽高由内容撑开，span4没有内容，导致这个内联元素宽高为0，所以没显示。

1-3 内联块状元素

内联块状元素：<img>、<input>

内联块状元素特点：
1. 和其他元素在同一行显示
2. 元素的高、宽、行高及顶/底边距可设置
3. 换行会被解析

<!-- 内联块状元素 --><div id="box3" style="width:200px;height:200px;border:1px solid red;margin-top: 30px;">    <input id="ipt1" type="text" value="ipt1" style="width:50px;" /><input id="ipt2" type="text" value="input2" style="height:50px;" />    <input id="ipt3" type="text" value="input框3" style="width:50px;height:50px;" />    <input id="ipt4" type="text" value="" style="width:50px;height:50px;" /></div>

上述代码样式为：

ipt1:设置宽度，起作用。
ipt2:设置了高度，起作用。没设宽度，有个默认宽度。但是ipt2和ipt1紧挨着写的，所以两个之间没有空白。因为他们之间没有换行或空格，没法解析为空白。
ipt3:设置了宽高，都起作用。由于ipt1和ipt2剩余空间不足放下ipt3，所以ipt3自动换行了。
ipt4:设置了宽高，都起作用。但是ipt4和ipt3之间有空白，因为两个标签是换行写的，换行被解析为了空白。
注：IE6，7不支持块属性标签的inline-block

2. 盒模型

如果把元素这个看做一个盒子，那么这个盒子整体是有margin、border、padding、width/height组成。

<div id="mybox" style="margin:1px;border:2px solid red;padding:3px;width:4px;height:4px;"></div>

对应的盒模型(此视图检查元素可以看到)如下：

1. 整个元素的实际宽其实是margin+border+padding+width：1+2+3+4+3+2+1 = 16px;高度算法类似。
2. css中定义的宽高其实是指内容的宽高。即图中的4px。

2-1 margin(外边距)

margin的几种写法：1. margin: 5px; 上下左右外边距都是5px;2. margin: 3px 5px; 上下外边距为3px；左右为5px；3. margin: 3px 4px 5px; 上外边距为3px；下边距为5px；左右为4px；4. margin: 1px 2px 3px 4px; 上1px; 右2px；下3px；左4px；(顺序：上右下左) 以上写法都属于复合样式写法。其实margin拆开写包括：margin-top:1px; margin:-right:2px；margin-bottom:3px; margin-left:4px;

2-2 border(边框)

border的写法：border: 1px solid red; 边框大小1px 实线 红色；border也可拆开写：border-width: 1px; 边框大小。border-style: solid; 边框样式。还有dashed(虚线)、dotted(点线)。border-color:red; 边框颜色还可以：border-color: red #ccc transparent inherit; 方向依然上右下左，transparent是默认值：透明色；inherit是指从父辈继承边框颜色。border也想分上下左右：border-top: 1px solid #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;

2-3 padding(内填充)

padding的使用方法和margin基本一样。可以参照上面margin用法。

3. 复合属性

上面介绍的几个属性都能由几个属性和写在一起，这种可以简写的属性一般属于复合属性。
常见的几个复合属性有：background；border；padding；margin；font。css3里面也新增了一些复合属性。

background: #ff00ff url(”) no-repeat 5px 10px;
1. background-color: #ff00ff;
2. background-image: url(”);
3. background-repeat: no-repeat;(默认为repeat，xy轴都重复；repeat-x: x轴方向重复;repeat-y: y轴方向重复)。
4. background-position: 5px 10px; (类似于top:5px;和left:10px;的值)

font: italic small-caps bold 12px/1.5em “宋体”,sans-serif;
font的缩写至少要指定font-size和font-family属性。并且font-size和line-height中间要加‘/’。
1. font-style: italic;
2. font-variant: small-caps;
3. font-weight: bold;
4. font-size: 12px;
5. line-height: 1.5em;
6. font-family: “宋体”,sans-serif;