1.渐进增强和优雅降级

  • 渐进增强:针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验
  • 优雅降级:一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

2.CSS3选择器(粉色字体才是CSS3新增)

一、层级选择器

  • E>F 子代选择器
  • E+F 匹配紧邻元素E的后面的元素F

  • E~F 选择前面有E元素的每个F元素

    1. <div class="box">这是一个div</div>
    2. <p>第一个p标签</p>
    3. <p>第二个p标签</p>
    4. <p>第三个p标签</p>

    二、属性选择器

  • E[attr]：只使用属性名，但没有确定任何属性值

  • E[attr=”value”]：指定属性名和属性值(值完整)
  • E[attr~=”value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词
  • E[attr^=”value”]：属性值是以value开头的(一部分也可以)
  • E[attr$=”value”]：属性值是以value结束的(一部分也可以)
  • E[attr*=”value”]：属性值中包含了value(一部分也可以)

  • E[attr|=”value”]：属性值是value或者以“value-”开头的值（比如说zh-cn）;

    1. <input type="text" id="txt">
    2. <input type="password">
    3. <div class="box con wrap">box con wrap</div>
    4. <div class="b-box">b-box</div>
    5. <div class="box-1">box-1</div>

    三、伪类选择器

    1.结构性伪类选择器

  • X:first-child 匹配子集的第一个X元素

  • X:last-child 匹配子集的最后一个X元素
  • X:only-child 匹配唯一的子元素
  • X:nth-child(n) 匹配索引值为n的子元素,索引值从1开始
  • X:nth-last-child(n) 从最后一个开始算索引 ```css .wrap>:nth-child(even){ /even代表偶数/ background: red; } .wrap>:nth-child(odd){ /odd代表奇数/ background: yellow; } .wrap>:nth-child(3n){ /代表3的倍数,n从0开始/ background: yellow; } 
  2. - X:first-of-type 匹配同类型兄弟元素中的第一个X元素
  3. - X:last-of-type 匹配同类型兄弟元素中的最后一个X元素
  4. - X:only-of-type 匹配同类型中唯一元素X
  5. - X:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素X
  6. - X:nth-last-of-type(n) 匹配同类型中的倒数第n个兄弟元素X
  10. - X:root匹配文档的根元素
  11. - X:empty匹配没有任何子元素,也没有文本的元素X
  12. ```html
  13. <div class="wrap">
  14.   <h2>第一个h2</h2>
  15.   <p>第一个p标签</p>
  16.   <p>第二个p标签</p>
  17.   <p>第三个p标签</p>
  18.   <h2>第二个h2</h2>
  19.   <p>第四个p标签</p>
  20.   <section>一个区块</section>
  21. </div>

2.目标伪类选择器

  • E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

    3.语言伪类选择器

  • E:lang(language) 指定了lang属性,而且其值为language

    4.UI元素状态伪类选择器

  • E:enabled 匹配（form表单）中处于可用状态的E元素

  • E:disabled 匹配（form表单）中处于不可用状态的E元素

    <!-- disabled代表元素禁用 -->
<input type="text" disabled/>

  • E:checked 匹配（form表单）中处于选中状态的E元素

    input:checked+span{ /*+代表相邻兄弟选择器*/
background: pink;
}

  • E::selection 匹配E元素中被用户选中的部分

    5.否定伪类选择器

  • E:not(s) （IE6-8浏览器不支持）

    • 匹配所有不匹配简单选择符s的元素E

      6.动态伪类选择器

  • E:link 超链接并未被访问过

  • E:visited 超链接已被访问过
  • E:active 元素被激活
  • E:hover 鼠标停留在元素E上
  • E:focus 元素获取焦点
    • 给元素设置轮廓outline: 1px solid blue;
    • 给元素去掉轮廓outline: none;
  • 面试题：love-hate 这个顺序书写动态伪类才能生效
    a:link {
color: #000;
}
a:visited {
color: red;
}
a:hover {
background-color: purple;
}
a:active {
font-size: 30px;
}

3.盒子阴影

  • box-shadow:水平阴影位置 垂直阴影位置 模糊距离 [阴影尺寸] 颜色 [内阴影inset];

    • [] 里面代表可选值
    • 水平阴影位置正值向右移动，负值向左移动
    • 垂直阴影位置正值向下移动，负值向上移动
    • 模糊距离数值越大越模糊
    • 阴影尺寸设置10px后，阴影尺寸会向四周各扩充10px
    • CSS3允许设置多阴影
      • box-shadow:0px 0px 2px #000 , 10px 20px 5px #f00;

        4.文本阴影

  • text-shadow:水平阴影位置 垂直阴影位置 模糊距离 颜色;

5.文本换行相关属性

  • word-wrap
    • 属性值：
      • normal只在允许的断字点换行（浏览器保持默认处理）
      • break-word允许长单词或 URL地址换行到下一行
  • word-break
    • 属性值：
      • break-all直接进行单词内的断句
      • keep-all文本不会换行，只能在半角空格或连字符处换行

文本换行.jpg

6.@font-face字体图标

2021-11-13_151913.jpg

7.背景的新增属性

  • 1.background-origin 背景原点
    • padding-box 背景图像填充框的相对位置(默认值)
    • border-box 背景图像边界框的相对位置
    • content-box 背景图像的相对位置的内容框
  • 2.background-clip 背景裁切
    • border-box 背景被裁剪到边框盒(默认值)
    • padding-box 背景被裁剪到内边距框
    • content-box 背景被裁剪到内容框
  • 3.background-size 背景尺寸
    • cover把背景图像扩展至足够大，完全覆盖背景区域
    • contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
    • 具体数值
    • 百分比
  • 4.多背景属性
    • background:url(),url();
    • 先写的背景图在最后方

8.边框新增属性

  • 1.border-image 图片边框
    • border-image:路径url() 图片边框向内偏移(无单位) 平铺方式;
      • 平铺方式：平铺(repeat)铺满(round)拉伸(stretch)
    • border-image-outset 边框图像区域超出边框的量

borderbg.jpg

  • 2.border-radius 圆角边框
    • border-radius:5px;
    • border-radius: 5px 10px 20px 50px;从左上角开始顺时针设置倒角

6.png

  • border-radius: 30px/15px;倒椭圆形

7.png

  • border-radius:10px 20px 30px 40px/40px 30px 20px 10px;

8.png

9.多列

  • column-count 列数
  • column-gap 间距
  • column-rule 线条

报纸.jpg

10.禁止更改元素尺寸

textarea {
  resize: none;
}

11.渐变

  • 在两个或多个指定的颜色之间显示平稳的过渡
  • 1.线性渐变
    • background:linear-gradient(方向,颜色1,颜色2,…);
    • 方向:
      • 从左到右 to right
      • 从上到下 to bottom
      • 15deg 渐变方向与垂直方向的夹角
  • 2.径向渐变
    • background:radial-gradient(颜色1,颜色2,…)

  • 3.重复线性渐变

          `background:repeating-linear-gradient(red 0% ,yellow 20%);`

  • 4.重复径向渐变

          `background: repeating-radial-gradient(red 0% ,yellow 20%);`

12.浏览器前缀

  • -moz- / 火狐等使用Mozilla浏览器引擎的浏览器 /
  • -webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
  • -o- / Opera浏览器(早期) /
  • -ms- / Internet Explorer/ ```css .box { background: linear-gradient(15deg,red,yellow); background: -webkit-linear-gradient(15deg,red,yellow); background: -moz-linear-gradient(15deg,red,yellow); background: -ms-linear-gradient(15deg,red,yellow); background: -o-linear-gradient(15deg,red,yellow); }

.box { transition:all 1s; -webkit-transition:all 1s; -moz-transition:all 1s; -ms-transition:all 1s; -o-transition:all 1s; } ```