2 css

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 定位