前端学习第八课（CSS选择器优先级和盒子模型）

1.css复合选择器

CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。

1.1后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的子孙后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

例：

<div id="app">

<div class="header"></div>

        <div class="footer"></div>    

</div>

<style>

#app .header{

height: 100px;

width: 100px;

background-color: violet;

}

</style>

1.2子元素选择器

子元素选择器只能选择作为某元素子元素(亲儿子)的元素。

语法：

.class>h3{color:red;font-size:14px;}

这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

例如：

 #app> .header {

            height: 100px;

            width: 100px;

            background-color: red;

        }

<div id="app">

        <div class="parent">

            <div class="header"></div>

        </div>

        <div class="header"></div>

    </div>

1.3交集选择器

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

语法：

h1.header{属性：值；}

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

1.4并集选择器

并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

语法：

#p1,.hello,h1{属性：属性值}

各个选择器之间用，隔开任何形式的选择器都可以作为并集选择器的一部分。

例如：

#p1,.hello,h1{

            font-size: 50px;

            color: blueviolet;

        }

<h1>helloworld</h1>

<div class="hello">helloworld</div>

<p id="p1">helloworld</p>

实现效果：

 1.5链接伪类选择器

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

• a:link /* 未访问的链接 */

• a:visited /* 已访问的链接 */

• a:hover /* 鼠标移动到链接上 */

• a:active /* 选定的链接 */

:target伪类用来改变页面中锚链接URL所指向的ID元素的样式

:focus 伪类在元素获得焦点时向元素添加特殊的样式。  

:focus-within 是一个CSS 伪类 ，表示一个元素或其后代元素获得焦点。

:focus-visible当元素匹配伪类并且客户端(UA)的启发式引擎决定焦点应当可见(在这种情况下很多浏览器默认显示“焦点框”。)

1.6复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择 最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是 又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

2.标签显示模式（display）

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。 我们网页的标签非常多，在不同地方会用到不同类型的标签，以便更好的完成我们的网页。

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

 1）常见的块级元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

2）常见的行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

3）行内块元素：在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

语法：display:inline-block;

4）标签显示模式转换

• 块转行内：display:inline;

• 行内转块：display:block;

• 块、行内元素转换为行内块： display: inline-block;

3.行高

行高为文字基线之间间距。

1）单行文本垂直居中：文字行高等于盒子高度。

4.背景

4.1背景颜色

语法：

background-color:颜色值;   默认的值是 transparent  透明的

4.2背景图片

语法：

background-image : none | url (url)；

图片背景是否重复

background-repeat: repeat-x;背景图像在横向上平铺

background-repeat:repeat-y ;背景图像在纵向平铺

background-repeat:repeat;背景图像在纵向和横向上平铺（默认的）

background-repeat:no-repeat;背景图像不平铺

4.3背景尺寸大小

background-size:contain;如果图片较大，会自动缩小图片使图片包含在里面。

background-size:cover;如果图片比较小，自动放大图片铺满容器。

但图片的宽高比不变，也可以设置百分比和固定值：

background-size:50%；

background-size:30px：

background-size:30px 50px；设置宽度和高度

4.4背景位置

x,y第一个设置水平移动的位置，水平向右为正方向，都二哥设置竖直移动的位置

background-position :x y;可用像素值、百分比和方位词（top,center,bottom,left,right）设置

4.5背景附着

背景附着就是解释背景是滚动的还是固定的。

background-attachment : scroll | fixed；

scroll为背景图像是随对象内容滚动的；fixed表示背景图像固定；