CSS篇

选择器

1.css中的选择器有哪些？

1.元素选择器，ID选择器，CLASS选择器，通配符*

2.复合选择器

• 1.交集选择器，选择同时符合多个条件元素 语法：选择器1选择器2选择器3……
• 2.选择器分组（并集选择器），同时选择多个选择器的对应元素 语法：选择器1，选择器2……

3.关系选择器

• 子元素选择器：父元素 > 子元素
• 后代元素选择器:祖先 后代
• 选择下一个兄弟：前一个 + 后一个
• 选择下边所有兄弟：前一个 ~ 后一个

4.属性选择器

• [属性名]选择含有指定属性的元素
• [属性名=属性值]选择含有指定属性和属性值的元素
• [属性名^=属性值]选择属性值以指定开头的元素
• [属性名$=属性值]选择属性值以指定结尾的元素
• [属性名*=属性值]选择属性值含有某值的元素

5.伪类选择器

• :first-child 选中第一个子元素
• :last-child 选中最后一个子元素
• :nth-child() 选中第n个子元素 特殊值：
• nth-child(n)表示第n个
• nth-child(2n/even)表示第偶数个
• nth-child(2n+1/odd)表示第奇数个（以上是在所有元素中排序） 下面是在同类元素中进行排序
• :first-of-type
• :last-of-type
• :nth-of-type()
• :not() 将符合条件的元素从选择器中去除 例：ul > li:not(:nth-of-type(2)){}

6.伪元素选择器

• ::first-letter 表示第一个字母
• ::first-line 表示第一行
• ::selection 选中的内容
• ::befor 元素的开始（需要搭配conten:''使用）
• ::after 元素的结束（需要搭配conten:''使用）

选择器的优先级

标题
内联	1000
ID	100
类和伪元素	10
元素选择器	1
通配符	0
继承的样式	没有优先级

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先计算（分组选择器是分组单独计算的），如果优先级计算后相同，此时则优先使用靠下的样式
可以在某个样式后添加!important，该样式会获取到最高优先级甚至超过内联样式的优先级，但是注意，要谨慎使用，因为修改起来比较难。
color:red !important ; ps：选择器的累加不会超过其最大的数量级，类选择器最高也不会超过ID选择器

超链接

<a href="https://www.baidu.com/" target="_blank">点我跳转</a> target指定超链接打开位置

• _self：表示在当前页面打开超链接
• _blank:表示在新的页面打开超链接 跳转到当前页面的顶部

• <a href="#"></a>
  

javascript:;表示占位符，点击超链接不会跳转

• <a href="javascript:;"></a>
  

替换元素img

<img src="../img/pic01.webp" alt="图片"> alt:图片无法加载时，图片的描述（搜索引擎识别图片根据alt内容来识别）
img特性：修改一个width，其height会等比例缩放

图片格式

• jpeg(jpg):支持颜色比较丰富，不支持透明度，不支持东突，一般显示照片
• gif:支持的颜色比较少，支持简单透明度，支持动图
• png:支持的颜色丰富，支持复杂度透明，不支持动图
• webp:谷歌新推出的图片格式（兼容性不太好）
• base64:将图片使用base64进行编码，也就是将图片转化成字符（图片-> 字符），通过字符引入图片。一般都是需要和网页一起加载图片才会使用base64 ps:在使用图片时候，需要注意，效果一样的，使用文件小的，效果不一样的，选择使用效果好的图片

像素

像素是由一个个的小点点构成的，不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，所以同样的200px在不同的设备下显示的效果不一样。

• 百分比 相对其父元素属性的百分比
  设置百分比可以使子元素跟随父元素的改变而改变
• em em是相对于元素的字体大小来计算的
  1em = 1 font-size
  em会根据字体大小的改变而改变，参照自身字体大小
• rem rem是相对于根元素（html字体大小）的字体大小来计算

文档流

显示器实际上是一层摞着一层的，通过css样式可以分别为每一层设置样式。这些层中，最底下的一层称为文档流，，文档流是网页的基础。
对于我们来说，元素主要有两个状态：在文档流中;不在文档流中。
元素在文档流中有什么特点：

• 块元素： 块元素在页面中独占一行（自上向下垂直排列）
  默认宽度是父元素的全部（会把父元素撑满）
  默认高度是被内容（子元素）撑开
• 行内元素： 行内元素不会独占页面一行，只会占自身大小
  行内元素在页面中自左向右水平排列，如果一行之中，不能容下行内元素，元素会换到第二行
  行内元素的默认宽度和高度都是被内容撑开

盒模型

css将页面中的所有元素都设置为了一个矩形的盒子，将元素设置矩形盒子后，对页面的布局就变成了不同的盒子摆放到不同的位置。 标准盒模型

IE盒模型

每一个盒子都有一下几个部分：
内容区（content）：元素中的所有子元素和文本都在内容区中排列，内容区的大小由width和height两个属性设置
内边距(padding)：内容和边框的距离,会影响盒子的大小
边框(border)：盒子的边缘，边框的大小会影响盒子的大小（宽度 颜色 模式）
ps:盒子的可见框大小，由内容+内边距+边框 决定的
外边距（magin）：盒子和其他盒子的距离，不会影响盒子可见框的大小，但会影响盒子位置，会影响盒子实际占用空间，元素在页面中是按照左向右的顺序排列，margin-left和margin-top是移动自己，margin-bottom和margin-right移动其他元素，如果设置负值，则往相反方向移动。

• margin：10px 20px 30px 40px ;值分别代表top right bottom left
• margin：10px 20px 40px ;值分别代表top left/right bottom
• margin：10px 20px ;值分别代表top/bottom left/right
• margin：10px ;值代表top/bottom/left/right

水平布局

水平布局：元素在其父元素中水平方向的位置由一下几个属性共同决定
margin-left + padding-left + border-left + width + border-right + padding-right + margin-right = 父元素内容区的宽度（必须满足该等式）

以上等式必须满足，如果相加结果等式不成立，则称为过渡约束，等式会自动调整，如果七个值没有auto情况，浏览器会自动调整margin-right使等式满足。
这七个值中可设置为auto： width margin-left margin-right

• 如果某个值为auto，则会调整为auto那个值以使等式成立
• 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
• 如果三个值都设置为auto，则外边距都是0，宽度最大
• 如果将两个外边距设置为auto，宽度值固定，则会将外边距设置为相同的值（经常利用这个特点来设置一个元素在其父元素中水平居中）

width:100px;//设置固定值
margin:0 auto;

外边距折叠

外边距重叠（margin）:相邻的垂直方向外边距会发生重叠现象 兄弟元素：（兄弟间的外边距重叠对于开发是有利的，不需要处理）

• 如果相邻外边距都是正值，取两者较大的那个
• 如果相邻的外边距一正一负，取两者的和
• 如果相邻的外边距都是负值，取两者绝对值较大的那个 父子元素：父子元素间相邻外边距，子元素的会传递给父元素（只针对上外边距）

外边距折叠处理方法

1.开启BFC

        #box3{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            overflow: hidden;

        }
        #box4{
            width: 100px;
            height: 100px;
            margin-top: 100px;
            background-color: bisque;
        }

2.使用::before

        #box3{
            width: 200px;
            height: 200px;
            background-color: #bfa;

        }
        #box4{
            width: 100px;
            height: 100px;
            margin-top: 100px;
            background-color: bisque;
        }
        #box3::before{
            content: " ";
            display: table;
        }

行内元素的盒模型

行内元素：行内元素不支持设置长度和宽度，并且padding、margin、border垂直方向（top、bottom）不生效\

display的属性值：

• inline -> 行内元素
• block -> 块元素
• inline-block -> 行内块元素（既可以设置宽度又不会独占一行）
• table ->表格
• none -> 元素不在页面中显示（不占据页面空间） visibility的属性值：
• visible -> （默认值）元素在页面中正常显示
• hidden -> 隐藏，不显示元素，但是依然占据页面位置

浮动

浮动：可以使元素向其父元素的左侧或向右移动
元素设置浮动后，水平布局等式就不需要强制成立了，会完全从文档流中脱离，不再占用文档流位置，元素下边的还在文档流中的元素会自动向上移动
浮动的特点：

• 1）浮动元素会完全脱离文档流，不再占据文档流的位置
• 2）设置浮动以后，元素会向父元素的左侧或右侧移动
• 3）浮动元素默认不会从父元素中移出
• 4）浮动元素向左或向右移动时，不会超过它前面的其他浮动元素
• 5）浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高
• 6）浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围 块元素设置浮动后，脱离文档流的特点：块元素不再独占一页面一行；脱离文档流以后，块元素的宽度和高度默认都被内容撑开
  行内元素设置浮动后，脱离文档流的特点：行内元素脱离文档流，会变成和块元素一样效果

高度塌陷

高度塌陷：在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素高度，导致父元素的高度丢失

解决高度塌陷方法

方法一：开启BFC

        #box1{
            border: 5px burlywood solid;
            /* 开启BFC */
            overflow: hidden;
        }
        #box2{
            float: left;
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }

方法二：使用伪类::after

        #box1{
            border: 5px burlywood solid;
        }
        #box2{
            float: left;
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }
        #box1::after{
            content: "";
            clear: both;
            display: block;
        }

clearfix处理外边距折叠和高度塌陷

        #box1{
            border: 5px burlywood solid;
        }
        #box2{
            float: left;
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color: #bfa;
        }
        .clearfix::before,
        .clearfix::after{
            content: "";
            display: table;
            clear: both;
        }

    <div id="box1" class="clearfix">
        <div id="box2"></div>
    </div>

BFC块级格式化环境

BFC是CSS中的一个隐含属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域，通常通过overflow:hidden;来开启BFC 元素开启BFC后的特点：

• 1）开启BFC的元素不会被浮动元素所覆盖
• 2）开启BFC的元素子元素和父元素外边距不会重叠
• 3）开启BFC的元素可以包含浮动的子元素

clear

clear：清除浮动元素对当前元素所产生的影响

• left -> 清除左侧浮动元素对当前元素所产生的影响
• right -> 清除右侧浮动元素对当前元素所产生的影响
• both -> 清除两侧对当前影响最大的 clear清除浮动原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素影响。

元素定位

开启定位：当元素position设置不为static时，即为开启定位
当元素开启了定位以后，通过偏移量来设置元素位置

• 水平位置：top bottom
• 垂直位置：left right

相对定位（relative）

• 1.元素开启定位后，如果不设置偏移量元素不会发生任何变化
• 2.相对定位是参照于元素在文档流的中的位置进行定位
• 3.相对定位会提升元素的层级
• 4.相对定位不会使元素脱离文档流，不会改变元素的性质，块元素还是块元素，行内元素还是行内元素

绝对定位（absolute）

• 1.开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
• 2.绝对定位元素会从文档流中脱离
• 3.绝对定位会改变元素的性质，行内元素变成块元素，块的宽度被内容撑开
• 4.绝对定位会使元素提升一个层级
• 5.绝对定位是相对于其包含块进行定位的 包含块：1）正常情况下，包含块就是离当前元素最近的块元素
  2）绝对定位包含块：包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则根元素（html，也称初始包含块）是它的包含块。

固定定位（fixed）

固定定位也是一种绝对定位，固定定位的大部分特点和绝对定位一样，唯一不同的是，固定定位永远参照于浏览器视口进行定位

粘滞定位（sticky）

粘滞定位的特点和相对定位基本一致

开启了定位后的水平布局和垂直布局特点

水平布局
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right = 包含块的宽度

当开启了绝对定位以后：

• 如果9个值中没有auto，则自动调整right以使等式满足
• 如果有auto，则自动调整auto

可设置auto值：margin width left right

ps：因为left和right的值默认是auto，如果left和right未设置，等式不满足则会调整这两个值

垂直方向布局 top+margin-top/bottom+padding-top/bottom+margin-top/bottom+height = 包含块的高度

元素的层级（z-index）

• 值越大层级越高，越优先显示
• 如果元素层级一样，则优先显示靠下的元素
• 祖先元素的层级再高，也不会盖住后代元素

flex布局

display: flex;//设置flex布局
注意：设置flex布局后，父元素和子元素的float、clear、vertical-align属性将失效，flex布局中，容器相当于父元素，项目相当于直接子元素

• flex-direction：设置主轴方向，属性值有row(默认) row-reverse column column-reverse 主轴方向是可变化的，主轴确定好，另外一个则是侧轴\
  

flex-direction: row;

flex-direction:row-reverse;

flex-direction:column;

flex-direction:column-reverse;

• justify-content：设置主轴上子元素排列方式（使用之前要确定好主轴方向）
  

• flex-start 表示从头部开始，从左向右排列
• flex-end 表示从尾部开始，元素尾部贴右边
• center 在主轴居中对齐
• space-around 平分剩余空间,每个项目的左外边距和右外边距都是一样大小的
• space-between 先贴两边，再平分剩余空间
• space-evenly 项目间等间距 justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly; \

• flex-wrap:设置子元素是否换行
  

• nowrap：不换行（默认）
• wrap：换行

•  align-items:设置侧轴子元素排列方式（单行）
  

• flex-start：头部对齐。
• flex-end：尾部对齐。
• center：中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• align-conten：设置侧轴上子元素排列方式，只用用于子项目换行的情况（多行）
  

• flex-start：起点对齐。
• flex-end：终点对齐。
• center：中点对齐。
• space-between：两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

• flex-flow：flex-direction flex-wrap;主轴和换行的简写
  

ps：以上都是容器的属性
项目属性：

• flex 定义子项目分配剩余空间，用flex表示占多少份（flex属性是flex-grow, flex-shrink 和 flex-basis的简写）
• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间
• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

背景设置

• background-img
• background-repeat 设置背景的重复方式

•  repeat 默认值，沿X轴、Y轴两方向重复
  

•  repeat-x 沿着x轴方向重复
  

•  repeat-y 沿着y轴方向重复
  

•  no-repeat 背景图片不重复
  

• background-position 设置背景图片的位置

• top、left、bottom、right、center （必须同时指定两个值）
  

• background-clip 设置背景的范围

• border-box 背景会出现在边框下边
  

• padding-box 背景不会出现在边框，只出现在内容区和内边距区域
  

• content-box 背景只会出现在内容区
  

• background-origin 背景图片的偏移量计算的原点

• paddding-box、content-box、border-box
  

• background-size 设置背景图片的大小
• 第一个值表示宽度，第二个值表示高度，如果只写一个，则第二个默认auto

• contain 图片比例不变，将图片在元素中完整显示
  

• cover 图片比例不变，将元素铺满
  

• background-attachment 背景图片是否跟随元素移动
• background 所有属性的简写 ps：background-size必须写在background-position后边（以这种形式background-position/background-size）
  background-origin需要写在background-clip的前面

表单

表单：用于将本地的数据提交给远程服务器

    <!-- 表单：用于将本地的数据提交给远程服务器 -->
    <!-- action表单提交的服务器地址 -->
    <form action="formsubmit.html">
        <!-- 文本框 -->
        文本框：<input type="text" name="text">
        <br></br>

        <!-- 提交按钮 value：用来指定按钮文字-->
        <input type="submit" name="submit" id="" value="注册">
        <input type="submit" name="submit" id="" >
        <br></br>

        <!-- 密码框 -->
        密码：<input type="password" name="pwd" id="">
        <br></br>

        <!-- 单选按钮 checked默认选中-->
        <!-- ps:像这种选择框必须指定一个value属性（用来辨别哪个选择框），value属性会作为用户填写的值传递到服务器 -->
        <input type="radio" name="radiobtn" id="" value="btn1">
        <input type="radio" name="radiobtn" id="" value="btn2" checked>
        <br></br>

        <!-- 多选框 -->
        <input type="checkbox" name="checkbox" value="test01">
        <input type="checkbox" name="checkbox" value="test02">
        <input type="checkbox" name="checkbox" value="test03">
        <br></br>

        <!-- 下拉列表 -->
        <select name="choose" id="">
            <option value="opt01">选项一</option>
            <option value="opt02">选项二</option>
            <option value="opt03">选项三</option>
        </select>

    </form>

表格

    <!-- align="center"表示表格居中显示 -->
    <table border="1" align="center">
        <!-- tr表示一行 -->
        <tr>
            <!-- th表示表格头部的单元格 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
        <tr>
            <!-- td表示一个单元格 -->
            <td>小明</td>
            <td>18</td>
            <td>高二</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>17</td>
            <td>高二</td>
        </tr>
        <tr>
            <td>小华</td>
            <td>19</td>
            <td>高二</td>
        </tr>
        <tr>
            <td></td>
            <!-- colspan横向合并   rowspan表示纵向合并 -->
            <td colspan="2">合计人数</td>
        </tr>
    </table>

<thead><tbody><tfoot>的使用

    <table class="tablepart" border="1" align="center">
        <!-- 使用这三部分，即使顺序打乱了，也还是表格的形式 头部还是头部，底部还是底部-->
        <thead>
            <th>头部</th>
            <th>头部</th>
        </thead>
        <tbody>
            <tr>
                <td>主体</td>
                <td>主体</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">底部</td>
            </tr>
        </tfoot>
    </table>

表格样式设置

        table{
            width: 50%;
            /* 设置边框合并 */
            border-collapse:collapse ;
        }
        /* 隔行变色 */
        tr:nth-child(2n){
            background-color: aquamarine;
        }
        /*
        注意：如果表格未使用tbody，直接使用的tr，浏览器慧自动创建tbody，并且将tr都存到tbody中
        此时table就不是tr的父元素，table > tr 这种形式选择不到tr
        tbody才是tr的父元素 tbody > tr
        */
        .tablepart{
            margin-top: 100px;
            background-color: #bfa;

        }
        .tablepart td,th{
            height: 50px;
            /* vertical-align: middle; */
        }
        .tablepart tr td{
            /* 默认情况下，内容在td中是垂直居中的 */
            /* vertical-align: middle; */
            text-align: center;

        }
        .tablepart tfoot{
            background-color: antiquewhite;
            
        }