浮动1. 浮动的简介在最初浮动是用来实现文字环绕图片效果的现在浮动是主流的页面布局方式之一。2. 元素浮动后的特点脱离文档流。不管浮动前是什么元素浮动后默认宽与高都是被内容撑开尽可能小而且可以设置宽高。不会独占一行可以与其他元素共用一行。不会 margin 合并也不会 margin 塌陷能够完美的设置四个方向的 margin 和 padding 。不会像行内块一样被当做文本处理没有行内块的空白问题。3. 解决浮动产生的影响元素浮动后会有哪些影响对兄弟元素的影响 后面的兄弟元素会占据浮动元素之前的位置在浮动元素的下面对前面的兄弟无影响。对父元素的影响 不能撑起父元素的高度导致父元素高度塌陷但父元素的宽度依然束缚浮动的元素。解决浮动产生的影响清除浮动解决方案方案一 给父元素指定高度。方案二 给父元素也设置浮动带来其他影响。方案三 给父元素设置 overflow:hidden 。方案四 在所有浮动元素的最后面添加一个块级元素并给该块级元素设置 clear:both 。方案五 给浮动元素的父元素设置伪元素通过伪元素清除浮动原理与方案四相同。 推荐使用.parent::after { content: ; display: block; clear:both; }布局中的一个原则设置浮动的时候兄弟元素要么全都浮动要么全都不浮动。4. 浮动相关属性定位1. 相对定位1.1 如何设置相对定位给元素设置 position:relative 即可实现相对定位。可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。1.2 相对定位的参考点在哪里相对自己原来的位置1.3 相对定位的特点不会脱离文档流元素位置的变化只是视觉效果上的变化不会对其他元素产生任何影响。定位元素的显示层级比普通元素高无论什么定位显示层级都是一样的。默认规则是----定位的元素会盖在普通元素之上。----都发生定位的两个元素后写的元素会盖在先写的元素之上。left 不能和 right 一起设置 top 和 bottom 不能一起设置。相对定位的元素也能继续浮动但不推荐这样做。相对行为的元素也能通过 margin 调整位置但不推荐这样做。注意绝大多数情况下相对定位会与绝对定位配合使用。2. 绝对定位2.1 如何设置绝对定位给元素设置 position: absolute 即可实现绝对定位。可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。2.2 绝对定位的参考点在哪里参考它的包含块。什么是包含块对于没有脱离文档流的元素包含块就是父元素对于脱离文档流的元素包含块是第一个拥有定位属性的祖先元素如果所有祖先都没定位那包含块就是整个页面。2.3 绝对定位元素的特点脱离文档流会对后面的兄弟元素、父元素有影响。left 不能和 right 一起设置 top 和 bottom 不能一起设置。绝对定位、浮动不能同时设置如果同时设置浮动失效以定位为主。绝对定位的元素也能通过 margin 调整位置但不推荐这样做。无论是什么元素行内、行内块、块级设置为绝对定位之后都变成了定位元素。何为定位元素 —— 默认宽、高都被内容所撑开且能自由设置宽高。3. 固定定位3.1 如何设置为固定定位给元素设置 position: fixed 即可实现固定定位。可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。3.2 固定定位的参考点在哪里参考它的视口什么是视口—— 对于 PC 浏览器来说视口就是我们看网页的那扇“窗户”。3.3 固定定位元素的特点脱离文档流会对后面的兄弟元素、父元素有影响。left 不能和 right 一起设置 top 和 bottom 不能一起设置。固定定位和浮动不能同时设置如果同时设置浮动失效以固定定位为主。固定定位的元素也能通过 margin 调整位置但不推荐这样做。无论是什么元素行内、行内块、块级设置为固定定位之后都变成了定位元素。4. 粘性定位4.1 如何设置为粘性定位给元素设置 position:sticky 即可实现粘性定位。可以使用 left 、 right 、 top 、 bottom 四个属性调整位置不过最常用的是 top 值。4.2 粘性定位的参考点在哪里离它最近的一个拥有“滚动机制”的祖先元素即便这个祖先不是最近的真实可滚动祖先。4.3 粘性定位元素的特点不会脱离文档流它是一种专门用于窗口滚动时的新的定位方式。最常用的值是 top 值。粘性定位和浮动可以同时设置但不推荐这样做。粘性定位的元素也能通过 margin 调整位置但不推荐这样做。—粘性定位和相对定位的特点基本一致不同的是粘性定位可以在元素到达某个位置时将其固定。5. 定位层级定位元素的显示层级比普通元素高无论什么定位显示层级都是一样的。如果位置发生重叠默认情况是后面的元素会显示在前面元素之上。可以通过 css 属性 z-index 调整元素的显示层级。z-index 的属性值是数字没有单位值越大显示层级越高。只有定位的元素设置 z-index 才有效。如果 z-index 值大的元素依然没有覆盖掉 z-index 值小的元素那么请检查其包含块的层级。6. 定位的特殊应用注意发生固定定位、绝对定位后元素都变成了定位元素默认宽高被内容撑开且依然可以设置宽高。发生相对定位后元素依然是之前的显示模式。以下所说的特殊应用只针对 绝对定位 和 固定定位 的元素不包括相对定位的元素。让定位元素的宽充满包含块块宽想与包含块一致可以给定位元素同时设置 left 和 right 为 0 。高度想与包含块一致 top 和 bottom 设置为 0 。让定位元素在包含块中居中方案一left:0; right:0; top:0; bottom:0; margin:auto;方案二left: 50%; top: 50%; margin-left: 负的宽度一半; margin-top: 负的高度一半;注意该定位的元素必须设置宽高布局1. 版心在 PC 端网页中一般都会有一个固定宽度且水平居中的盒子来显示网页的主要内容这是网页的版心。版心的宽度一般是 960 ~ 1200 像素之间。版心可以是一个也可以是多个。2. 常用布局名词3. 重置默认样式很多元素都有默认样式比如p 元素有默认的上下 margin 。h1~h6 标题也有上下 margin 且字体加粗。body 元素有默认的 8px 外边距。超链接有默认的文字颜色和下划线。ul 元素有默认的左 pading 。…—在早期元素默认样式能够让我们快速的绘制网页但如今网页的设计越来越复杂内容越来越多而且很精细这些默认样式会给我们绘制页面带来麻烦而且这些默认样式在不同的浏览器上呈现出来的效果也不一样所以我们需要重置这些默认样式。方案一使用全局选择器此种方法在简单案例中可以用一下但实际开发中不会使用因为 * 选择的是所有元素而并不是所有的元素都有默认样式而且我们重置时有时候是需要做特定处理的比如想让 a 元素的文字是灰色其他元素文字是蓝色。* { margin: 0; padding: 0; ...... }方案二reset.css选择到具有默认样式的元素清空其默认的样式。—经过 reset 后的网页好似“一张白纸”开发人员可根据设计稿精细的去添加具体的样式。方案三Normalize.cssNormalize.css 是一种最新方案它在清除默认样式的基础上保留了一些有价值的默认样式。官网地址 http://necolas.github.io/normalize.css/相对于 reset.css Normalize.css 有如下优点保护了有价值的默认样式而不是完全去掉它们。为大部分HTML元素提供一般化的样式。新增对 HTML5 元素的设置。对并集选择器的使用比较谨慎有效避免调试工具杂乱。备注 Normalize.css 的重置和 reset.css 相比更加的温和开发时可根据实际情况进行选择。