css2

css的三大特性 层叠性 继承性 优先级
层叠性
相同的选择器设置相同的样式，此时一个样式就会覆盖另一个样式
相同性原则：样式冲突原则是就近原则，哪个样式离结构近就执行那个
样式不冲突就不会覆盖另一个样式，不是后来的会把全部都会覆盖
例如：
div{
color:red
}
div{
color:pink
}

hahahaha

此时颜色是pink颜色

继承性
子标签会继承父标签的样式，虽然子标签没有设置样式也会继承父标签的样式，子承父业，但是一般继承的是（text- font- line- 以及color属性）
例如
div{
color:pink;
font-size:15px;
}

hahahaha

此时p标签的样式是div的样式

body的行高1.5此时自己的内容里面能继承的内容全是自己设置的1.5倍

优先级
选择器权重优先级：
0.0.0.0 0.0.1.0 0.1.0.0 1.0.0.0
从低到高是：继承 或者 * < 元素选择器 < 类选择器 伪类选择器 < ID选择器 < style样式 < !importment
复合层叠选择器权重叠加： ul li > li

重点盒子模型
网页布局的本质： 1.先准备好相关的网页元素，网页元素基本上都是盒子Box
2.利用css设置好盒子样式，然后摆放到相应的位置
3.往盒子里面装内容
网页布局的核心本质：就是利用CSS摆盒子

边框border（会在盒子外面加边框的宽度）
border-width：5px设置边框的宽度是5像素(粗细)
border-style:none | hidden | dotted （点线）| dashed（虚线） | solid（实线） | double |
简写：border:1px solid red没有顺序
border-bottom border-top border-left border-right 设置上下左右边框
border-collapse:合并相邻的单元格

padding 设置内边距，即边框与内容之间的距离
padding-left/right/top/bottom 边框与内容之间的距离
padding: 5px 表示上下左右全是5px
padding: 5px 10px;表示上下是5px 左右是10px
padding 5px 10px 15px 表示上5 左右10 下15 的像素
padding 5 10 15 20 上右下左顺时针
核心：这是内容与边距的距离
如果div 的宽高已经设置好，再加上padding，则表示的是在原先的宽高的基础上再加上padding的值表示此时的div的宽高值
如果此时不想盒子的宽度加长，就必须手动将盒子的宽度减少
另一种情况是不指定父级元素的宽度，则加上padding的值也不会改变宽度

margin:设置盒子的外边距，控制盒子与盒子之间的距离
margin-left/right/top/bottom 左、右、上、下外边距
参数与padding一样

外边距可以让块级元素盒子水平居中满足两个条件
1.盒子必须指定宽度
2.盒子左右的外边距都设置为auto
margin:0 auto;上下为0 左右自动居中显示
行内块元素可以给父级元素加上text-align : center

父亲的div 和 孩子的div 如果父亲的div 和孩子的 div都指定margin-top此时父亲和孩子的margin会增大，不会分离
如果给父亲添加边框此时孩子和父亲会分离，正常显示，只要给父亲的元素添加padding的值就会隔开
即父亲和孩子分离div方式：
1可以给父元素定义边框
2可以为父元素定义内边距
3可以为父元素添加overflow:hidden

清除内外边距
*{
padding:0;
margin:0;
}
ul li 里面的小圆点去除方法：list-style: none

圆角边框：
border-radius:length; 设置圆角边框也可以使用b%

盒子阴影：
box-shadow:
h-shadow :必须 水平阴影的位置 允许负值
v-shadow：必须 垂直阴影的位置 允许负值
blur ：可选，模糊距离
spread：可选 阴影的尺寸
color：可选 阴影的颜色
inset：可选 将外部阴影改为内部阴影

默认的是外阴影，但是不可以写这个单词，否则导致阴影无效
盒子阴影不占用空间，不会影响其他盒子排列
div:hover{
box-shadow:10px 10px 10px -4px rgba(0 .0 .0 .3)
}
鼠标一方上就会出现效果

文字阴影
text-shadow: h-shadow v-shadow blur color：同盒子阴影

浮动：float
标准流：标签按照规定好的默认方式排列（块级元素 行内元素排列）
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
语法： 选择器{float：属性值}
属性值：none 元素不浮动（默认值） left 元素左浮动 right 元素向右浮动
使用浮动后，两个盒子一定在一行，若是左浮动，则这两个盒子连接在一块，放左侧，若是右浮动，则两个盒子放在两边，在一行
浮动特性（重难点）
1.浮动元素会脱离标准流（脱镖）
2.浮动元素会一行内显示并且元素顶部对齐
3.浮动元素会具有行内块元素的特性

最重要特性
1.脱离标准普通流的控制（浮）移到指定位置（东）（俗称脱镖）
2.浮动的盒子不再保留原先的位置
3.任何元素都有可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
1.如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，他的大小可以根据内容来决定
2.浮动的盒子中间是没有缝隙的，是紧挨着一起的
3.行内元素同理
1.6浮动元素经常和标准流父级 元素搭配使用
先用标准流的父级元素排列上下位置，之后内部元素采取浮动排列左右位置，符合网页布局第一准则

浮动应用float

• 1
• 2
• 3
• 4

设计样式标准：
先用标准流排列父元素，再用浮动排列子元素（这是标准）
1.即先用标准流的父元素排列上下位置，之后内部元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余的兄弟元素也要浮动
浮动的盒子只会影响浮动的盒子后面的标准流，不会影响前面的标准流

清除浮动：
选择器{clear:属性；}
实际工作中一般是clear:both; 清除浮动的策略是：闭合浮动

方法：
1.额外标签法也成为隔墙法，是w3c的推荐做法
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素
额外标签发1.会在浮动元素末尾添加一个空的标签，例如

注意：这个新的标签必须是块级元素
2.清除浮动 —父级添加overflow 其属性值设置为hidden auto scroll
3.清除浮动：after伪元素法 记住一定是给父元素添加
具体做法：.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;
}

3.为元素
.clearfix:before，
.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1
}
清除浮动原因：
1.父级没高度
2.子盒子浮动了
3.影响下面布局了，我们就应该清楚浮动

学成在线案例
建议css书写顺序
1.布局定位属性：display/position/float/clear/visibility/overflow
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性（css3）：content/cursor/border-radius/box-shadow/background:linear-gradient

导航栏实际开发注意：
实际开发中，不会直接用链接a，而是用li包含（li+a）的做法
1.li+a语义更清晰，有条理
2.浮动的盒子不会有外边距合并的问题