CSS高级篇 - 企业开发经验、经验，盒子模型，层模型 - 0626

border是一个复合属性，它的每一条边都可以单独来进行设置，比如对于左边线的设置，可以如是来编码：border-left : 1px solid black;如此，左竖边线就会变成宽为1个像素的黑色实线；

text-align属性，可以是文本文字左对齐、居中和右对齐的方式来显示；

line-height属性，文本行高，单行文本的高度；水平与垂直方向都是居中，如何实现？line-height == height即可；

如何进行首行缩进空两格？text-indent属性，可以设置首行缩进量；

1px，一个像素只能展示一种颜色，屏幕清晰度，屏幕的分辨率，每英寸所能容纳的垂直像素点数；em单位，相对单位，1em = 1 * font-size = 16px；

text-decoration属性，其值可以为line-through, underline，overline(上划线)等；利用文本修饰属性，可以使用<span>标签来模拟<del>标签或者<a>标签；

cursor属性，当其值为pointer时，当鼠标移动至该段文字上方时，鼠标指针将会变为一个“小手”形状；还可以取值help，e-resize，或者w-resize，move等；

2.伪类选择器；示例源代码如下：

< body >

< a href= "www.baidu.com" class= "demo" >百度一下 </ a >

< a href= "www.taobao.com" class= "demo" >淘宝，淘，我喜欢 </ a >

< a href= "www.jd.com" class= "demo" >要购物，来京东 </ a >

</ body >

对应CSS代码，其中应用了伪类选择器，注意在选择元素时，冒号的使用方法，如下中的a:hover选择器；具体代码如下：

[ class = "demo" ]{

padding: 5px 35px;

height: 25px;

line-height: 1.5em;

}

a:hover{

text-decoration:none;

background-color:orange;

color:#fff;

font-size: 16px;

font-weight:bold;

font-family:arial;

border-radius: 10px;

}

1.行级元素；或者称为内联属性，inline；凡是带有inline属性的元素，都具有文字特性；

feature：内容决定元素所占位置；不可以通过CSS改变宽高；

已经学习过的行级元素：<span>标签，<strong>标签，<em>标签，<a>标签，<del>标签

2.块级元素；block；

feature：独占一行，可以通过CSS改变宽高；

已学习过的块级元素：<div>标签，<p>标签，<ul>标签，<li>标签，<ol>标签，<form>标签，<address>标签；

3.行级块元素；inline-block；

feature：内容决定大小，可以改变宽高；

<img>标签；

工程师的开发经验：1.先写CSS代码，也就是先写功能，然后再写HTML结构，好处在于，CSS样式表可以写设计，然后封装作为共用；

2.标签可以自定义；有些标签刚出生时，其自身所带的属性并不是我想要的，可以通过初始化的方式将其进行修改。利用“标签选择器”进行初始化；比如<a>标签，我们希望它一开始的时候是不带有下划线，同时颜色不是“奇丑”的蓝色时，这就有必要通过“标签选择器”对其进行初始化修改；

通配符选择器，可以初始化所有标签；

盒子模型；

针对HTML的所有元素而言，任何一个元素均是一个盒子；

盒子组成部分：盒子壁border，内边距padding，盒子内容width + height；

盒子模型分四部分，除上述提到的盒子的三大部分外，还需要加上外边距margin，即一个盒模型 == margin + border + padding + (content = width + height);

如果希望两个嵌套的盒子，里面的各自刚好位于外面盒子的正中间，那么只要使得第一个盒子的内容区域宽高和内部盒子的content宽高一样，同时给外部盒子赋值padding即可实现；而对于padding属性而言，它是一个复合属性，当给它采用四值方式进行赋值时，其赋值顺序是“上，右，下，左”；当采用三个值进行赋值时，其顺序为“上，左右相等，下”；当采用两个值进行赋值时，其顺序为“上下相等，然后左右相等”；

盒模型的计算问题；可视区的宽高计算；

层模型：模型定位问题，让特定的元素在特定的位置出现；

position属性：它的值可以为：absolute(绝对定位)，它就是一个可以被定为的元素了，需要配合两个属性，一个是left，另一个是top；或者使用right与bottom配合；他们分别所设置的边线距离浏览器的边框的距离；相对于最近的有定位的父级进行定位，如果没有最近的有定位的父级，那么就相对文档document进行定位；

body元素，其天生有一个8像素的margin距离；可以测试出来；很多浏览器对于body元素有一个默认的像素；

absolute，绝对定位，层模型，单纯的只是让其变为可定位元素，特点：脱离原来位置进行定位，具体解释为当一个元素的position属性为absolute变为绝对定位元素以后，它就脱离原来的层，跑到上一个层了，它在上一层原来的位置就真空了，导致其它的元素可以过去了；原来层面被释放了；分层以后，在同一个点位置上；每一个absolute元素都在一个新的层面上；

2.relative，相对定位；它也需要与left、top属性配合使用，或者是与right和bottom配合使用；特点：保留原来位置进行定位；“灵魂”能出窍！其仍然属于不同的层面；它与absolute定位还有一个区别，很重要：相对于原来出生的位置进行进行定位；注意，这里均是相对于左竖边线(left)，或者右竖边线(right)进行定位；

经验性的总结，到底哪里改用absolute哪里改用relative定位呢？通常，使用relative定位作为参照物，而非使用其进行定位；有了参照物后，使用absolute绝对定位进行定位；

3.广告定位，fixed定位，固定定位；在实际的使用过程中，也需要配合left与top属性，或者right与bottom属性配合；

4.容器（块级元素）文档（或可视区）居中定位，有一个惯用写法；

z-index属性；用于设置元素在层模型中是属于第几层，正常默认情况下，它的值均为零，正方向垂直屏幕向外；