1、选择器进阶

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

1.1后代选择器：空格

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

选择器语法：选择器1 选择器2{css}

结果：

·在选择器1所找到标签的后代（儿子、孙子、重孙子.…）中，找到满足选择器2的标签，设置样式

注意点：

1.后代包括：儿子、孙子、重孙子……

2.后代选择器中，选择器与选择器之间通过空格隔开

<style>
  /*找到div的儿子p设置文字颜色是红色*/
  /*父选择器 后代选择器{}
  div p{
  color:red;
  }
  </style>
<body>
  <p>这是一个标签</p>
  <div>
    <p>这是div的儿子</p>
    </div>
  </body>

1.2子代选择器：>

作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素

选择器语法选择器1>选择器2{css}

结果：

·在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

注意点：

1.子代只包括：儿子

2.子代选择器中，选择器与选择器之间通过>隔开

<style>
/*空格隔开的是后代，儿子，孙子，重孙子*/
/*div a{
color:red；
}*/
/*只想选中儿子a*/
/*div的儿子a文字颜色是红色*/
div>a{
color：red;
}
</style>
</head>
<body>
<div>
父级
<a href="#">这是div里面的a</a>
  <p>
  <a href="#">这是div里面的p里面的a</a>
  </p>
</div>
</body>

1.3并集选择器：，

作用：同时选择多组标签，设置相同的样式

选择器语法：选择器1，选择器2|{css}

结果：

·找到选择器1和选择器2选中的标签，设置样式

注意点：

1.并集选择器中的每组选择器之间通过，分隔

2.并集选择器中的每组选择器可以是基础选择器或者复合选择器

3.并集选择器中的每组选择器通常一行写一个，提高代码的可读性

<style>
/*p div span h1 文字颜色是红色*/
/*选择器1，选择器2{}*/
  p，
  div，
  Span，
  h1{
      color：red；
  }
</style>
</head>
<body>
<p>ppp</p>
<div>div</div>
  <span>span</span>
<h1>h1</h1>

<h2>h2</h2>
</body>

1.4交集选择器：紧挨着并且用.链接

作用：选中页面中同时满足多个选择器的标签

选择器语法：选择器1.选择器2{css}

结果：

·（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意点：

1.交集选择器中的选择器之间是紧挨着的，没有东西分隔

2.交集选择器中如果有标签选择器，标签选择器必须写在最前面

<style>
p.box{
color：red；
}
</style>
</head>
<body>
<！--找到第一个p，带box类的，设置文字颜色是红色-->
<pclass="box">这是p标签：box</p>
<p>pppppp</p>
<div class="box">这是div标签：box</div>
</body>

1.5hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器：hover{css}

注意点：

1.伪类选择器选中的元素的某种状态

  <style>
        /*悬停的时候文字颜色是红色 */
        a:hover
        {
            color: red;
            background-color: green;
        }
        /*用户鼠标悬停到div的时候文字是绿色*/
        div:hover{
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">这是一个超链接</a>
    <div>div</div>
</body>

1.6emmet语法

作用：通过简写语法，快速生成代码

语法：

2、背景相关属性

2.1背景图

属性名：background-image（bgi）

属性值：background-image:url('图片的路径')；

注意点：

背景图片中url中可以省略引号

背景图片默认是在水平和垂直方向平铺的

背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

2.2背景平铺

属性：background-repeat（bgr）

属性值：

取值效果

repeat （默认值）水平和垂直方向都平铺

no-repeat 不平铺

repeat-x 沿着水平方向（x轴）平铺

repeat-y 沿着垂直方向（y轴）平铺

2.3背景位置

属性名：background-position（bgp）

属性值：background-position：水平方向位置垂直方向位置；

注意点：

·方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

<style>
div{
  width：400px;
  height：400px;
  background-color:Opink;
  background-image:ur1（"#"）;
  background-repeat: no-repeat;
/*background-position:right e；*/
/*background-position:right bottom；*/
/*background-position:center center；*/
/*background-position:center；*/
/*background-position：5epx e；*/
/*background-position：50px 100px；*/
background-position:-50px-100px;
</style>
</head>
<body>
<div>文字</div>
</body>

2.4背景相关属性连写

属性名background（bg）

属性值：

·单个属性值的合写，取值之间以空格隔开

书写顺序：

·推荐：background:color image repeat position

省略问题：

·可以按照需求省略

·特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background:url（）

注意点

·如果需要设置单独的样式和连写

·①要么把单独的样式写在连写的下面

·②要么把单独的样式写在连写的里面

2.5背景图和img标签的区别

需求：需要在网页中展示一张图片的效果？

方法一：直接写上img标签即可

·img标签是一个标签，不设置宽高默认会以原尺寸显示

方法二：div标签+背景图片

·需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签#

3、元素显示模式

3.1块级元素

显示特点：

1.独占一行（一行只能显示一个）

2.宽度默认是父元素的宽度，高度默认由内容撑开

3.可以设置宽高

代表标签：

div、p、h系列、ul、idl、dt、dd、form、header、nav、foote...…

3.2行内元素

显示特点：

1.一行可以显示多个

2.宽度和高度默认由内容撑开

3.不可以设置宽高

代表标签：

·a、span、b、u、i、s、strong、ins，em、del...…

3.3行内块元素

显示特点：

1.一行可以显示多个

2.可以设置宽高

代表标签：

·input、textarea，button、selec....…

·特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

3.4元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

语法：

3.5标签嵌套

1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……

但是：p林签中不要嵌套div、p、h等块级元素

2.a标签内部可以嵌套任意元素

但是：a标签不能嵌套a标签

4、CSS特性

4.1继承性

特性：子元素有默认继承父元素样式的特点（子承父业）

可以继承的常见属性（文字控制属性都可以继承）

1.color

2.font-style、font-weight、font-size、font-family

3.text-indent、text-align

4.line-height

5...…

注意点：

·可以通过调试工具判断样式是否可以继承

特殊情况：

1.a标签的color会继承失效

2.j系列标签的font-size会继承失效

4.2层叠性

特性：

1.给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上

2.给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效

注意点：

1.当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

4.3优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式：

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

记忆方法：范围越广优先级越低

注意点：

1.!important写在属性值的后面，分号的前面！

2.!important不能提升继承的优先级，只要是继承优先级最低！

3.实际开发中不建议使用！important。

4.4权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加计算公式：（每一级之间不存在进位）

比较规则：

1.先比较第一级数字，如果比较出来了，之后的统统不看

2.如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看

3.都是继承，继承里面谁高，看继承那个父级，哪个父级高，哪个选择器生效

4.如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算！）

注意点：！important如果不是继承，则权重最高，天下第一！

4.5谷歌排错法

当控件没有显示对应的样式时，右键点检查，如果有黄叹号，说明是属性错，如果黄叹号都没有就是选择器出错

5盒子模型

5.1盒子模型概念

1.盒子的概念

1.页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局

2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子

2.盒子模型

CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

3.记忆：可以联想现实中的包装盒

5.2 边框（border）

属性名：border属性值：单个取值的连写取值之间以空格隔开

·如：border 10px solid red；

快捷键：bd+tab

实线：solid

虚线：dashed

点线：dotted

5.2.1边框单方向设置

场景：只给盒子的某个方向单独设置边框

属性名：border-方位名词

属性值：连写的取值

5.2.2边框（border）-单个属性

作用：给设置边框粗细、边框样式、边框颜色效果

单个属性：

5.3 padding技巧

padding属性可以当做复合属性使用，表示单独设置某个方向的内容

padding最多取4个值

5.4CSS3盒子模型自动内减功能

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？

·给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？

解决方法①：手动内减

·操作：自己计算多余大小，手动在内容中减去

·缺点：项目中计算量太大，很麻烦

解决方法②·自动内减

·操作：给盒子设置属性box-sizing:border-box；即可

·优点：浏览器会自动计算多余大小，自动在内容中减去

５.５清除默认内外边距

场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置

·比如：body标签默认有margin：8px

·比如：p标签默认有上下的margin

·比如：ul标签默认由上下的margin和padding-left

解决方法

5.6 补充去掉列表符号

{

list-style:none

}

5.7外边距折叠现象

场景：垂直布局的块级元素，上下的margin会合并

结果：最终两者距离为margin的最大值

解决方法：避免就好

·只给其中一个盒子设置margin即可

5.8外边距坍塌现象

场景互相嵌套的块级元素，子元素的margin-top会作用在父元素上

结果：导致父元素一起往下移动

解决方法：

1.给父元素设置border-top 或者padding-top（分隔父子元素的margin-top）

2.给父元素设置overflow:hidden

3.转换成行内块元素

4.设置浮动

5.9行内元素的内外边距问题

如果想要通过margin或padding改变行内标签的垂直位置，无法生效

行内标签的margin-top和bottom不生效

行内标签的padding-top或botttom不生效

想改变行内标签的垂直位置可以通过改变line-height来实现，想改变行内标签的左右间距可以用margin或padding。

6、结构伪类选择器

作用与优势：

1.作用：根据阮素在HTML中的结构关系查找元素

2.优势：减少对于HTML中类的依赖，有利于保持代码整洁

3.场景：常用于查找某父级选择器中的子元素

选择器

６.１伪元素

伪元素：一般页面中的非主体内容可以使用伪元素

区别：

1.元素：HTML设置的标签

2.伪元素：由CSS模拟出的标签效果　

注意点：

1.必须设置content属性才能生效

2.伪元素默认是行内元素

７、浮动

7.1 浮动的特点

3.1浮动的特点

1.浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

·相当于从地面飘到了空中

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

3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素有特殊的显示效果

·一行可以显示多个

·可以设置宽高

5.浮动的标签顶部对齐

6.浮动：在一行排列，宽高生效--浮动后的标签具备行内快特点

注意：

浮动的元素不能通过text-align:center或者margin:0 auto居中

7.2清除浮动

含义：清除浮动带来的影响

·影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因：

·子元素浮动后脱标→不占位置

目的：

·需要父元素有高度，从而不影响其他网页元素的布局

7.2.1清除浮动的方法

1、直接设置父元素高度

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

2、额外标签法

操作：

1.在父元素内容的最后添加一个块级元素

2.给添加的块级元素设置clear:both特点：

·缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

3、单伪元素清除法

优点：项目中使用，直接给标签加类即可清除浮动

4、双伪元素法

优点： 项目中使用，直接给标签加类即可清除浮动，同时可以防止塌陷

5、给父元素设置overflow:hidden

ps内容

css书写顺序：

1.浮动/display

2.盒子模型：margin border padding宽度高度背景色

3.文字样式

好处是浏览器执行效率更高

CSS进阶

1、选择器进阶

1.1后代选择器：空格

1.2子代选择器：>

1.3并集选择器：，

1.4交集选择器：紧挨着并且用.链接

1.5hover伪类选择器

1.6emmet语法

2、背景相关属性

2.1背景图

2.2背景平铺

2.3背景位置

2.4背景相关属性连写

2.5背景图和img标签的区别

3、元素显示模式

3.1块级元素

3.2行内元素

3.3行内块元素

3.4元素显示模式转换

3.5标签嵌套

4、CSS特性

4.1继承性

4.2层叠性

4.3优先级

4.4权重叠加计算

4.5谷歌排错法

5盒子模型

5.1盒子模型概念

5.2 边框（border）

5.2.1边框单方向设置

5.2.2边框（border）-单个属性

5.3 padding技巧

5.4CSS3盒子模型自动内减功能

５.５清除默认内外边距

5.6 补充去掉列表符号

5.7外边距折叠现象

5.8外边距坍塌现象

5.9行内元素的内外边距问题

6、结构伪类选择器

６.１伪元素

７、浮动

7.1 浮动的特点

7.2清除浮动

7.2.1清除浮动的方法

ps内容