HTML学习（IV）

---

本篇的内容是关于css语法的布局模型、代码的缩写和两个值。
3.27初稿 3.31二改（两次）。

---

css布局模型：

1.布局模型->布局模板。

2.css包含3种基本的布局模型：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：流动模型（Flow）、浮动模型 (Float)、层模型（Layer）。

3.流动模型：默认的网页布局模式。在默认状态下，块状元素的宽度都为100%，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布；内联元素都会在所处的包含元素内从左到右水平分布显示，而不是像块状元素一样独占一行。【块状元素与内联元素的介绍见上篇】

4.浮动模型：可以实现让两个块状元素并排显示。
如下代码可以实现两个 div 元素一行显示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;【float:right;】
}
<div id="div1"></div>
<div id="div2"></div>

若要一左一右显示，则可以

div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

5.层模型

(1)让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。有三种形式：绝对定位(position: absolute)、相对定位(position: relative)、固定定位(position: fixed)。

(2)绝对定位：设置 position:absolute; ,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
如下，可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

(3)相对定位：设置 position:relative; ，过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下可以实现相对于以前位置向下移动50px，向右移动100px;

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1">呀呀呀</div><span>啦啦啦</span>

显示效果如下：

（黑色方框为未定位之前，红框和文字均为相对定位之后）

虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。

(4)固定定位：设置 position:fixed; ，它的相对移动的坐标是视图（屏幕内的网页窗口）本身，固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会随浏览器窗口的滚动条滚动而变化，不会受文档流动影响。
以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>

(5)相对某一元素进行定位（absolute与relative组合使用）：父辈元素使用relative，子辈元素使用absolute。
如：

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

父辈元素box1：

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

子辈元素box2：

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

---

css代码缩写：

1.盒模型代码的缩写：
（外边距(margin)、内边距(padding)和边框(border)设置，上右下左）

(1)如果top、right、bottom、left的值相同，如下面代码：

margin:10px 10px 10px 10px;

可缩写为：

margin:10px;

(2)如果top和bottom值相同、left和 right的值相同，如下面代码：

margin:10px 20px 10px 20px;

可缩写为：

margin:10px 20px;

(3)如果left和right的值相同，如下面代码：

margin:10px 20px 30px 20px;

可缩写为：

margin:10px 20px 30px;

2.颜色值的缩写：设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。如

p{color: #336699;}

可以缩写为：

p{color: #369;}

3.字体设置的缩写：

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

这么多行的代码可以缩写为一句：

body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

【在缩写时 font-size 与 line-height 中间要加入“/”斜扛。】

---

单位和值：

1.颜色值：三种设置方式。

(1)英文命令，如 p{color:red;} 。

(2)RGB，如 p{color:rgb(133,45,200);} ，每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如 p{color:rgb(20%,33%,25%);} 。

(3)十六进制，每一项的值由 0-255 变成了十六进制 00-ff。如 p{color:#00ffff;} 。

附：配色表

2.长度值

(1)像素，px。

(2)em：本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下：

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

(3)百分比：如 p{font-size:12px;line-height:130%} 设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

---

下篇会记到css样式设计的一些技巧。
这篇就到这啦~

---

2017.3.31改

在css样式设置中，最好先将样式初始化，通过 *{margin:0;padding:0;}。

1.浮动布局

可以实现块级元素横向排版；
通过设置float属性实现，有三个值：left，right，none；
当元素没有设置宽度值，而设置了浮动属性时，元素的宽度随内容的变化而变化；
当元素设置了浮动属性后，会对相邻的元素（紧邻后面的元素）有影响；

2.清除浮动

对受到浮动影响的元素设置清除浮动的属性；
方法一：设置clear属性， clear:both （或者 clear:left ，clear:right）;【对紧邻其后的元素清除浮动影响，而对父包含块产生的影响不起作用，即当父包含块缩成一条时】
方法二：设置 width:100% 和 overflow:hidden ；

3.横向两列布局

div块的高度一般不要设置；
设置两个块为 float:left; 和 float:right; 可以实现横向两列的布局。

---

2017.3.31改

绝对定位布局

1.是通过设置position实现的布局；

2.position属性拥有三种定位形式：静态定位，相对定位，绝对定位；
position可以设置四种属性值：static（静态定位），relative（相对定位），absolute（绝对定位），fixed（固定定位）；

3.绝对定位和固定定位都属于绝对定位，静态定位是默认的（标准文档流）；

4.相对定位的特点：是相对于自身原有的位置进行偏移；仍处于标准文档流中；随即拥有偏移属性和z-index属性（层堆叠，可能会覆盖其他层）；

5.绝对定位的特点：建立了以包含块为基准的定位；完全脱离了标准文档流（对其兄弟元素不造成影响）；随即拥有偏移属性和z-index属性（层堆叠）；

6.绝对定位的两种情况：未设置偏移量和设置了偏移量；

(1)未设置偏移量：无论是否存在已定位祖先元素，都保持在元素初始位置；脱离了标准文档流（宽度随内容的变化而变化）；

(2)设置了偏移量：若没有已定位的祖先元素，则以 <html> 为偏移参照基准；若有已定位的祖先元素，则以离他最近的已定位的祖先元素为偏移参照基准；

7.使用绝对定位实现横向两列布局

(1)使用absolute实现横向两列布局，常用于一列固定宽度，另一列宽度自适应的情况；

(2)对于父元素使用相对定位relative，对于自适应宽度元素使用绝对定位absolute；

(3)固定宽度列的高度>自适应宽度的列（保证其不从父元素中溢出）。