前端学习历程--css①

---恢复内容开始---

本文用自己的理解，总结网上或者自身经历的问题，加以汇总，方便查找：

一、浏览器默认样式

1、浏览器处理css&html

a、css作用范围：盒子模式、浮动、定位、背景、字体

2、css布局方式：

1. 经典三列布局
2. Bootstrap栅格布局
3. 百度首页布局
4. 微博布局
5. 人人网布局
6. 瀑布流布局

3、层叠样式表：

a、层叠：层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。即对相同标签的样式融合，且内联>内部>外部(!important可将样式提到最高级)，但实际有5个--

最底层是浏览器默认样式，然后是用户样式--字体等设置

4、浏览器默认样式分析：

a、display:table 和 block 最大的区别在于：包裹性。 提到包裹性，就不得不提一下float和absolute

b、table-cell是多列布局的最新解决方案，比使用float更加有效（不兼容IE6、7）

c、line-height:1.12 针对英文没问题，但是中文看起来很别扭

另外，1.12是一个相对值（即1.12em），与文字有关的距离设置最好用相对值，这样做的好处就是当自定义了1em的绝对px时，line-height也会跟着变

d、inline-block：

e、<br/>为何能实现换行：:before, :after { white-space: pre-line }

5、浏览器对html的处理:浏览器将载入的html变为dom树，但是此时没有任何显示样式。所以显示的样式，都是css定义的，浏览器只会通过css来渲染视图样式。

6、block元素：默认为block的元素，是默认样式规定的，不是浏览器的内核规定的

7、display：list-item：ul，li标签使用此样式

8、display：table： <table>和<div>在容器尺寸上最大区别是什么？答案是——div宽度和父容器相同，table宽度根据内容而定——即table具有“包裹性”。

　　　　　　           盒子的宽度将在内容宽度的基础上再增加（padding宽度 + border宽度 + margin宽度）之和

9、display：table-cell：多列布局：

10、body样式：由于*的优先级最低，所以先用*{margin:0}来规范，在统一设置body的margin。

　　　　　　　　Line-height是具有继承性的，在body中设置了，body下面所有的文字都会继承生效，最好使用相对值。

11、em & px：em是相对的，浏览器默认情况下令1em === 16px，由于font-size和margin都是通过em来定义的，当em被修改时，不管字体大小修改，

　　　　　　　　margin值也会跟着修改。这就是em好用之处！从现在开始，与字体大小有关的css，全部都用em。

12、inline-block：能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一行。与table相比既有包裹性 又不会占一行

13、<br>样式：换行是white-space: pre-line效果。

二、选择器

1、选择器分类：标签选择器、属性选择器。

2、多标签选择器：

　　选择一个祖先的所有子孙节点，例如 div p{…}包括div的2级三级。。。

　　选择一个父元素的所有直属节点，例如 div > p{…}仅一级

　　某一个元素紧挨着的兄弟节点，例如 li + li{…}

　　某一个元素的所有同胞节点，例如 span ~ a{…}

3、属性选择器：除id、class两种特殊外，还可通过属性名选择：img[title]{…      }，属性名和属性值选择：input[type=’text’]{…}

4、伪类:伪类分为UI伪类和结构化伪类。

　　UI伪类:

　　结构化伪类:

5、伪元素：

　　afert&before可以为标签添加前后内容

6、选择器的优先级:“I-C-E”计算公式==>Id\Class\Element,遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往　      特指度数值中加1,越大优先级越高。如

div p#large ul.list li

114

!important优先级最高，高于上面一切。* 选择器最低，低于一切。不同选择器的特指度比较时，不区分加载的顺序（相同选择器在层叠时，后加载的覆盖前加载的）

但：直接设置的样式要高于继承的样式，不管优先级多大

得出red

三、盒模型：

1、css的展现分为文字和块，

　　文字：例如设置字号、字体、颜色、背景色、是否加粗等

　　块：盒子模型，float，position，display

2、盒子：

　　margin，padding和border(content)

3、盒子的宽：

　　在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：（内容宽度 + border宽度 + padding宽度 + margin宽度），这样       我们改四个中的其中一个，都会导致盒子宽度的改变。这对我们来说不友好。

　　解决方法：添加box-sizing:border-box，宽度变为宽度是内容 + border + 边框的宽度（不包括margin）

　　　　　　　　

4、margin的纵向重叠：

　　纵向的margin是会重叠的，大的会把小的“吃掉”，且margin与border内无关，意义在于布局

5、常用的三角形：

　　transpanent设置透明，顺序为上右下左

四、浮动

1、float多列布局：实际应用table，但table代码量大不利于SEO，才采用float，而float原本意义为文字环绕--图片float:left之后，文字会环绕图片。

2、float的破坏性：被设置了float的元素会脱离文档流。也正是为了文字的环绕

3、float的包裹性：float也具有包裹性，且display仍是block

4、float的清空格：

　　

　　由于float会导致节点脱离文档流结构，所以正常img之间的换行符不生效

5、清除浮动的4种方法：

为父元素添加overflow:hidden；

　　浮动父元素；

　　clear:both--

　　clearfix:原理与clear：both相同

五、float布局

1、三列布局

　　

2、两列布局

　　

3、bt的栅格布局：也是float

　　

六、display

1、块元素和流元素

2、display详细定义

1. list-item：通过它可以模拟li列表样式；
2. table：也是一个“块”，但和block相比，table具有包裹性；
3. table-cell：最新的多列布局解决方案
4. inline：就是文字和图片，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是auto　　
5. block；即盒模型
6. inline-block：以流形式排列，但单个又是块（可设置宽度等）　　

如何把inline-->block:　　　　display:block;

　　　　　　　　　　　　　　　display:table;

　　　　　　　　　　　　　　　float:left;

　　　　　　　　　　　　　　　position:absolute/fixed

　七、定位

1、position：static：即不设置定位

2、position:relative:即相对定位，relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。这是relative的要点之一。还有第二个要点，就是position:relative/absolute/fixed都会产生一个新的文档流

　　

3、position:absolute：递归查找父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位(实际是画布的左上角)

　　①absolute元素脱离当前文档流。和relative不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。

　　②absolute元素具有“包裹性”。

　　③设置top、left时 是相对于当前文档流而言

1. 设置absolute会使得inline元素被“块”化
2. 设置absolute会使得元素已有的float失效
3. absolute会使元素悬浮在页面里，如果有多个悬浮元素，层级如何确定？答案是“后来者居上”

4、position:fixed:与abolute不同fixed不管是哪个文档流，都在你设置的位置，永远相对于画布左上角

　　

---恢复内容结束---