HTML5 7-8章

第七章

1.网页布局

标准文档流
指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式

标准文档流组成
块级元素（block）

…

、

、

、列表
内联元素（inline）
、、、...

2.display属性

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

3.浮动(float)属性

值	说明
left	左浮动
right	右浮动
none	不浮动

4.清除浮动

clear属性

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

解决父级边框塌陷的方法
浮动元素后面加空div

  

  

  

  
浮动的盒子……
  


.clear{  clear: both;  margin: 0; padding: 0;}

设置父元素的高度

  

  

  

  
浮动的盒子……

#father {height: 400px; border:1px #000 solid; }

父级添加overflow属性

  

  

  

  
浮动的盒子……

#father {overflow: hidden;border:1px #000 solid; }

overflow属性

属性值	说明
visible	默认值。内容不会被修剪，会呈现在盒子之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

父级添加伪类after

  

  

  

  
浮动的盒子……

.clear:after{
    content: '';          /*在clear类后面添加内容为空*/
    display: block;      /*把添加的内容转化为块元素*/
    clear: both;         /*清除这个元素两边的浮动*/
}

解决父级边框塌陷的方法的优缺点
浮动元素后面加空div
简单，空div会造成HTML代码冗余

设置父元素的高度
简单，元素固定高会降低扩展性

父级添加overflow属性
简单，下拉列表框的场景不能用

父级添加伪类after
写法比上面稍微复杂一点，但是没有副作用，推荐使用

5.inline-block和float的区别

display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE 6、IE 7上不支持

float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

第八章

1.定位属性

position属性
static：默认值，没有定位
没有定位，以标准流方式显示

relative：相对定位
相对自身原来位置进行偏移 偏移设置：top、left、right、bottom

设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
设置相对定位的盒子原来的位置会被保留下来

absolute：绝对定位
偏移设置： left、right、top、bottom
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
元素位置发生偏移后，它原来的位置不会被保留下来

fixed：固定定位
偏移设置： left、right、top、bottom
类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

2.z-index属性设置定位元素的堆叠顺序

调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方

3.opacity:x或filter:alpha(opacity=x)方式设定网页元素的透明度

属性	说明	举例
opacity:x	x值为0~1，值越小越透明	opacity:0.4;
filter:alpha(opacity=x)	x值为0~100，值越小越透明	filter:alpha(opacity=40);