11高级网站构建：div和span

用<div>元素把属于一个逻辑部分的元素包围起来。可以用id属性为<div>提供一个唯一的标签。

<div>的作用：1.更深一步展示页面的基本逻辑结构（相当于一个逻辑容器）。2.用结构把样式应用到某一部分（相当于一个图形容器）。嵌套结构也是很常见的，可以在结构上添加结构（即<div>可以嵌套使用）。

width属性可以用来定义内容区的宽度。不能定义整个元素的宽度，只能定义内容区、补白、边框和边界的宽度，把这些全加起来就是整个元素的宽度。块元素的默认宽度是"auto",就是说会延伸到所有的空间。

text-align属性会影响一个元素中所有内联内容的对齐样式，text-align属性只能用于块元素，如果直接用于内联元素（如<img>）就没有作用了。元素中的块元素可以继承text-align属性。比如在书中的例子中，不是<div>直接影响标题和段落（这些都是块元素）中的文本对齐样式，而是标题和段落继承了text-align属性值“center”，使它们自己的内容居中了。

子孙选择符可以用来选择特定元素的子孙元素。XX（父元素）空一格 XX（子孙元素） ，如:div h2{color:  black;}表示选择<div>的子孙<h2>

只用一个数字代替相对值（比如em或%）来设置line-height，可以使得每个元素的行间距都基于自己的font-size。line-height: 1;

CSS的一些属性可以缩写。padding: 0px 20px 30px 10px;(上 右 下 左),margin也一样。border-width、border-style，border-color可以写在一起，比如：border: thin solid #007e7e;（顺序不限）。background-color、background-image、background-repeat可以写在一起，比如：background: white url(images/cocktail.gif) repeat-x;（顺序不限）。字体的属性可以缩写在一起font: font-style font-variant font-weight font-size/line-height font-family;（前3可选，并且位置随意）

<span>元素跟<div>工作方式一样，用来把内联内容分成不同的逻辑部分，而<div>则是把块级的内容分成不同的逻辑部分。

<a>元素跟别的元素不一样，它的样式随它的状态而改变。可以用伪类单独给每个状态设计样式。伪类和<a>元素一起最常用的是：:link,用于未被访问的链接,:visited,用于已经访问的链接,:hover,用于停留状态。

叠层就是浏览器决定采用哪种样式的方法。

转载于:https://www.cnblogs.com/dingzibetter/p/6117943.html