css入门知识2

选择器进阶 (选择器之间符号用隔开)

后代选择器 子代选择器 并集选择器 交集选择器 伪类选择器 =复合选择器

后代选择器

后代选择器可以选中子孙后代
选择器与选择器之间用空格隔开
示例:
.box a{
    color:red;
}

子代选择器

子代选择器只能选中亲儿子
选择器与选择器之间用大于号隔开
示例:
.box>strong{
    color:pink;
}

并集选择器

选择器与选择器之间用逗号隔开;
并集选择器每组选择器之间一行写;
最后一个选择器的后面不要加逗号;
并集选择器可以是任意基础选择器和复合选择器的结合
后续把相同的样式进行书写在一起,减少代码的耦合性.
示例
div,
p,
span,
.box p{
    color:pink;
}

交集选择器

交集选择器可以理解为既又的原则
选择器与选择器之间不需要任何符号,紧挨着一起.
交集选择器如果有标签,必须把标签写在最前面
示例
div.box{    color:green; }

伪类选择器

鼠标经过时候的样式
a:hover{
    
}
div:hover{
    
}
.box:hover{
    
}
:的前面和后面不能有空格

背景属性 考点

背景颜色 背景图片 背景是否平铺 背景位置
背景颜色 
background-color: pink;
背景图片
background-image: url(./img/icon.png);
背景是否平铺
background-repeat: repeat|no-repeat|repeat-x|repeat-y;
背景位置
background-position: x y;
    背景位置取值:
        方位名词:
            水平位置:left|center|right
            垂直位置:top|center|bottom
        background-position:center center；
        数字+px:
            background-position:10px 20px；
        方位名词+数字(px):
        background-position:left 30px；

元素显示模式

根据标签不同的特点，我们可以把标签分成不同的种类。主要分为： 块级元素、行内元素、行内块元素

块级元素

块元素特点:
1 独占一行 
2 宽度默认是父元素的宽度,高度由内容撑开.
3 可以设置宽高
代表性的标签 div h系列 p li 

行内元素

行内元素特点
 1 一行可以显示多个,如果一行装不下自动折行(换行显示)
 2 宽度和高度默认由内容撑开
 3 设置宽高无效
 代表性的标签 a span em strong

行内块元素

行内块元素特点
 1 一行显示多个
 2 可以设置宽高
  代表性标签 input button

元素显示模式转换

转换为块级元素
display: block;
转换为行内块元素
display: inline-block;
转换为行内元素
display: inline;

css三大特性 考点

继承性

特性:子元素可以继承父元素的某些特性(某些样式 子承父业)

控制文字的属性都可以被继承,不是控制文字的属性不能被继承

常见继承的属性如下显示:

color: red;
font-style: italic;
font-weight: 700;
font-size: 30px;
font-family: 宋体;
text-indent: 2em;
text-align: center;
line-height: 300px;

继承的特殊情况:

如果浏览器有默认的样式,此时继承依然存在,但是会优先执行浏览器的默认样式

a标签的颜色属性可以被继承,但是被浏览器默认的样式给覆盖.

h系列标签的字体大小被继承,但是被浏览器默认的样式覆盖

高度不能被继承,但是宽度有类似继承的效果

层叠性

相同选择器才会有层叠性

层叠性遵循原则:就近原则.

样式冲突---则层叠(覆盖)

样式不冲突--则叠加(共同作用在一个标签上)

注意：当样式冲突. 只有选择器优先级相同,才会通过层叠性判断.

优先级(权重) 

不同选择器会有不同的优先级, 优先级高的样式会覆盖优先级低的样式.

判断公式:

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

下面方便大家理解,但是不是很规则.

0 < 0 < 1 < 10 < 100 < 1000 < 无穷大

注意：!important不能提高继承的优先级 只要是继承 优先级最低.

border-width:5px;
border-style:solid|dotted|dashed
border-color:red

list-style:none;  清除li标签的样式

盒子模型

盒子模型的组成:内容(content) 内边距(padding) 外边距(margin) 边框(border)

边框(border)

边框属性

边框粗细 边框样式 边框颜色

边框简写

boder:solid 1px red;
无顺序要求

边框单方向设置

上边框
border-top:solid 1px red;
下边框
border-bottom:solid 1px red;
左边框
border-left:solid 1px red;
右边框
border-right:solid 1px red;

盒子实际大小初级计算公式

盒子宽度=左边框+内容的宽度+右边框

盒子高度=上边框+内容的高度+下边框

border可以撑大盒子

如何解决:

1 手动内减

2 测量盒子的时候可以从边框的里面进行量取(不测量边框)

3 自动内减(box-sizing: border-box;)

.box {
            width: 400px;
            height: 400px;
            /* width: 380px;
            height: 380px; */
            background-color: green;
            border: 10px solid #000;
            /* css3盒子模型可以解决边框撑大盒子问题(自动内减) */
            box-sizing: border-box;
        }

内边距(padding)

内容区域到边框的距离

上 右 下 左
padding:10px;
上下  左右
padding:20px 30px;
上  左右  下
padding:20px 30px 40px;
上 右 下 左
padding:20px 30px 40px 50px;
单方向设置
padding-top:30px;
padding-bottom:40px;
padding-left:50px;
padding-right:60px;

盒子终极计算公式 注意

盒子的宽度=左右边框+左右内边距+左右内容

盒子的高度=上下边框+上下内边距+上下内容

边框与padding不会撑大盒子特殊情况

当子元素不给宽度的时候, 子元素默认宽度就是父元素的宽度(父元素的100%)

此时给左右的边框和左右的内边距不会撑大盒子.

css3盒子模型

边框和内边距都会撑大盒子

解决办法

1 .手动内减

2.自动内减(box-sizing: border-box;)

外边距(margin)

盒子到盒子之间的距离

上 右 下 左
margin:10px;
上下  左右
margin:20px 30px;
上  左右  下
margin:20px 30px 40px;
上 右 下 左
margin:20px 30px 40px 50px;
单方向设置
margin-top:30px;
margin-bottom:40px;
margin-left:50px;
margin-right:60px;

margin正常现象

水平布局的盒子,左右的 margin值互不影响

最终的距离为margin左右的和

margin合并现象 考点

垂直布局的块级元素 上下 margin会合并.

最终的距离为margin的最大值

解决办法:

开发避免就可以,只设置一个盒子的上下外边距即可.

margin塌陷现象 考点

互相嵌套块级元素, 如果给子元素设置margin-top会作用在父元素身上,这种现象就叫嵌套块级元素塌陷

解决办法:

1 给父元素设置 padding-top或 border-top

2 给父元素设置 overflow: hidden;

3 把子元素转换为行内块 display: inline-block;

4 浮动 绝对定位 相对定位的 盒子不会有嵌套块级元素外边距塌陷现象

行内元素设置内外边距 无效

水平布局设置 padding和margin 有效

垂直布局设置 margin 无效

如果要垂直布局padding和margin生效解决办法

转换为块或行内块

padding和margin 以后如何选择

父子关系 :padding

兄弟关系: margin

结构伪类选择器nth-child || nth-of-type

根据HTML结构选择标签,减少对类名的依赖.

结构伪类选择器的权重是0010.

nth-child(n)

1.n 可以是数字， 数字是几，就选择第几个孩子

ul li:nth-child(6) { }  选择第6个孩子

2.n 还可以是 关键字 比如 odd even

 /* 选中偶数的孩子 */
        ul li:nth-child(even) {
            background-color: pink;
        }
​
        /* 选中奇数的孩子 */
        ul li:nth-child(odd) {
            background-color: skyblue;
        }

3.n 还可以是 公式。

• n 是从 0开始 012345...

• 2n 是 偶数

• 2n + 1 是 奇数

• 5n 5的倍数

• n+5 从第五个开始 包含第五个 一直到最后.

• -n+5 选中前5个 包含第五个

伪元素 

伪元素就是利用css来创建标签.伪元素创建出来的标签属于行内元素.

在父元素内容的最前面添加一个伪元素
E::before{
     content: '';
}
在父元素内容的最后面添加一个伪元素
E::::after{
     content: '';
}
使用伪元素插入必须要指定content属性

标准流

一个完整的网页布局,只有标准流是不能满足需求,打破常规布局,让多个块级元素水平一行显示并且没有间隙.

网页布局: 标准流 + 浮动+ 定位

标准流布局规则

块级元素:

从上往下 垂直布局 独占一行

行内 /行内块元素:

从左往右 水平布局 一行转不下自动换行

浮动

浮动的作用

早期的作用:图文环绕

现在的作用:布局页面,让垂直布局的盒子变成水平布局

浮动的特点 

1 浮动元素会脱离标准流(简称脱标),不占位置,被后面的标准流占有.

2 浮动的元素比标准流高半个级别,可以覆盖标准流的元素.

3 浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动

4 浮动的元素会受到上面元素边界的影响

5 浮动的元素有特殊效果(浮动元素具有行内块元素特性并且顶部对齐.)

一行可以显示多个,可以设置宽高

块级元素浮动之后不设置宽高,默认由内容撑开

行内元素浮动之后设置宽高有效

浮动注意事项:

1 浮动的盒子搭配标准流的父元素一起使用.(标准流:垂直布局 ;浮动:水平布局)

2 浮动的时候,当父元素装不下浮动的子元素,此时子元素会换行显示.

3 子浮父不浮 兄弟一起浮 一浮全浮

清除浮动 

1.设置高度

2.额外标签法

3.单伪元素

4.双伪元素

5.overflow:hidden