黑马跟学CSS--day3笔记

三大特性

层叠性

样式冲突：就近原则

样式不冲突：不会层叠

继承性

子承父业

降低样式复杂性

可继承样式（text- ,font- ,line-,color属性）

行高的继承性

body {

font :12px/1.5 microsoft yahei;

}

行高可以跟单位也可以不跟

如果子元素没有设置行高，则会继承父元素的行高为1.5

此时的子元素的行高是当前子元素的文字大小*1.5

优先级

排序

选择器相同 则执行层叠性

选择器不同 根据选择器权重执行

继承 或者 * 0 0 0 0 /0

元素选择器 0 0 0 1 /1

类选择器 伪类选择器 0 0 1 0 /10

id选择器 0 1 0 0 /100

行内样式 1 0 0 0 /1000

注意点

1.权重不会有进位

2.先判断左侧，依次往下比较

3.继承的权重是0

4.a链接浏览器默认制定了一个样式 蓝色的有下划线

权重的叠加

eg:

div ul li --->0 0 0 3

.nav ul li ---> 0 0 1 2

a:hover ---> 0 0 1 1

.nav a ---> 0 0 1 1

盒子模型

盒子模型

浮动

定位

看透网页布局的本质

1.准备好网页元素基本为盒子

2.设置盒子样式（CSS）摆放

3.往盒子里面装内容

组成

border边框

边框粗细

border-width

边框样式

border-style

solid实线边框

dashed 虚线

dotted 点线边框

边框颜色

border-color

边框的复合写法

border: 1px solid red; 没有顺序！！

边框可以分开写

border-top:

border: 1px solid blue;顺序不能替换

border-top: 1px solid red;

border-collapse: collapse;

表示相邻边框合并到一起

边框会影响盒子的实际大小

content内容

padding内边距

padding-top

padding-left

padding-right

padding -bottom

复合写法

padding:5px;

如果padding后面只跟1个值，上下左右全部都是5

padding：5px 10px;

两个值：上下为5，左右为10；

padding:5px 10px 20px;

三个值：上5 左右10 下20

padding：5 px 10px 20px 30px;

四个值：上5 右10 下20 左30 顺时针

注意点

内边距也会影响盒子大小

解决方案：用width/height减去内边距大小

字数不同用padding值

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

margin外边距

控制盒子与盒子之间的距离

用法

margin-left

margin-right

margin-top

margin-bottom

复合属性

简写方式代表的意义与padding一致

典型应用

块级盒子水平居中对齐

要求

1.盒子必须指定宽度

2.左右外边距设置为auto

常见写法

margin-left：auto； margin-right: auto;

margin: auto;

margin:0 auto;

以上为块元素方式

行内元素或者行内块元素水平居中给其父元素添加text-align : center即可

嵌套块元素塌陷问题

垂直外边距的塌陷

对于父子关系的块元素，父元素有上边距同时子元素也有上边距，此时父元素塌陷较大的外边距值。

解决方案：

1.为父元素定义上边框

2.为父元素定义上边距

3.为父元素添加overflow:hidden

清除内外边距

网页元素有默认的内外边距，不同浏览器默认不一致，使用前先清除内外边距

* {

​ margin: 0;清除内边距

​ padding: 0;清除外边距

​ }CSS开头第一句话

行内元素尽量只设置左右的内外边距，不要设置上下外边距。转化为行内块元素就行了。

PS基本操作