ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

【考前必看四】面试前夕知识点梳理之CSS3

2019-09-08 21:03:15  阅读：162  来源： 互联网

标签：CSS3 知识点 必看 flex 元素 选择器 设置 浮动 display


四、CSS3

1. CSS3新增的特性有哪些？移除的元素有哪些？

新增的特性：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面

移除的元素：(纯表现的元素) basefont，big，center，font，s，strike，tt，u

2. 选择器

  • ID 选择器（#id）
  • 类选择器（.class）、属性选择器（E[attr]...）、伪类选择器（:）
  • 元素选择器(标签选择器)（E）、关系选择器(层次选择器)、伪元素选择器（::）
  • 通配符选择器（*）

动态伪类选择器： E:link、E:visited、E:acitved、E:hover、E:focus

UI元素状态伪类选择器：E:checked、E:enabled、E:disabled

结构伪类选择器：E:nth-child(n)、E:nth-of-type(n)、E:empty、E:root

              E F:nth-child(n) 和 E F:nth-of-type(n) 的区别：

              E F:nth-child(n) 是指元素 E 的第 n 个子元素，如果同时该子元素是元素F，则选中；否则选不中。

              E F:nth-of-type(n) 是指元素 E 的第 n 个 F 子元素。

              n 可以是（odd、even）、（2n+1、2n+2）、（n+5、-n+5）、（3n）等。

否定伪类选择器：E:not(F)

关系选择器（层次选择器）：E  F | E>F | E+F | E~F

伪元素选择器：::first-letter、::first-line、::before、::after、::selection

3. 样式优先级

  • CSS 优先规则1：最近的祖先样式比其他祖先样式优先级高。
  • CSS 优先规则2："直接样式"比"祖先样式"优先级高。
  • CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。
  • CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
  • CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。

4. Position定位

(1) Position 属性的五个值：absolute、fixed、relative、static、sticky。

(2) absolute

  • absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
  • absolute 定位使元素的位置与文档流无关，因此不占据空间。
  • absolute 定位的元素和其他元素重叠。

(3) fixed

  • fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
  • fixed 定位使元素的位置与文档流无关，因此不占据空间。
  • fixed 定位的元素和其他元素重叠。

    我们可以发现 fixed 与 absolute 只是 第一条 不同。

(4) relative

  • relative 相对定位元素的定位是相对其正常位置。
  • 移动相对定位元素，但它原本所占的空间不会改变。
  • 相对定位元素经常被用来作为绝对定位元素的容器块。

(5) static

  • HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
  • 静态定位的元素不会受到 top, bottom, left, right 影响。其他四个值则都会受  top, bottom, left, right 影响。
  • 静态定位的元素会受到 margin, padding 影响。

(6) sticky

  • sticky 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
  • 粘性定位元素的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。
  • 粘性元素的定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

5. 水平垂直居中

水平居中：

  • 使用 text-align: center
  • 使用 margin: 0 auto （条件：必须设置元素的宽度；必须是块级元素）
  • 使用 position 和 transform：把父元素设置为：position: relative；把子元素设置为：position: absolute；left: 50%；transform: translateX(-50%)
  • 使用 flexbox 布局：把父元素设置为：display: flex；justify-content: center

垂直居中：

  • 使用 padding：任意值px  0 （条件：没有设置高度）
  • 使用 line-height：
// 单行 —— 把父元素的 line-height 属性值与 height 属性值设置为相等
// 多行 ——  把父元素的 line-height 属性值与 height 属性值设置为相等，并添加元素设置为：
line-height: 1.5;
display: inline-block;
vertical-align: middle
  • 使用 position 和 transform：把父元素设置为：position: relative；把子元素设置为：position: absolute；top: 50%；transform: translateY(-50%)
  • 使用 flexbox 布局：把父元素设置为：display: flex；align-items: center
  • 使用 table：把父元素设置为：display: table；把子元素设置为：display: table-cell； vertical-align: middle；

水平垂直居中：

  • padding + text-align: center
  • line-height + text-align: center
  • position 和 transform：把父元素设置为：position: relative；把子元素设置为：position: absolute；left: 50%；top: 50%；transform: translate(-50%)
  • flexbox：把父元素设置为：display: flex；justify-content: center；align-items: center
  • table：把父元素设置为：display: table； text-align: center；把子元素设置为：display: table-cell； vertical-align: middle；

6. Flex布局

  • 任何一个容器都可以指定为 Flex 布局：{ display: flex；}
  • 行内元素也可以使用 Flex 布局：{ display: inline-flex；}
  • Webkit 内核的浏览器，必须加上-webkit 前缀：{ display: -webkit-flex； /* Safari */ }
  • 设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

容器的属性

  属性名称 属性描述 可选值 默认值
1

flex-direction

 主轴方向（即项目的排列方向） row | row-reverse | column | column-reverse row
2

flex-wrap

 换行方式（默认情况下不换行） nowrap | wrap | wrap-reverse nowrap
3

flex-flow

 flex-direction 和 flex-wrap 的简写 <flex-direction> || <flex-wrap> row nowrap
4

justify-content

 项目在主轴上的对齐方式 flex-start | flex-end | center | space-between | space-around flex-start
5

align-items

 项目在交叉轴上对齐方式 flex-start | flex-end | center | baseline | stretch stretch
6

align-content

 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 flex-start | flex-end | center | space-between | space-around | stretch stretch

项目的属性

  属性名称 属性描述 可选值 默认值
1 order 项目的排列顺序。数值越小，排列越靠前。 <integer>，取整数 0
2 flex-grow 项目的放大比例 <number>，负值无效，可以有小数点 0，即如果存在剩余空间，也不放大。
3

flex-shrink

 项目的缩小比例 <number>，负值无效，可以有小数点 1，即如果空间不足，该项目将缩小。
4

flex-basis

项目占据的主轴空间；它可以设为跟 width 或 height 属性一样的值（比如350px），则项目将占据固定空间。

 <length> | auto auto，即项目的本来大小。
5

flex

 flex-grow、flex-shrink 和 flex-basis 的简写 none | [ <flex-grow> <flex-shrink> ? || <flex-basis> ]

0 1 auto，后两个属性可选。

两个快捷值：

auto(1 1 auto)、none(0 0 auto)
6

align-self

 允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。 auto | flex-start | flex-end | center | baseline | stretch auto，即表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

7. 行内元素、行内块元素和块元素

行内元素：<span>、<a>、<br>、<input>、<img>

  • 设置宽高无效
  • 对 margin 设置的左右方向有效，上下无效；对 padding 设置的上下左右都有效，即会撑大空间
  • 不会自动进行换行
  • 多个行内元素标签写在一起，默认排列方式为从左到右

行内块元素：

  • 设置宽高有效
  • 对 margin 和 padding 设置的上下左右均有效
  • 不会自动进行换行
  • 多个行内块元素标签写在一起，默认排列方式为从左到右

块级元素：<div>、<p>、<ul>、<ol>、<li>、<h1>...、<hr>

  • 设置宽高有效
  • 对 margin 和 padding 设置的上下左右均有效
  • 可以自动进行换行
  • 多个块级元素标签写在一起，默认排列方式为从上至下

三者的转换：

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

8. 浮动和清除浮动

相关概念:

  • 浮动的定义：浮动是指让元素脱离标准流(文档流)，漂浮在标准流之上，和标准流不是一个层次。而且，浮动元素会按照指定的方向发生移动，遇到父元素边界或者相邻的浮动元素时停下来。注意：浮动元素设置宽高有效。
  • 实现浮动的途径：float、absolute、fixed 。
  • 清除浮动主要针对 float 产生的浮动元素。
  • 高度塌陷：当浮动元素的父元素高度自适应（不设置高度时），父元素会发生高度塌陷。

清除浮动的方法:

（1）使用 clear：{ clear:both } 

  •  缺点：会增加无意义的标签。

（2）使用 br：在浮动元素下方添加：<br clear="both" />

  • 缺点：不符合工作中：结构、样式、行为，三者分离的要求。

（3）给浮动元素的父元素设置高度

  •   缺点：当浮动元素高度不确定的时候不适用。

（4）让浮动元素的父元素也浮动

  • 缺点：需要给每个浮动元素的父元素添加浮动，而且浮动多了容易出现问题。

（5）把浮动元素的父元素设置成 { display：inline-block }

  • 缺点：父元素的 margin 左右、auto 失效，无法使用 { margin: 0 auto } 居中了。

（6）把浮动元素的父元素设置成 { overflow:hidden }，兼容IE6 IE7：{ zoom:1 }

（7）给浮动元素的父元素使用 :after 伪类，兼容IE6 IE7：{ zoom:1 }（推荐）

选择父元素 :after { 
    content:".";
    clear:both;         
    display:block;        
    height:0;                        
    visibility:hidden;
}
 
注意：
:after伪类 在元素内部末尾添加内容
:after { content: "添加的内容"; } IE6 IE7 下不兼容

注意：第（1）、（2）种方法，浮动元素会占据文档流的空间；但后面的五种方法不会，只是解决了高度坍塌的问题。 

结论：

  • 如果A元素是浮动元素，且它的上一个元素是标准流中的元素，那么A元素的相对垂直位置不会改变，也就是说A元素的顶部总是和上一个元素的底部对齐。
  • 如果A元素是浮动元素，且它的上一个元素也是浮动元素，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素就会被挤到下一行)。
  • 清除浮动 (clear) 只能影响使用清除的元素本身，不能影响其他元素。

9. BFC规范

BFC 即 Block Formatting Contexts (块级格式化上下文)，是 W3C 规范中的一个概念。

触发 BFC：只要元素满足下面任一条件即可触发 BFC 特性：

  • body 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position 为 absolute、fixed
  • display 为 flex、inline-flex、inline-block、table-caption、table-cell
  • overflow 为 hidden、auto、scroll (除了 visible 以外的值)

BFC 特性及应用：

  • 同一个BFC下 外边距margin 会发生折叠
  • BFC 可以包含浮动的元素，用来清除浮动：overflow: hidden
  • BFC 可以阻止元素被浮动元素覆盖：overflow: hidden 

实现两列自适应布局：左边为浮动元素，宽度固定；右边为BFC特性：overflow: hidden，宽度自适应。

避免外边距重叠的方法：

方法一：{ overflow: hidden; }  你可以单独设置其中任意一个盒子，也可以两个都设置。

方法二：{ float: left; } 或者 { position: absolute; } 你只能设置第二个盒子。

方法三：{ display: flex; } 或者 { display: table; }  或者 { display: table-caption; } 你可以单独设置其中任意一个盒子，也可以两个都设置。

方法四：{ display: inline-flex; } 或者 { display: inline-block; } 或者 { display: table-cell; } 你只能单独设置其中任意一个盒子。

10. AMD和CMD的区别

AMD（Asynchronous Module Definition）即异步模块化定义，是 RequireJS 在推广过程中对模块定义的规范化产出。

CMD（Common Moudle Definition）即通用模块定义，是 SeaJS 在推广过程中对模块定义的规范化产出。

共同点：AMD和CMD都是 一种框架在推广的过程中对模块定义的规范化产出；而且它们都是异步加载模块。

不同点：

1. RequireJS 在主文件里是将所有的文件同时加载；然而 SeaJS 强调一个文件一个模块。

2. AMD推崇依赖前置，CMD推崇依赖就近。

3. AMD和CMD对依赖模块的执行时机有所不同。

AMD加载完模块后，就立马执行该模块；CMD加载完模块后不会立即执行，而是等遇到require语句的时候再执行。

4. AMD的API默认是一个当多个用，CMD的API严格区分，推崇职责单一。

各自的优点：AMD用户体验好，因为模块提前执行了；CMD性能好，因为只有用户需要的时候才执行。

11. Border边框

简写语法：border：border-width border-style border-color （border-style 是必须的，三个属性的顺序随意）

边框类型：border-style：none | dotted | dashed | solid | double | inherit

对边框的四条边分别设置不同的属性，以style为例：

border-style: solid;
/* 一个值时，表示四条边都是solid类型 */
border-style: solid dotted;
/* 两个值时，第一个值表示上下边框的类型，第二个值表示左右边框的类型 */
border-style: solid dotted dashed;
/* 三个值时，第一个值表示上边框的类型，第二个值表示左右边框的类型，第三个值表示下边框的类型 */
border-style: solid dotted dashed inset;
/* 四个值时，依次代表上右下左边框 */

圆角边框属性：

对边框的四条边分别设置圆角：

border-radius 的值：如果存在反斜杠符号 “/”，“/” 前面的值是设置圆角的水平方向半径，“/”后面的值是设置圆角的垂直方向的半径；如果没有 “/”，则圆角的水平和垂直方向的半径值相等。

border-top-left-radius:
/* 两个值时分别代表圆角的水平半径和垂直半径 */
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:

border-radius 的四个值是按照 top-left、top-right、bottom-right 和 bottom-left 顺序来设置的。

border-radius:{1}设置一个值时，四个圆角的效果一样；
border-radius:{2}设置两个值时，top-left=bottom-right=第一个值，top-right=bottom-left=第二个值；
border-radius:{3}设置三个值时，第一个值设置top-left，第二个值设置top-right和bottom-left，第三个值设置bottom-right；
border-radius:{4}设置四个值是，就按顺序设置样式。

盒子阴影属性：

/*设置盒子一条边的阴影效果*/
box-shadow：none | [ inset x-offset y-offset blur-radius spread-radius color ]
/*设置盒子多条边的阴影效果,用逗号隔开*/
box-shadow：none | [ inset x-offset y-offset blur-radius spread-radius color ],[ inset x-offset y-offset blur-radius spread-radius color ]

12. CSS动画

  • 动画属性：transition、animation(CSS3新增)。
  • animation 可以通过 @keyframes (关键帧) 构建一些 transition 的动画效果。
  • CSS3 一共有八个子属性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode。

举例：

<style> 

    div
    {
        width:100px;
        height:100px;
        background:red;
        position:relative;
        animation:myfirst 5s linear 2s infinite alternate;
    }
 
    @keyframes myfirst
    {
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
        /* 可以使用 from / to 来代替 0% / 100% */    
    }

</style>

13. 渐进增强和优雅降级

渐进增强和优雅降级都是一种开发方式，更是一种设计理念。

渐进增强是指在编写Web页面时，首先保证最基本、最核心的功能实现，并让所有的浏览器（包括旧式、低端的浏览器）都能看到站点的内容；然后再考虑使用高级但非必要的CSS和JavaScript等增强功能，为当前和未来的浏览器提供更好的支持。

优雅降级是指在编写Web页面时，首先必须完整的实现站点的所有内容(包括功能和效果)。然后再为那些无法支持所有功能和效果的浏览器增加候选方案，使之在旧式、低端的浏览器上以某种形式降级体验却不至于完全失效。

14. CSS应用：实现一个三角形

<div class="demo"></div>
<style type="text/css">
    .demo{
        width: 0;
        height: 0;
        border: 40px solid transparent;
        border-top-color: aqua;
    }
</style>

15. Sass 和 Less 的区别

Sass 和 Less 是两种常见的 CSS 预处理器，我们可以把 Sass 和 Less 编辑的样式转换为正常的 CSS 样式。

(1) 主要区别(实现方式)：Less在JS上运行，Sass在Ruby上使用。

Less基于JavaScript，通过npm安装，在客户端处理 ；Sass基于Ruby，需要安装Ruby，在服务器处理。

为了使用Less，我们可以将适用的JavaScript文件上传到服务器或通过脱机编译器编译CSS表。

(2) 编写变量的方式不同。

Sass使用$，而Less使用@。

(3) 在Less中，仅允许循环数值。

在Sass中，我们可以遍历任何类型的数据；但在Less中，我们只能使用递归函数循环数值。

(4) Sass有Compass，Less有Preboot

Sass和Less有可用于集成mixins的扩展（在整个站点中存储和共享CSS声明的能力）。

Sass有适用于mixins的Compass，其中包括所有可用的选项以及未来支持的更新。

Less有Preboot.less，LESS Mixins，LESS Elements，gs和Frameless。Less的软件支持比Sass更加分散，导致许多不同的扩展选项可能不会以相同的方式运行。对于项目，我们可能需要所有列出的扩展以获得与Compass类似的性能。

16. CSS3 2D 和 3D 转换

CSS3转换，通过 transform，我们可以移动，旋转，缩放，和倾斜元素。

2D 转换：translate()、rotate()、scale()、skew()、 matrix()

3D 转换：translate()、rotate()、scale()、matrix()、perspective()

17. display，float，position 三者的优先级

  • 如果 display 的值是 none，则 position 和 float 无效。否则，继续。
  • 如果 position 的值是 absolute 或 fixed，则浮动失效，并且 display 的值 按照 对应表 设置。否则，继续。此时，元素的位置将由 ‘top’，’right’，’bottom’ 和 ‘left’ 属性和该框的包含块确定。
  • 如果 float 的值不是 none，则元素浮动，并且 display 的值 按照 对应表 设置。否则，继续。
  • 如果元素是根元素，display 的值 按照 对应表 设置。否则，继续。
  • 应用指定的 display 特性值。

display的转换对应表

设定值 计算值
inline-table table
inline, run-in, table-row-group, table-column, table-column-group,table-header-group, table-footer-group, table-row, table-cell,table-caption, inline-block block
其他  同设定值

position:absolute 和 float 会隐式的改变 display 的类型

不论之前是什么类型的元素（display:none 除外），只要设置了 position:absolute 或 float，都会让元素以 display:inline-block 的方式显示，可以设置长宽，默认宽度并不会占满父元素，就算是显示的设置 display:inline 或 display:block，仍然无效。 

float 在 IE6 下的 双倍边距bug 就是利用添加 display:inline 来解决的。 

position:relative 并不能够隐式的改变 display 的类型。

END

标签：CSS3,知识点,必看,flex,元素,选择器,设置,浮动,display
来源： https://blog.csdn.net/Dora_5537/article/details/100111272

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有