css的三大特性 css有三个非常重要的三个特性；层叠性 继承性 优先级
层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性 主要解决样式冲突的问题 原则 样式冲突，遵循原则上就近原则，那个样式离结构近，就执行那个样式 样式不冲突，不会层叠 口诀：长江后浪推前浪，前浪死在沙滩上
继承性
css继承中 子标签会继承父标签的某些样式，如文本颜色和字号，简单理解就是；子承父业
恰当地使用可以简化我们的代码，降低css样式点复杂性
子元素可以继承父元素的样式（text font line 这些元素开头的可以继承，以及color属性） /* 子元素继承父元素的行高1.5 当前元素文字大小的1.5倍 */
优先级
当同一个元素指定多个选择器，就会有优先级的产生；
选择器相同，则执行层叠性；
选择器不同，则根据我们的选择器权重执行；
继承或者通配符选择器 0 0 0 0 元素选择器（也就是我们标签选择器） 0 0 0 1 类选择器 伪类选择器 0 0 1 0 id选择器 0 1 0 0 行内样式 1 0 0 0 ！imporetant 无穷大
注意
1 权重有4组数字组成的，但是不会有进位；
2 简单记忆方法 通配符选择器权重为0，标签选择器为1 类选择器为10,id选择器为100，行内样式表为1000 ！important 无穷大
3 继承权重为0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重为0；
a链接浏览器默认制定了一个样式 蓝色 下换线 相当于 a{color:blue; text-deraction:underline}
权重叠加问题
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
权重虽然会叠加 但是永远不会有进位的问题
css的盒子模型页面布局三大核心 盒子模型 浮动 和定位 ，学习好盒子模型能非常好的帮助我们布局页面
1 看透网页布局本质
1 先准备好相关的网页元素，网页元素基本都是盒子模型box； 2 利用css设置好盒子样式，然后摆放到相应的位置上。 3 向盒子里面装内容
盒子模型 1 所谓盒子模型：就是把我们html的元素看做是一个矩形的盒子，也就是一个盛装内容的容器。 css盒子模型本质上一个盒子，封装周围的html元素，他包括;边框，外边距，内边距和实际内容
border边框 content 内容 padding 内边距 margin 外边距 控制一个盒子与另一个盒子之间的距离的
边框border border可以设置元素的边框，边框有三部分边框宽度(粗细) 边框样式 边框颜色 boder:boder-width| border-style| boder-color; boder-width 定义边框的粗细，单位是px；
border-style 边框的样式属性 solid 实线边框 dashed 虚线边框 dotted 点线
boder-color 边框颜色
边框的简写 border边框允许你指定一个元素进行元素边框的样式和颜色 border : 1px solid red; 没有顺序 边框分开写法 border-top：1px solid red;
表格的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元的边框
collapse 单词意思的合并的意思 border-collapse : collapse ；表示相邻边框合并在一起；
边框会影响盒子实际大小; 1 测量盒子时候可以不量边框 2 如果测量的时候包含了边框，则需要width和height减去边框的宽度
内边距padding
边框与内容之间的距离。
padding-left:18px; padding-right padding-top padding-bottom
padding:5px; 1个值，达标上下左右都有5像素的内边距 padding:5px 10px; 2个值，代表上下内边距是5像素，左右内边距是10像素 padding:5px 10px 20px; 3个值，代表内边距5像素，左右内边距10 下内边距为20 padding:5 10 20 30 上5 右边10 下20 左30 顺时针
当我们给padding指定两个值后，发生2个事情 1 内容与边框有距离
2也会影响盒子实际大小
会撑大我们的盒子
如何盒子本身没有指定width或者height属性，则此时padding不会撑开盒子大小
外边距margin
控制一个盒子与另一个盒子之间的距离
margin-left margin-right margin-top margin-bottom
margin简写方式和我padding是一样的
外边距典型应用
外边距可以块级盒子水平居中，但是满足两个个条件 1 盒子必须有宽 2 盒子左右的外边距设置为auto
header{width:960px:margin:0 auto;} margin-left:auto; margin-right:auto; margin:auto; margin: 0 auto;
以上方法是块元素水平居中，行内元素和行内块元素水平居中给父元素添加text-align:center;
外边距的合并
使用margin定义元素的垂直外边距时，可能会出现外边距的合并；
1 相邻块元素垂直外边距的合并
当上下的两个块元素相遇时，如果上面的元素有下外边距margin——bottom 下面的元素有上外边距 margin——top，则他们之间的垂直间距不是margin——bottom与margin——top之和,取两个值中的较大这这种 现象称为相邻元素垂直外边距的合并
解决方案 尽量只给一个盒子添加margin值
2 嵌套块元素垂直外边距的塌陷 当两个嵌套元素（父子关系）的块元素，父元素有上边距同时子元素也上外边距，此时父元素会 塌陷较大的外边距值
注意 子盒子浮动了 如果加上外边距就不会有塌陷问题。 解决方案 1 可以为父元素定义上边框 2 可以为父元素定义内边距 3 可以为父元素添加 overflow-hidden
清除内外边距 网页元素很多都带有默认的内外边距 而且不同浏览器默认的也不一致 因此我们在布局前， 首先要清除网页元素的内外边距
{ margin：0； padding：0； }注意：行内元素比较特殊为了照顾兼容性，尽量设置左右内外边距，不要设置上下内外边距，但是 转换为块级和行内块元素就可以了。
去掉li前面的小圆点list-style：none；
圆角边框在css3中，新增加圆角边框样式，这样我们的盒子就可以变圆角了
border-radius:length;
参数值可以是数值或者百分比的形式
1 如果做一个圆形的盒子那就是先做一个正方形然后我们在指定radius大小值是款或者高的一半 如果宽高很复杂 就是设置50%
2 如果是一个矩形，设置为高度的一半就可以了。
3该属性是一个简写属性，可以跟四个值，分别代表 左上角 右上角 右下角 左下角。 两个值 对角线关系；
4 如果改变一个角呢
border-top-left-radius 左上角 等等等
盒子阴影我们可以用box-shadow属性为盒子添加阴影
语法格式 box-shadow；h-shadow v-shadow blur spread color inset; h-shadow 必需 水平阴影的位置，允许负值 v-shadow 必需 垂直阴影的位子 允许负值 blur 可选，模糊距离 spread 可选，阴影尺寸 color 可选， 阴影的颜色， inset 可选，将外部阴影outset该内部阴影
1 默认是外阴影outset 但是不可以写这个单词，负责导致阴影无效 2 盒子阴影不占空间，不会影响其他盒子排列
文字阴影 text-shadow 语法格式 box-shadow；h-shadow v-shadow blur color; h-shadow 必需 水平阴影的位置，允许负值 v-shadow 必需 垂直阴影的位子 允许负值 blur 可选，模糊距离 color 可选， 阴影的颜色，
css浮动1.1 传统网页布局的三种方式 网页布局的本质-用css来摆放盒子 。把盒子放到相应的位置 css提供了三种传统的布局方式（简单说就是盒子如果进行排列顺序）；
1 普通流（标准流）
就是我们标签按照默认规定好进行排列
1 块级元素会独占一行，从上到下顺序排列 div hr p h1-h6 ul ol dl form table 2 行内元素 span a i em
以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式
2 浮动
为什么要浮动
1 如何让多个盒子div水平在一行 比较难，虽然转换我们的行内块 之间有空隙 2 如果让两个盒子左右对齐总结；很多的布局效果 标准流是办法完成的，此时我们可以利用浮动完成布局，因为 浮动可以改变元素标签默认的排列顺序
浮动最典型的应用 ：可以让多个块级元素一行内排列显示.
重要 重要 网页布局第一准则：多个块级元素纵向找标准流，多个块级元素横向排列找浮动 第二准则：先设置盒子大小，之后设置盒子的位置。0
1 什么是浮动
属性用于创建浮动框 将其移动到一边 直到左边缘或者右边缘处及包含块或者另一个 浮动框的边缘。语法： 选择器{float：属性值；}
none 元素不浮动 left 元素向左浮动 right 元素向右浮动
2 浮动特性(重难点) 加了浮动之后的元素，会具有很多特性，需要我们掌握的
1 浮动元素脱离标准流
1 脱离标准流的控制（浮）移动到自定位置（动）.称为脱标。
2 浮动的盒子不再保留原先的位置。
2 浮动的元素会一行的显示并且元素顶部对齐
如果多个盒子都设置了浮动，则它们会按照属性值一行显示并且对端对齐排列。 注意 浮动的元素是互相贴在一起动不会有空隙
如果父级宽度装不下这些浮动盒子 ，多出的盒子会 另起一行显示。
3 浮动的元素具有行内块元素的特性
任何元素都是可以添加浮动，不管你是什么模式的元素，添加浮动之后具有行内块元素的 相似的特性。
如果块级元素没有宽，默认宽和父级一样，但是添加浮动之后，他的大小根据里面的内容来决定
浮动的盒子中间没有缝隙，是紧挨在一起的
行内元素同理。
1.6 浮动元素经常跟我们的标准流搭配使用
为了约束浮动元素位置，我们网页经常布局上=是一般采取： 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
最常见的网页布局 1 top banner margin footer
2
注意点 1 浮动与标准流的父盒子一起搭配使用 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2 一个元素浮动了 理论上其余的兄弟元素也要浮动 一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题 浮动的盒子只会影响浮动盒子后面的标准流 ，不会影响前面的标准流。
如何清理浮动？
我们前面一些浮动元素有一个标准流的父元素，他们有一个共同的特点：高度一样，但所有必须是这样吗？
理想状态是： 让盒子撑开父元素，有多少孩子，我父盒子就有多高。 这样有问题吗？
为什么要清除浮动？
由于父盒子很多情况，不方便给高度，但是盒子浮动有不占位置，最后父盒子高度为0时, 就会影响下面的标准流盒子。 1 父级没高度 2 子盒子浮动了 3 影响下面的布局
由于浮动元素不再占用原文档的位置，所以他会对后面的元素排版产生影响。
清除浮动的本质
清除浮动的本质上清除浮动元素造成的影响
清除浮动之后，父级会浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流
选择器{clear：属性值；} left 不允许左侧有浮动的元素（清除左侧浮动的元素） right不允许右侧有浮动的元素（清除右侧浮动的元素） both 同时清除左右两侧浮动的影响。 我们工作中个，几乎只用both
策略是：闭合浮动.
清除浮动的方法
1 额外标签法也成隔墙法,是w3c推荐的做法
在浮动元素末尾添加一个空的标签，例如
,或者其他的标签（如br等）优点：通俗易懂 ，书写方便 缺点：添加许多无意义的标签，结构化比较差 注意 要就这个新的空标签必须是块级元素。
2 父级添加overflow属性 可以给我们父级添加overflow属性 将值设置为 hidden auto scoll. 子不教，父之过。 有些盒子可能被切掉。
3 父级添加after伪元素 after方式是额外标签法的升级版 也是父元素添加 .clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } .clearfix { /* IE6或者7浏览器的时候 */ *zoom: 1; }
4 父级添加双伪元素 也是给父元素添加
.clearfix：before,.clearfix:after{ content:""; display:table;
} .clearfix:after { clear: both; } .clearfix { /* IE6或者7浏览器的时候 */ *zoom: 1; }
ps 最好切图 cutterman是一款ps的插件 能够自动将你需要的图层进行输出，以替代传统的手工“导出web所用格式” 以及使用切片工具进行挨个切图的频繁流程。
css属性的书写顺序建议如下
1 布局定位属性 display position float clear visibility overflow 建议display第一个写，毕竟关系到模式 2 自身属性 width height margin padding border background 3 文本属性 color font text-decorate… text-align vertical White-spance break-Word 4 其他属性css3 content cursor border-radius box-shadow text-shadow background-gradient
页面布局的整体思路为了提高网页制作的版心 ，布局通常由以下的整体思路。 1 必须确定页面的版心 ，我们测量可得知。
2 分析页面中的行模块，以及每个页面页面中的列模块，其实页面布局的第一准则。
3 列模块多宽多高 那一个位置
4 制作HTML的结构，我们还要遵循，先有结构，后有样式点原则，结构最重要
5 所以，先理清楚布局结构，在写代码有位重要，这需要我们多写多积累。
导航栏头部制作
实际开发中，我们不会直接用链接a而且用例li 包含我们的链接a的做法 1 li+a语义更清晰 一看就是有条有理的列表内容 2 如果直接用a 搜索引擎更容易辨别为有堆砌关键字嫌疑 （故意堆砌关键字容易被搜素引擎有降权的风险） 从而影响网站排名。
注意
让导航栏一行显示，给li夹浮动，li是块级元素，需要一行显示 这个nav导航栏可以不给宽度 将来可以添加其余的文字 因为导航栏里面的文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度。
3 定位
