一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

css3

常用选择器

• 元素选择器

  • p{ }、h1{ }、span{}

• id选择器

  • id{ }

• 类选择器

  • .class{ }

• 通配选择器（所有元素都选中）

  • *{ }

复合选择器

• 交集选择器

  • div class="red"

    p class="red"

    div.red{ }

• 选择器分组（并集选择器）

  • h1,span,p,h2{ }

关系选择器

• 父元素
  • 直接包含子元素的叫父元素
• 子元素
  • 直接被父元素包含是子元素
• 祖先元素
  • 直接或间接包含后代元素的叫祖先元素
  • 一个元素的父元素也是它的祖先元素
• 后代元素
  • 直接或间接被祖先元素包含的元素叫做后代元素
  • 子元素也是后代元素
• 兄弟元素
  • 拥有相同父元素的元素是兄弟元素

子元素选择器

• 选中指定父元素的指定子元素

• 父元素>子元素

  • div>span{ }

后代选择器

• 选中指定元素的指定后代元素

• 语法 ：祖先（空格）后代

  • div span{ }(div内的所有span元素)

兄弟选择器

• 选择下一个兄弟

• 语法：前一个 + 后一个

  • p + span{ }(选择p下面一个span)

• 选择下边所有的兄弟

• 语法：前一个 ~ 后一个

  • p ~ span{ }（下面的所有span）

属性选择器

• 选择含有指定属性的元素

  • p title= "1 abc "

  • p title= "abc "

  • p title= " 2 abcdef"

    ​ p[title]{ }(则会将p全选)

    ​ p[title="abc"]{ }(选中title为abc的p标签)

    ​ p[title ^= "abc"]{ }(选中以abc开头的p标签)

    ​ p[title $="abc"]{ }(选中以abc结尾的p标签)

    ​ p[title *="abc"]{ }(选中含有abc的p标签)

---

伪类选择器

• 伪类 （第一个元素、被点击的元素、鼠标移到的元素···）

  ​ :first-child第一个子元素

元素 + :last-child最后一个子元素

​ :nth-child()选中第n个子元素

​ :first-of-type

元素 + :last-of-type 不同点：只在同类型里排序

​ :nth-of-type()

• 元素 + :not( )否定类
  • 将符合条件的元素从选择器里去除

伪元素

• 表示页面中一些并不存在的元素（特殊的位置）

  • 伪元素用：：开头
  • ：：first-letter 第一个字母
  • ：：first-line第一行
  • ：：selection表示选中的内容

• ：：before 元素的开始位

• ：：after 元素的结束位

  • before和after必须结合 content属性来使用

    • div::before{

      ​ content:"haha";

      ​ color:blue;

    ​ }

---

盒子模型

由内容区、内边距和边框决定大小

• 内容区（content）

  • 由width跟height决定其大小

• 内边距（padding）

  内容区和边框之间的距离是内边距，影响盒子大小（背景颜色会影响到内边距上）

  语法：padding：10px；其余与边距相似

• 边距（border）

  • border-width（宽度）、border-color（颜色）、border-style（样式）

    • border-width可以指定四个方向宽度（默认3个像素）
    • 四个值：上 右 下 做 、三个值：上 左右 下 、两个值：上下 左右、 一个值： 上下左右

  • 也可以border-top-width（指定上）

    • bottom下、left、right

  • border简写属性

    • border：solid 10px red；（没有顺序要求）

    • border:1px solid transparent ;（颜色可用tran来透明）

• 外边距（margin）

  外边距不影响大小但是影响元素位置

  • 一般margin-top跟-left（正值元素会向下和向右移动）

  • 而设置下和右边距会移动其他元素

    语法：margin：10px；

水平布局

一个元素在其父元素中，水平布局满足 margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区宽度

（若不满足则会自动调节margin-right来满足）

若某个值为auto，则会自动调节那个值来成立等式

• 若设两边距为auto，width为固定值，则会使元素在水平居中

垂直分布

默认情况下父元素的高度被内容撑开

​ 子元素在父元素内容区中排列的

• 若子元素大小超出父元素，则子元素会在父元素中溢出

  溢出时可用overflow属性来设置父元素如何处理子元素

语法 overflow：hidden 溢出内容裁剪不会显示

​ overflow：scroll 生成两个滚动条，通过滚动条查看内容

​ overflow：auto 自动根据需要生成滚动条

行内元素的盒模型

• 行内元素不支持设置高度和宽度

  • 转换为块元素后可以

• display 用来设置元素显示的类型

  ​ 可选：

  ​ inline将元素设置为行内元素

  ​ block将元素设置为块元素

  ​ inline-block将元素设置为行内块元素

  • ​ 行内块 既可以设置宽度和高度又不会独占一行

    ​ table将元素设置为一个表格

    none 元素不在页面中显示

• visibility 用来设置元素显示状态

  • visible 默认值，元素在页面正常显示

  • hidden 元素在页面中隐藏不显示，但是依然占据页面位置

---

html 表格标签

• table（可在里写样式） thead(头部) tbody（主体） tfoot（底部）

• 一般情况下默认写tbody

• 子元素 tr(行元素)

  ​ td(列元素)

  ​ th(头部元素会加粗)

也可以在< td rowspan="x">指定纵向的单元格合并

​ < td colspan="x">指定横向的单元格合并

表格的样式

border-spacing: 指定边框之间的距离

border-collapse:collapse; 设置边框的合并

使用表格垂直居中方式

• 将元素设置为单元格
  • display:table-cell;
• 然后设置居中
  • vertical-align:midden;

表单的介绍(form)

用form建立标签

< form action="xxx（要提交的服务器地址）">

文本框（要将数据提交到服务器中，要指定一个name）

< input type="text" name="username">

密码框

< input type="password" name="username">

单选按钮(必须指定value 然后返回数据)

< input type="radio" name="xx" value="a" checked(默认选中状态)>

多选框

< input type = "checkbox">

下拉列表

< select name="xx">

<  option  value="xx"><  /option>

​ < option selected(默认选中) value="xx">< /option>

提交按钮

< input type="submit " value="xx">

重置按钮

< input type="reset" >

普通按钮

< input type="button" value="xx">

< button type ="xx">内容< /button>

又有结束标签可在中间添加东西

input 是自结束标签

表单补充

• autocomplete = "off"关闭自动补全

• readonly 将表单设置为只读，数据提交

• disabled 将表单设置为禁用 ， 数据不会提交

• autofocus 设置表单项自动获取光标

  ​ < input type="text" name="xxx" 可选值>

---

css 背景元素

background-image：url（“ 地址”）

• 设置背景图片

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

  • repeat 默认，背景沿着x，y双方向重复
  • repeat-x，repeat-y ，沿x轴，y轴重复
  • no-repeat 不重复

background-positon（定位）

• background-position ： auto auto；
  • 通过 top left right bottom center 调整位置
  • 也可以通过 偏移量调整水平 垂直方向变量

background - clip（背景裁剪）

可选值：

​ border-box 默认值 ，背景出现在边框下边

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

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

background - origin（背景原点）

可选值：

​ padding-box 默认值， position 从内边距开始计算

​ content-box 背景图片从内容区开始计算

​ border-box 背景图片从边框开始计算

background - size （背景大小）

• background - size: 宽度 高度

  ​ 可选值

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

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

background - attachment（图片是否随元素移动）

​ 可选值：

​ scroll 默认值图片跟随元素移动

​ fixed 背景固定在页面不随元素移动

background 的简写属性

注意事项：

​ size 必须写在position 的后边，并用/隔开 center center /contain

​ orgin 和 clip 两个样式 orgin 要写在clip 前边

过渡（transition）

• transition-property：指定要执行的过渡属性

• 属性不写默认是all

  多个属性用，隔开

  如果所有属性都需要过渡，则使用all关键字

  大部分都支持过渡效果，注意需要从有效值到有效值

  transition-property： height ， width；

• transition-duration：指定过渡的持续时间

• transition-timing-function：过渡的时序函数

  transition-timing-function:ease;（默认）

  linear（匀速运动）、ease-in（加速运动）、ease-out（减速运动）

  cubic-bezier（）贝塞尔函数指定路线

• transition-timing-function：steps（）分布执行过渡效果

  • (2,end)默认值 2秒一个步骤，（2，start）立马开始第一步

• transition-delay 过渡效果的延迟，等待一段时间后执行

• transition 可以同时设置所有属性，要写延迟的话，则第一个是持续时间

---

动画

@keyframe name{

​ from{ 开始的位置也可以用0%}

​ to{ 结束的位置也可以用100%}

}

动画属性

• animation-name:name;当前元素生效的关键帧名字

• animation-duration: 4s; 动画的执行时间

• animation-delay：Xs; 动画的延迟时间

• animation-timing-function：ease; 过渡的时序函数

• animation-iteration-count：（xx次）或者inifinite(无限次);

• animation-direction:normal;默认从from到to

  • reverse 从to到from 、alternate从from到to，然后从to到from

• animation-play-state: running；默认开，paused动画暂停

• animation-fill-mode:none;默认动画执行完后回到原点

  • forwards 动画执行完后会停止在动画结束位置
  • backwards 动画延时等待时，元素会处于开始位置
  • both 结合了 forwards 和 backwards

• animation的简写属性与过渡一样

• white-space 设置网页如何处理空白

• ​ 可选值：

  • ​ normal正常
  • nowrap 不换行
  • pre 保留空白

css 文本

若想达到隐藏一段文字的内容到某位置并显示省略号

写法

.box{

​ width:200px;

​ white-space:nowrap;(文本全放一行不换行)

​ overflow:hidden;（多的裁剪）

​ text-overflow:ellipsis;(多的文本隐藏起来变省略号)

}

解决边框撑起图片的问题

用vertical-align:bottom;(将默认基线对齐改成底部对齐)

line-height

行间距 = 行高 — 字体大小

子元素设置为父元素的同样高度大小能使元素垂直居中

---

css 字体族

字体相关样式

• color
• font-size(相关单位)
  • em相当于当前元素的一个font-size
  • rem相对于根元素的一个font-size

font-family 字体族（字体的格式）

• 可选值
  • serif 衬线字体
  • sans-serif 非衬线字体
  • monospace 等宽字体
• font-family简写样式
  • font-family:" Courier New",Courier,XXX(字体生效时优先第一个，逗号隔开)

font-face

• font-family:"myfont";（指定字体的名字）
• src：url（‘路径’）；（服务器的字体路径

---

图标字体

• 图标字体（iconfont）
• 在网页中经常需要使用一些图标，可以通过图片来引入图标
  • 但是图片大小本身比较大，并且非常的不灵活
• 使用在使用图标时，我们还可以将图标直接设置为字体
  • 然后用font-face 的形式对字体进行引入，就可以用字体的形式使用图标

fontawesome的使用

• 将all.css引入到网页中
• link rel="stylesheet" href="路径"

使用图标字体

• 直接用类使用class = "fas fa-bell"(只有fas跟fab两个能用)

• 通过伪元素为一堆元素设置图标字体

  • 1、在zeal中找到对应的字体编码

  • 2、设置字体的样式

    • fas
    • font-family:"Font Awesome 5 free";
    • font-weight:900;
    • fab
    • font-family:"Font Awesome 5 Brands";

  例如 li::before{

  ​ content:"\（对应编码)"

  ​ font-family:"XXX";

  ​ font-weight:900;

  }

• 使用实体来设置图标字体

  &x（实体编码）

• span class="fas(fab)" &x(编码)

flex (弹性盒、伸缩盒)

• css中可以代替浮动的一种页面布局。元素可以跟随页面大小而改变

弹性容器上的样式

一、 flex-direction

指定容器中的元素的排列方式

​ 可选值：row 默认值，（水平左到右）

​ row-reverse 反方向（右到左）

​ column 纵向排列（自上向下）

​ column-reverse 反方向（自下向上）

​ 主轴：弹性元素的排列方向叫主轴

​ 侧轴：与主轴垂直方向的称为侧轴

三、 flex-wrap：

设置弹性元素是否在弹性容器中自动换行

​ 可选值： nowrap 默认值，元素不会自动换行

​ wrap 元素沿着辅轴方向自动换行

​ wrap-reverse 元素沿这辅轴反方向换行

flex-flow：wrap 和 direction 的简写属性

​ flex-flow：row wrap ；

四、justify-content

分配主轴上的空白空间

​ 可选值： flex-start 元素沿着主轴起边排列

​ flex-end 元素沿着主轴终边排列

​ center 元素居中排列

​ space-around 空白分布到元素两侧

​ space-between 空白均价分布到元素间

​ space-evenly 空白分布到元素单侧

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0fG9ZBob-1645018500704)(C:\Users\winches\Desktop\学习笔记\html + css\img\justify-content.png)]

五、align-items

元素在辅轴上的分布

​ 可选值： stretch 默认值，元素的长度设置为相同值

​ flex-start 元素不拉伸，沿着辅轴起边对齐

​ flex-end 沿着辅轴的终边对齐

​ center 居中对齐

​ baseline 基线对齐

align-content：

辅轴空白的分布

​ space-between 空白到两侧

​ align-self 用来覆盖当前元素上的align-items

** align-self**

给单独的元素设置样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nPfn0Up8-1645018500706)(C:\Users\winches\Desktop\学习笔记\html + css\img\align-self.png)]

弹性元素的样式

二、 flex-grow

指定弹性元素的伸展的系数

容器的宽度为400px, 子项1的占用的基础空间(flex-basis)为50px，子项2占用的基础空间是70px，子项3占用基础空间是100px，剩余空间为 400-50-70-100 = 180px。 其中子项1的flex-grow: 0(未设置默认为0)， 子项2flex-grow: 2，子项3flex-grow: 1，剩余空间分成3份，子项2占2份(120px)，子项3占1份(60px)。所以 子项1真实的占用空间为: 50+0 = 50px， 子项2真实的占用空间为: 70+120 = 190px， 子项3真实的占用空间为: 100+60 = 160px。

​ 父元素右剩余空间，子元素如何排列

flex-shrink

指定弹性元素的收缩系数

用来“吸收”超出的空间

flex-basis

指定的是元素在主轴上的基础长度

flex-basis 用于设置子项的占用空间。如果设置了值，则子项占用的空间为设置的值；如果没设置或者为 auto，那子项的空间为width/height 的值。

order

决定弹性元素的排列的顺序

---

css 定位（posion）

• 定位可以将元素摆放到页面的任意位置

• 使用posion属性将元素设置定位

  语法posion：可选值

  ​ static 默认值 没开启时元素是静止的

  ​ relative 开启元素相对定位

  ​ absolution 开启元素绝对定位

  ​ sticky 开启元素的粘滞定位

  ​ fixed 开启固定定位

相对定位（relative）

• 特点

  1、元素开启相对定位后，不设置偏移量元素不会发生任何变化

  2、相对定位是参照于元素在文档流重点位置来定位的

  3、相对定位会提升元素的层级

  4、相对定位不会使元素脱离文档流

  5、相对定位不会改变元素的性质，块还是块，行内还是行内

绝对定位（absolution）

• 特点

  1、开启绝对定位后，不设置偏移量元素位置不会发生改变

  2、开启绝对定位后，元素会从文档流中脱离

  3、绝对定位会改变元素的性质，行内变块，块的高度被内容撑开

  4、绝对定位提升元素一个层级

  5、绝对定元素使相对于其包含块进行定位的

包含块

• 包含块就是当前元素的祖先块元素（最近的父元素）

绝对定位的包含块

• 包含块就是离它最近的开启了定位的祖先元素
  • 如果所有祖先元素都没开启定位则根元素就是它的包含块
• html（根元素、初始包含块）

固定定位（fixed）

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

粘滞定位（sticky）

• 粘滞定位特点于相对定位特点一样
• 不同的使粘滞定位可以在元素到达某个位置时固定
  • 例如一开始在下面，后来拖动网页向下后元素固定在某位置

绝对元素的布局

• 当我们开启绝对元素后

• 水平方向布局等式就需要添加left和right两个值

left + margin-left + border-left + padding-left + width

padding-right + border-right + margin-right + right =父元素宽

• 当9个值发生过度约束（未达到等式）则自动调整right

• 若有auto，则自动调整auto元素来满足

  • 可设置auto的值margin width left right

  • left和right默认时auto，如果不设置left和right则自动调整这两个值

垂直分布布局

同样9个多加一个 top 和bottom

若left和right为0，margin为auto则水平居中

若top和bottom为0，margin为auto则垂直居中

元素的层级

开启了定位元素，可以用z-index属性来指定元素的层级

• z-index作为一个整数参数，值越大层级越高越优先显示

  例如 ：z - index:3;用法

---

浮动

通过浮动可以使一个元素使其向父元素的左侧或右侧移动

• 用float属性设置
  • 可选值
    • none 默认 不浮动
    • left 向左浮动
    • right 向右浮动

！元素设置浮动后，水平布局等式不需要强制成立

• 元素设置浮动后，会从文档流脱离，不占用文档流位置，
  • 所以元素下标的文档流中的元素辉自动向上移动

浮动的特点

-- 1.浮动元素辉完全脱离文档流，不占用文档流位置

-- 2.设置浮动后元素会向其父元素向左或向右移动

-- 3.浮动元素不会从父元素移出

-- 4.浮动元素向左或向右时，不会超过它前面的其他浮动元素

-- 5.浮动元素不会超过它前边的浮动的兄弟，最多就是和它一样高

浮动的其他特点

• 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围

脱离文档流的特点：

块元素：

​ 1.块元素不在独占页面的一行

​ 2.脱离文档流一会，块元素的宽度和高度默认被内容撑开

行内元素：

​ 行内元素脱离文档流直接变成块元素，特点和块元素一样

！脱离文档流后，不需要区分块和行内元素

Clear 消除浮动影响

• 可选值：
  • left 清除左侧浮动元素对当前元素的影响
  • right清楚右侧浮动元素对当前元素的影响
  • both清楚两侧中最大影响的那侧
• 原理：
  • 设置清楚浮动后，浏览器会自动为元素加上一个外边距 以使其位置不受浮动元素影响（外边距查看不到）

使用伪元素解决高度塌陷问题

当子元素浮动，父元素高度塌陷后

这时在父元素中添加一个：：after伪元素

• (父元素)::after{

​ content:" ";

​ display:block; (不加这个的话伪元素默认为行内元素，不能跑到子元素后面)

​ clear:both;

}

处理外边距重合问题

解决子元素与父元素重合外边距一起移动问题：

• 在父元素中设置：：before

  • (父元素)：：before{

    ​ content:" ";

    ​ display:table;

    }

clearfix这个样式可以解决 高度塌陷和外边距重合问题

.clearfix::before,

.clearfix::after{

​ content:" ";

​ display:table;

​ clear:both;

}

用法：