浮动

找出下面优先级相同的选择器

A. img.thumb:after 0012 　B.[data-job=“frontend”]::first-letter 0011

C. #main::before 0101　　 D. [type=“checkbox”]:checked 0020 　E. ul#shop-list 0101

伪元素，元素 0001

伪类，类 0010

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.宽高值用于块级元素，对行内无效

2.计算盒子模型总高度，还应考虑外边距塌陷问题

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

盒子模型布局稳定性

什么用外边距，什么时候用内边距。

他们可以混用，那个方便用哪个

按照稳定性来分：

width>padding>margin

1. margin由外边距合并的问题，还有ie6margin 加倍，所以最后使用
2. padding 会影响盒子大小，需要计算盒子大小，其次使用
3. widtn稳定性最高，宽度剩余法，高度剩余法

CSS3盒模型

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

1.content-box: Element Width = content width + padding + border （Width为内容宽度）

2.border-box: Element Width = content width（Width为内容宽度）

​ padding和border包含进width

content-box：优先保证内部内容所占区域不变，盒子的大小发生改变

border-box：优先保证自己盒子所占的大小不变，对内容进行压缩、

盒子阴影 类似文字阴影

语法格式：

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

1.前两个属性必须写，后面的可以省略

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

浮动(float)

普通流(normal flow)

文档流，标准流，普通流

前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？

css的三种定位机制: 文档流，浮动，定位

html,相当重要的概念，在网页中，标签从上至下，从左至右，。比方块级元素，行内元素的默认排序我们称之为普通流。这种布局方式称之为普通流布局

浮动(float)

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

后来，发现浮动可以让任何盒子同一行显示，渐渐偏离主题，只有就一直用浮动进行布局

什么是浮动？

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

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

选择器{float:属性值;}

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

浮动详细内幕特性

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

1.标准流父元素

2.浮动不会压住padding

3.当加了浮动之后，具有行内块的特征

4.浮动的元素总是找到最近的父级元素对齐，不会超出内边距

5.上一个元素是浮动，则顶部对齐，是标准流，则底部对齐

总结

​ 浮动 ：目的让多个块级元素同一行上显示

​ float 浮漏特

​ 浮：加了浮动的元素会浮起来，漂浮在其他标准流的盒子上面

​ 漏：加了浮动的元素，他原来的位置漏给了标准流的盒子

​ 特：特别需要注意的是，标准流父元素一起使用，其次，特别需要注意的是，浮动元素变成行内块元素

版心和布局流程

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

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

一列固定宽度且居中

最普通的，最为常用的结构

两列左窄右宽型

通栏平均分布型

清除浮动

人生苦短，有始有终。

好比我们的浮动，有浮动开始，则就应该有浮动结束。

为什么要清除浮动

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

本来做一些文字混排效果，但是现在用于做布局，所以会出现很多问题。

准确的说，不是清除浮动，而是清除浮动后造成的印象

清除浮动本质

主要是为了解决父级元素因为子级浮动引起内部高度为0的问题

清除浮动的方法

闭合浮动，记住，清除浮动就是把浮动的盒子圈在里面，让父盒子闭合出入口，不让他们影响其他元素

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

选择器{clear:属性值;}

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

额外标签法

w3c推荐的做法，在浮动元素的末尾添加新标签（清除浮动的样式）

优点:通俗移动，书写方便

缺点：添加了很多无意义的标签，结构化较差。 推荐的方法不接受

父级添加overflow属性方法

触发BFC的方式，可以实现清除浮动的效果。

优点：代码简介

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

使用after伪元素清除浮动

：after是空元素的升级版

优点:符合闭合浮动，结构语义化正确

缺点:ie6,7不支持:after,所以使用zoom清除浮动

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

清除浮动：加上clear:both,使元素下移，直到两边没有浮动元素

闭合浮动：使浮动元素闭合，使父元素高度不在塌陷，这样减少了浮动带来的影响

优点：代码更加简介

缺点:ie6,7不支持:after,所以使用zoom清除浮动