day07

day07

盒子

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

  /*外盒尺寸计算（元素空间尺寸）*/
  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盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

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中三种定位机制：普通流，浮动，定位

html中相当重要的概念,一个网页中，标签从上而下，从左至右顺序排序的意思，这种布局称之为普通流

浮动(float)

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

什么是浮动？

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

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

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

浮动详细内幕特性

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

标准流父级

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

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

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

float 浮漏特

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

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

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

清除浮动

为什么要清除浮动

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

文字混排效果，但是现在拿来做布局，出现很多的问题。

准确的说，不是清除浮动，清除浮动后造成的影响

清除浮动本质

清除浮动的本质，解决父级元素因为自己浮动引起的内部高度为0的问题

清除浮动的方法

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

选择器{clear:属性值;}

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

闭合浮动，

额外标签法

w3c推荐的清除浮动方法

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

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

父级添加overflow属性方法

BFC（后面详细讲）

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

优点:代码简介

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

使用after伪元素清除浮动

:after 的升级版

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

缺点: ie6不支持after，

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

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

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

代码更简洁

ie6 不支持:after