面试中的CSS.md

面试中的CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

盒模型

盒模型由 margin + border + padding + content 四个属性组成，分为两种：W3C的标准盒模型和IE盒模型。

W3C的标准盒模型：width = content，不包含 border + padding

IE盒模型：width = border + padding + content

相互转换：box-sizing: content-box 是W3C盒模型，box-sizing: border-box 是IE盒模型

垂直居中

<div class="outer">
    <div class="inner"></div>
</div>

方法一：flex，justify-content: center;align-items: center

方法二：position + transform, 宽高未知

方法三：position + margin（负），宽高已知

方法四：子盒子position: absolute;top: 0; right: 0;bottom: 0;left: 0;margin:auto

参考示例

三栏布局

<div class="container">
    <div class="left">left</div>   
    <div class="right">right</div>
     <div class="main">main</div>
</div>

方法一：flex，main放中间直接设置flex:1，放最后需要设置order

方法二：父盒子相对定位，左右绝对定位，main设置main: 0 200px

方法三：左盒子左浮动，右盒子有浮动，main设置main: 0 200px

参考示例

其他布局

权重

CSS基本选择器包含ID选择器、类选择器、标签选择器、通配符选择器。正常情况下，!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器。

权重取值：

内联样式，权值为1000
ID选择器，权值为0100
类，伪类和属性选择器，权值为0010
标签选择器和伪元素选择器，权值为0001
通配符、子选择器、相邻选择器等，权值为0000
继承的样式没有权值

如果权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

如果层级相同，继续往后比较，如果层级不同，层级高的权重大，不论低层级有多少个选择器。

BFC

BFC（Block Formatting Context）块格式化上下文。BFC元素特性，内部子元素不会影响到外部元素。

什么时候会触发BFC：

根元素(html)
float的值不为none
overflow的值为auto,scroll或hidden
position的值不为relative和static
display的值为table-cell(表格单元格), table-caption(表格标题), inline-block(行内块元素)中的任何一个
匿名表格单元格元素（元素的 display为 table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）

BFC布局规则:

内部的box会在垂直方向，一个接一个的放置
box垂直方向的距离有margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。每个元素的左外边距与包含块的左边界相接触，即使浮动元素也是如此。
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC能解决的问题:

父元素塌陷
外边距重叠
清除浮动

BFC与自适应布局：

overflow:auto/hidden IE7+
display:inline-block IE6/IE7
display:table-cell IE8+

参考文章：CSS深入理解流体特性和BFC特性下多栏自适应布局

清除浮动的方法

清除浮动主要是为了防止父元素塌陷，常用的是给父元素添加 clearfix 类，然后设置.clearfix::before和.clearfix::after。

方法一： clearfix，类似传统的添加一个额外标签，设置clear:both;

.clearfix::after{
  content: "";
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
}

// 或者
.clearfix {
  // 由于IE6-7不支持:after，使用 zoom:1 触发 hasLayout
  *zoom: 1;
}
.clearfix:after {
  content: ""; 
  display: table; 
  clear: both;
}

方法二：触发父盒子BFC，overflow:hidden|auto|scroll

方法三：使用before和after双伪元素清除浮动

.clearfix::before, .clearfix::after { 
  content:"";
  display:table;
}
.clearfix::after {
  clear:both;
}
.clearfix {
  *zoom:1;
}

Flex布局和Grid布局

Grid布局和Flex布局

定位

position的属性：

absolute 绝对定位，相对于 static 定位以外的第一个父元素进行定位
relative 相对定位，相对于其自身正常位置进行定位
fixed 固定定位，相对于浏览器窗口进行定位
static 默认值。没有定位，元素出现在正常的流中
inherit 规定应该从父元素继承 position 属性的值

CSS3中新增了一个 position:sticky 属性，该属性的作用类似 position:relative 和 position:fixed的结合。元素在设置值之前为相对定位，之后为固定定位。必须指定 top, right, bottom 或 left 四个其中之一，才可使粘性定位生效。

自适应

方法一：利用CSS3的vw和vh单位

.item {
  width: 10vw;
  height: 10vh;
}

方法二：利用margin或者padding的百分比，参照父元素的width属性

.item {
    width: 10%;
    padding-bottom: 10%;
    height: 0;
    background: #5091cd;
}

三角形

方法一：使用border生成三角形

.triangle {
  border-color: transparent transparent #f9a541 transparent;
  border-width: 60px;
  border-style: solid;
}

方法二：利用clip-path

.triangle {
  /* 将坐标(0,0),(0,80),(80,0)连成一个三角形 */
  clip-path: polygon(0px 0px, 0px 80px, 80px 0px);
  transform: rotate(225deg);
}

CSS3新特性

CSS3 选择器：

兄弟选择器（E~F）：选择E元素所有兄弟元素F
属性选择器：E[att^="val"]、E[att$="val"]、E[att*="val"]
伪类选择器：
- E:not(s)匹配不含有s选择符的元素E
- E:root匹配E元素在文档的根元素
- E:last-child匹配父元素的最后一个子元素E
- E:only-child匹配父元素仅有的一个子元素E
- E:nth-child(n)匹配父元素的第n个子元素E
- E:nth-last-child(n)匹配父元素的倒数第n个子元素E
- E:first-of-type匹配同类型中的第一个同级兄弟元素E
- E:last-of-type匹配同类型中的最后一个同级兄弟元素E
- E:only-of-type匹配同类型中的唯一的一个同级兄弟元素E
- E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E
- E:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素E
- E:empty匹配没有任何子元素（包括text节点）的元素E
- E:checked匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox)
- E:enabled匹配用户界面上处于可用状态的元素E
- E:disabled匹配用户界面上处于禁用状态的元素E
- E:target匹配相关URL指向的E元素
伪元素选择器：
- E::first-letter设置第一个字符的样式
- E::first-line设置第一行的样式
- E::selection设置对象被选择时的颜色
- E::placeholder设置对象文字占位符的样式（input）
- E::before设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
- E::after设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

边框：

border-radius设置或检索对象使用圆角边框
border-image：url路径边框背景图的分割方式边框厚度边框背景图的扩展边框图像的平铺方式

盒子阴影：

box-shadow：水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内/外阴影

盒模型：

box-sizing：content-box，盒子大小为 width + padding + border
box-sizing：border-box ， padding 和 border 是包含到width里面的

过渡：

transition：要过渡的属性 + 花费时间 + 运动曲线 + 何时开始

变形：

transform：translate(x,y) scale(x, y) rotate(deg) skew(deg, deg)设置变换属性
transform-origin: left top;设置圆点
perspective: 300px透视
backface-visibility: visible | hidden;设置当元素不面向屏幕时是否可见

动画：

animation:动画名称花费时间运动曲线何时开始播放次数是否反方向;
animation-play-state: paused;暂停动画
animation-fill-mode : none | forwards | backwards | both;规定动画在播放之前或之后，其动画效果是否可见
animation-direction: alternate;动画应该轮流反向播放
animation-iteration-count: infinite;无限循环播放

文字阴影：

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

背景：

background: linear-gradient(渐变的起始位置，起始颜色，结束颜色);线性渐变
background: radial-gradient(起始位置, 开始颜色, 中间颜色, 结束颜色);
background-size: x y | contain | cover;背景缩放
background-clip: border-box | padding-box | content-box | text背景裁剪
background-origin: border-box | padding-box | content-box背景图像参考原点

文本：

word-break: normal | keep-all | break-all;换行方式
word-wrap：normal | break-word单词内部是否允许断行
text-overflow：clip | ellipsis文字溢出处理方式，常与overflow:hidden;连用

用户界面：

resize：none | both | horizontal | vertical设置是否允许用户调整元素大小
user-select：none | text | all | element文本是否能被选中

其他

1.vertical-align 为什么没有绝对垂直居中？

vertical-align:middle 只对行内元素生效，不对块元素生效，即使设置了display：inline-block，但对象的确呈内联元素，但内容还是呈块元素展示，所以需要转换成table。

<!-- 方法一，直接设置成table -->
<div id="parent"><div id="child"></div></div>
<!--
#parent{
  display:table-cell;
  vertical-align:middle
}
-->

<!-- 方法二，连个子盒子形成参照物，相互设置vertical-align，参照的盒子高度要设置100% -->
<div id="wapper">
  <div id="box"></div>
  <div id="box2"></div>
</div>
<!--
#box {
  display: inline-block;
  vertical-align: middle;
}
#box2 {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
-->

参考文章：

posted @ 2019-11-16 15:17 东夋壬阅读(239) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部