2020-05-19 20:45 北京邮电大学前端工程师

关注

前端知识汇总-css

1.css画三角形

css-border的原理是三角形！

[CSS绘制三角形—border法] https://www.jianshu.com/p/9a463d50e441

border:5px solid red;

div {
    width: 50px;
    height: 50px;
    border: 40px solid;
    border-color: orange blue red green;
}

当div的高度和宽度变为0 的时候，

这样将某一个border设置为transparent（透明）的时候，就可以成为三角形，可以将对面的边设置为宽度为0,就可以让三角形最小化

div {      width: 0;      height: 0;      border: 40px solid;      border-color: transparent transparent red; }

2.css浮动

css浮动讲解https://www.cnblogs.com/zfquan/p/7793945.html

脱离标准流。

关于文字的环绕：浮动最初的效果是为了文字环绕

如下图所示，红色为div1，蓝色为div2，div1设置了float:left和一定的宽度，使其向左浮动，div2并没有设置浮动，应该就像没有div2一样紧贴在父元素下，向上向左对齐，其实整个div2的作用域就是绿色的部分，但是因为里面是文字，文字默认环绕，所以没有重合到一起。

3.CSS的position

positon的理解

总结： Absolute：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolute后，原来的位置相当于是空的，下面的的元素会来占据。

Relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。

Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。

父 relative/absolute + 子 absolute ------ 子相对于父的top/left，若父元素无position偏移，则会向上找(事件冒泡)，直至body，都没有当然以body为参照物移动。

CSS3新增的sticky属性：相当于是relative和fixed的结合，通过right,top,left,bottom设置阈值，阈值之前为relative，阈值之后为fixed，可以用来设置返回贴顶的栏目

一般情况下：CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？

其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，

一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位

还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位，为什么一般都是用相对定位呢，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的，这样的好处是原来在它周围的其他元素不会因为它的离开而改变位置而使页面乱套，所以用相对定位是非常合适的（如果你另有其他需要，祖先元素绝对定位也不是不可以）

4.题目换成图片

text-indent：100%； overflow:hidden; white-space:nowrap;

把题目的文字替换成为图片,不能直接display:none,这样整个h1不就没了吗,所以只能想办法让文字隐藏,text-indent:100%;表示首行缩进,%表示相对于父元素缩进的百分比,overflow:hidden,缩进之后会往后退,有溢出则隐藏,white-space:nowrap,保证溢出的文字不会换行

5.flex布局

[Flex 布局教程：语法篇] http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

flex:1

当flex只有一个参数的时候：

如果参数没有单位，则表示flex-grow:为1时则平均填满剩余空间

多个项目设置flex,和本身大小没有关系，按照flex后面的数字的比例划分

flex:1 flex:2 flex;3 则分别占据1/6，2/6，3/6

容器:

设置display:flex

兼容：display:-webkit-flex;

行内元素也可以设置：display:inline-flex;

属性：

flex-direction：row | row-reverse | column | column-reverse;
flex-wrap：nowrap | wrap | wrap-reverse;
flex-flow： || ;
justify-content：flex-start | flex-end | center | space-between | space-around;（项目在主轴上的对齐方式。）
align-items：flex-start | flex-end | center | baseline | stretch;（项目在交叉轴上如何对齐）
align-content：flex-start | flex-end | center | space-between | space-around | stretch;（多根轴线的对齐方式）

项目

属性：

order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis： | auto; 定义了在分配多余空间之前，项目占据的主轴空间（main size）。
flex：none | [ ? || ]
align-self：auto | flex-start | flex-end | center | baseline | stretch; 允许单个项目有与其他项目不一样的对齐方式，覆盖align-items属性

6.margin重叠问题

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠

折叠的结果为：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。

解决办法 1）在相邻的两个垂直的div中，选择一个进行行内元素处理（即：将块级div变成行内div display: inline-block;）

2）给其中一个div添加一个父div，并且为这个父div设定边框或者实现overflow：hidden;

7.css清除浮动

[css清除浮动] https://www.cnblogs.com/ForEvErNoME/p/3383539.html

方法一：使用带clear属性的空元素**

在浮动元素后使用一个空元素如，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用或来进行清理。

方法二：使用CSS的overflow属性**

给浮动元素的父元素添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。

css属性设置zoom可以触发hasLayout属性

在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

方法三：给浮动的元素的容器添加浮动**

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理**

什么都不做，给浮动元素后面的元素添加clear属性。

方法五：使用CSS的:after伪元素**

结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

总结**

通过上面的例子，我们不难发现清除浮动的方法可以分成两类：

一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，也就是添加：overflow：hidden；使到该父元素可以包含浮动元素，关于这一点。

8.css的盒子模型

①盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)

②类型： IE 盒子模型、标准 W3C 盒子模型；

③两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content)

④而IE盒模型的宽高是指content+padding+border。

⑤设置盒模型的方式是：设置box-sizing

box-sizing:content-box 标准盒模型

box-sizing:border-box IE盒模型

⑥盒子模型的定位

网页默认的布局方式

浮动

Position定位

标准模式和怪异模式

在css3中新增了box-sizing属性：

当为box-sizing：content-box时，将采取标准模式进行解析计算：

盒子总宽度/高度=width/height+padding+border+margin

.box{     width:100px;     height:100px;     border:10px #ddd solid;     padding:10px;     margin:10px;         box-sizing:border-box; }

当为box-sizing：border-box时，将采取怪异模式解析计算

盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

也即是说 width = 内容区宽度 + padding + border
```
.box{     width:100px;     height:100px;     border:10px #ddd solid;     padding:10px;     margin:10px;         box-sizing:border-box; }
```

当为box-sizing：inherit时，将从父元素来继承box-sizing属性的值

9.BFC 块级格式化上下文

BFC(Block formatting context)：所谓BFC，可直译为“块级格式化上下文”，BFC定义了一块独立的渲染区域，规定了其内部块级元素的渲染规则，其渲染效果不受外界环境的干扰。

BFC定义了如下布局规则：

1.内部的块元素会在垂直方向，一个接一个地放置。 2.块元素垂直方向的距离由margin决定。两个相邻块元素的垂直方向的margin会发生重叠。 3.每个元素的左外边距，与包含块的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 4.BFC的区域不会与float元素的区域重叠。 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 6.计算BFC的高度时，浮动元素也参与计算（可以清除浮动）

那么，在什么情况下，元素的BFC才能生效呢？

根据CSS规范，当给元素添加下列Style属性时，元素成为一个BFC元素。

10.css的常见布局

1.两列布局

[两列布局] https://www.cnblogs.com/qing-5/p/11442906.html

2.三列布局

[三列布局] ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

3.圣杯布局

4.双飞翼布局

[CSS中常见的布局] https://www.cnblogs.com/qing-5/p/11416985.html

相同点：

a、三列布局，中间宽度自适应，两边定宽；

b、中间栏要在浏览器中优先展示渲染； c、允许任意列的高度最高； d、要求只用一个额外的DIV标签； e、要求用最简单的CSS、最少的HACK语句；

不同点：

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的：

也就是三栏全部浮动，左右两栏加上负margin，让其跟中间栏div并排。

不同在于解决 “中间栏div内容不被遮挡” 问题的思路不一样。

5.弹性布局

flex

11.css单位

em

一般情况下，em是参考父级的字体大小来进行换算的。但是，对于长度（length，width，padding或者 margin），这个单位参考的是当前的字体大小来换算的。
```
body {     font-size: 24px;     width: 10em;    /* 10em = 24px * 10 = 240px */ }
```
css的

line-height:1.5 最近的那个子元素的font-size乘上1.5

line-height:150% 100%=1em；

line-height:1.5em 1em等于网页默认字体高度，通常是16px ,1em = 16px .1,5em = 24px;

line-height:15px

1.5：
rem

rem是参考根级字体大小即html中的字体大小来换算的。

需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小，使得 CSS 与 JS 耦合了在一起。
vh和vw

vh和vw都是根据视见区（view port）的百分比来计算的。

    vw : 1vw 等于视口宽度的1%

    vh : 1vh 等于视口高度的1%

    vmin : 选取 vw 和 vh 中最小的那个

    vmax : 选取 vw 和 vh 中最大的那个

来源：前端开发博客

总结：

浏览器的默认字体大小是16px;
百分数和相对单位都会最终被换算成px。因为浏览器只能识别px；
em在用于长度单位的时候，参考的是当前的字体大小而非父级字体（这里很容易混淆）。
以上都是相对单位

12.高度问题

ele.clientWidth = 宽度 + padding

ele.offsetWidth = 宽度 + padding + border

ele.scrollTop = 被卷去的上侧距离

ele.scrollHeight = 自身实际的高度（不包括边框）

13.CSS中first-child和nth-child

first-child：

E:first-child是伪类选择器，

匹配父元素的第一个子元素E：要满足既是第一个元素，又是E元素

从说明可以看出E是你要选择的第一个子元素，而不是父元素。一开始，误以为E:first-child是E的第一个子元素。

E：nth-child(n)

既是E元素，又是属于其父元素的第n个子元素，同时满足两个条件

14.渲染机制：display和visibility

display：none 指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint，相当于被删除

visibility：hidden 指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，绑定在上面的事件不会被触发，

opacity=0 元素不可见但存在，绑定在上面的时间会被触发

15.css选择器优先级问题

权值较大的优先级越高
比较样式时，将对应的选择器权值相加，大的优先级高
权值相同的，根据从上往下的原则，后定义的优先级高
特殊！important，优先级最高

css

外联样式表

内联样式表

内嵌样式表

后面的会覆盖前面的

16.display

默认情况下：

常见的块级元素(自动换行， 可设置高宽 )有：

div,h1-h6,p,pre,ul,ol,li,form,table等

常见的行内元素（无法自动换行，无法设置宽高）有：

a,span，i（斜体）,em（强调）,sub(下标)，sup（上标）,label等。

常见的行块级元素(拥有内在尺寸，可设置高宽，不会自动换行 )有：

(button,input，textarea,select), img等

display:

block:块级元素
inline:行内级元素：不能设置宽高
none:隐藏

不占据空间
inline-block ：行块级元素

17.over-flow:hidden

[关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）] https://blog.csdn.net/qq_41638795/article/details/83304388

text-overflow: clip|ellipsis|string;

| 值 | 描述 |

clip 修剪文本。

ellipsis 显示省略符号来代表被修剪的文本。

string 使用给定的字符串来代表被修剪的文本。

外边距塌陷

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

在这里插入图片描述

解决方案：

可以为父元素定义1像素的上边框或上内边距。 border: 1px solid red; padding: 1px;

可以为父元素添加overflow:hidden。overflow: hidden; 溢出隐藏

18.css3的transform

转换：大小、位置移动、缩放、旋转，多种属性用空格分隔开

transform: rotate scale skew translat matrix;

translate(50px,100px)//向右移动50px,向下移动100px; rotate(30deg)//把元素顺时针旋转 30 度。 scale(2,4)//把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。 skew(30deg,20deg)//围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。 matrix()

在不同浏览器中的调用方式：

div { transform: rotate(30deg); -ms-transform: rotate(30deg);  /* IE 9 */ -webkit-transform: rotate(30deg);  /* Safari and Chrome */ -o-transform: rotate(30deg);  /* Opera */ -moz-transform: rotate(30deg);  /* Firefox */ }

19.css预编译

CSS 预编译，就是预先编译处理CSS。它扩展了 CSS 语言，增加了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。

Less与sass都是CSS预编译器. 对CSS赋予了动态语言的特性

区别：

| | 优点 | 缺点 |

sass 用户多，更容易找到会用scss的开发，更容易找到scss的学习资源；可编程能力比较强，支持函数，列表，对象，判断，循环等；相比less有更多的功能； Bootstrap/Foundation等使用scss；丰富的sass库：Compass/Bourbon；变量:Sass: $var Javascript编译,客户端安装node-sass会经常失败或者报错，需要使用cnpm或者手工安装

less 可以在浏览器中运行，实现主题定制功能；变量:@var sass: ruby编译，服务端编程能力弱，不直接支持对象，循环，判断等； @variable 变量命名和css的@import/media/keyframes等含义容易混淆； mixin/extend的语法比较奇怪； mixin的参数如果遇到多参数和列表参数值的时候容易混淆；

20.css3动画

animation:在某个元素上绑定动画。把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

div {     animation: myfirst 5s;     -webkit-animation: myfirst 5s; /* Safari 与 Chrome */ }  @keyframes myfirst {     from {background: red;}     to {background: yellow;} }   @-webkit-keyframes myfirst /* Safari 与 Chrome */ {     from {background: red;}     to {background: yellow;} }  //或者用百分比来规定动画的时间from和to表示0%和100% @keyframes myfirst {     0%   {background: red;}     25% {background: yellow;}     50% {background: blue;}     100% {background: green;} }   @-webkit-keyframes myfirst /* Safari 与 Chrome */ {     0%   {background: red;}     25% {background: yellow;}     50% {background: blue;}     100% {background: green;} }

css动画是使元素从一种样式逐渐变化为另一种样式的效果

#前端##前端工程师##实习##面经#