day7

day7

content宽度和高度

高度的计算原则是

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素实际大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

1.width，height仅使用块级元素

2.计算盒子总高度时，还应考虑上下两个盒子的外边距合并情况

3.如果一个盒子没有给定宽度和高度时，padding不会影响盒子大小

盒子模型布局稳定性

width > padding > margin

1.margin外边距合并问题，ie6 margin加倍的bug，所以最后使用

2.padding会影响内盒的大小，经常使用加减法

3.width 宽度剩余法，高度剩余法

CSS3盒模型

1.content-box ：盒子模型 width + padding + boder

2.border-box：/盒子模型即为宽度 padding 和boder 都包含再width/

1.默认设置，优先保证内部的内容所占区域不变
2.boder-box  优先保证自己盒子的所占区域不变，对内容进行压缩

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

1.前两个属性一定要有，其他的可以省略

2.外阴影(outset默认值，内阴影inset

浮动(float)

普通流(normal flow)

css中三种定位机制：普通流，浮动，定位

标签从上而下，从左至右顺序排序的意思，这种布局称之为普通流

浮动(float)

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

浮动详细内幕特性

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

标准流父级

1.子盒子浮动不会压住padding

2.浮动的元素会找最近的父级元素对齐，不会超出内边距的范围

浮动的目的是，让多个块级元素同一行显示

float 浮漏特

浮：浮起来，漂浮在其他标准流盒子上面

漏： 加了浮动，不占位置，原来的位置就漏给了标准流的盒子

特：特别注意，首先浮动的盒子和标准流父级搭配使用，特别注意，浮动会使元素变成行内块元素

版心和布局流程

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

清除浮动

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

闭合浮动，

额外标签法

w3c推荐的清除浮动方法

优点:通俗易懂，书写方便

缺点：添加了许多无意义的标签，结构化更差。

父级添加overflow属性方法

可以给父级添加overflow：hidden auto scroll

优点:代码简介

缺点：内容增多的时候，不会自动换行，无法显示溢出元素

使用after伪元素清除浮动

:after 的升级版

优点：符合闭合浮动的思想，结构语义化正确

缺点: ie6不支持after，

使用before和after双伪元素清除浮动

清除浮动：clear:both 块级元素下移，直到两边没有浮动元素

闭合浮动：使浮动元素闭合，使父元素能够包含浮动元素，从而减少浮动影响

代码更简洁

ie6 不支持:after