2022html css高频面试题

点击查看Vue高频面试题

点击查看JavaScript高频面试题

html

HTML全局属性有哪些

全局属性是可与所有 HTML 元素一起使用的属性。
Id，class，data-，style，title等等

html新增加的语义化标签

Header:头部标签，nav:导航标签，artical:内容标签，section:定义文档的某个区域，aside:侧边栏，footer:尾部标签。

div+css较table布局的的优势

从简洁度，SEO，兼容性，灵活性，垃圾代码方面叙述
1、因为采用CSS布局，不像表格布局充满各种各样的属性和数字(如table布局中经常使用行合并与列合并)，而且div+css的布局方式中很多css文件通常是共用的，从而大大缩减页面代码，提高页面浏览速度。
2、结构清晰，对搜索引擎更加友好。更容易被搜索引擎收录，具备搜索引擎SEO的先天条件，配合优秀的内容和一些SEO处理，可以获得更好的网站排名。
3、兼容性更好，符合web标准规范的发展趋势，可以在几乎所有的浏览器上都可以使用，不会出现在不同的浏览器中效果差距很大的情况。
4、Table表格布局灵活性不大，比如想要设置tr的border是无效的，必须设置到td上才行
5、Table表格布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。
6.table布局不够语义化
7.table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间

介绍一下盒子模型，以及他们的区别

盒模型有两种：IE盒子模型，W3C盒子模型
盒模型包含：内容， 填充， 边界， 边框
在W3C标准中，一个元素的宽度和高度，是指元素内容（content）的宽度和高度，而在IE5.5及以下的浏览器，IE的宽度和高度还包含了padding和border。

请说说你对标签语义化的理解？

除了我所知道的语义化标签外还有：

< title></title>：网站的标题（提升搜索引擎排名）。
<figure>：定义独立的流内容，比如图形、图标、照片、代码等；
<main>元素定义页面的主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
 <strong>元素把文本定义为语气更强的强调的内容，以表示内容的重要性。
 <em>元素标记内容着重点（大量用于提升段落文本语义），通常呈现为斜体文字。

1.一个语义元素能够清楚的描述其意义给浏览器和开发者，即使在去掉或丢失样式的时候，也能够让页面呈现出清晰的结构；
2.有利于SEO优化，让页面和搜索引擎建立良好的沟通，爬虫依赖于标签来确定上下文和各个关键词的权重，有助于爬虫抓取更多的有效信息；
3.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备等），并以具有意义的方式来渲染网页；
4.便于团队开发和维护，语义化更具有可读性，遵循W3C标准的团队都遵循语义化标准，可以减少差异化；

DOCTYPE的作用，有何意义

DOCTYPE要声明在文档的最前面，必须要位于html元素开始之前，这样一来，在浏览器解析html文档开始之前，确定文档的解析类型，去决定采取那种渲染模式。
浏览器有两种模式，一个是怪异模式(IE盒子模型（border-box）)，另一个是标准模式(W3C标准盒模型（content-box)。
在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE6,7,8中，IE的宽度和高度还包含了padding和borde，如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。加上了DOCTYPE之后，浏览器就会按照标准模式，也就是按照W3C的标准解析渲染页面。从而避免了同一个页面在不同浏览器上出现不同的效果。

HTML5增加了哪些新的特性，又移除了哪些特性

1.拖拽释放的API（Drag和Drop）
2.语义化标签（见上面）
3.视频音频标签（video与audio）
4.画布API（Canvas）
5.地理API（Geolocation）
6.Web存储API（sessionstorage、localstorage）
7.表单控件（date、color、email、search、number等等）
8.通讯API（WebSocket，可以去制作一个多人聊天室，前端创建WebSocket对象，去监听对象上的open，close，error与message方法，并且通过message方法的事件对象获取响应的数据，后台可以使用ws包去监听前端发来的信息，再广播出去。）

src与href的区别

1、请求资源类型不同，href表示超文本引用，用来建立当前元素与文档之间的链接，常用的有：link、a。在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；2.作用结果不同：href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容；
3、 浏览器解析方式不同，若在文档中添加href ，浏览器会识别该文档为 CSS 文件，它会一边加载结构一边加载样式，则也就是不适用@import的原因；当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，这也就是为什么推荐吧js文件放到底部而不是头部。

前端需要注意哪些SEO

1.合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
2.语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
3.重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
4.重要内容不要用js输出：爬虫不会执行js获取内容
5.少用iframe：搜索引擎不会抓取iframe中的内容
6.非装饰性图片必须加alt
7.提高网站速度：网站速度是搜索引擎排序的一个重要指标

img标签的title和alt有什么区别

Alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示，读屏器阅读图片。
title 可提高图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。鼠标滑过时显示的文字提示，用户体验上很重要。当然不必要所有的img标签都加此属性，比方说logo这样比较重要或者说用户会体验到的图片内容建议一定要加此属性。

WEB标准以及W3C标准是什么

WEB标准主要包括：结构，样式与行为，然后再分别进行解释
标签闭合，标签小写，嵌套正确，外部链接css和js，提倡结构、表现和行为相分离（HTML结构、CSS表现、JavaScript行为）

Canvas和SVG有什么区别？

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。首先canvas是html5提供的新元素，而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。Canvas绘制出来的图形为标量图可以用于制作游戏，他通过js脚本绘制；因为svg只能绘制矢量图，所以svg中不能引入普通的图片，它是使用xml与css进绘制的，矢量图的不会失真的效果，在项目中我们会用来做一些动态的小图标，它还可以被用于制作地图，如百度地图。
Canvas 基础知识概要：先获取元素对象在使用gerContext(‘2d’)方法let ctx=document.getElementById(‘tutorial’)，想要绘制长方形ctx.fillRect (10, 10, 55, 50);，如果想要绘制路径如：圆，其它的图形等，可以使用path，1.ctx.beginPath(); //新建一条path2.ctx.moveTo(50, 50); //把画笔移动到指定的坐标ctx.lineTo(200, 50); 3.//绘制一条从当前位置到指定坐标(200, 50)的直线.4.ctx.closePath();//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做5.ctx.stroke(); //绘制路径。它还可以去绘制弧线，虚线，文本，图片等等

补充：矢量与标量图的区别

1. 矢量图使用线段和曲线描述图像,所以称为矢量,同时图形也包含了色彩和位置信息，与分辨率无关，格式很多，如AdobeIllustrator的 .AI、.EPS和SVG、AutoCAD的 *.dwg和dxf、Corel DRAW的 *.cdr等

2.标量图，使用像素点来描述图像，也称为点阵图像，方大会失真，文件类型也很多，如 .bmp、.pcx、.gif、.jpg、.tif、.png、photoshop的 *.psd等。

如何实现一个可以被点击的圆

1.通过canvas2.通过svg
3.通过map

<img src="t.jpg" width="1366" height="768" border="0" usemap="#Map" />
<map name="Map" id="Map">
 	<area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" />
</map>

4.通过border-radius

iframes的优缺点

优点：
1.iframe能够把嵌入的网页原样展现出来
2.页面和程序分离;
缺点：
Ifram和主页共享连接池，而浏览器对相同作用域的连接有限制，所以会影响到页面的并行加载
样式/脚本需要额外链入，会增加请求，安全得不到保证。
iframe好在能够把原先的网页全部原封不动显示下来,但是不利于搜索引擎的爬取
iframe 会阻塞主页面的 Onload 事件，也就是window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发，而iframe的创建又非常的慢，给用户的体验就会觉得这个网站太慢了。
滚动条除了会挤占有限的页面空间外会使iframe布局混乱，还会分散访问者的注意力，影响用户体验；

xhtml和html的区别

分为两大类比较：一个是功能上的差别，另外是书写习惯的差别。关于功能上的差别，主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页， - XHTML的语法较为严谨。
1.所有标签都必须小写
2.图片必须使用说明文字
3.标签顺序必须正确
4.元素必须被正确地嵌套
5.XHTML 元素必须被关闭，空标签也必须被关闭，如 <br> 必须写成 <br />
6.XHTML 文档必须拥有根元素。

HTML5应用程序缓存为应用带来什么优势。

1）离线浏览：用户可在应用离线时使用它们。
2）速度：已缓存资源加载得更快。
3）减少服务器负载：浏览器将只从服务器下载更新过或更改过的资源。

谈谈对响应式布局的看法。

响应式布局有缺点也有优点。
优点：面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题。
缺点：兼容各种设备时所需工作量大、效率低下、代码累赘，会隐藏无用的元素，加载时间延长，其实这是一种折中性质的十设计解决方案，由于多方面元素影响而达不到最佳效果，在一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

Label 的作用是什么？是怎么用的？

label 标签来定义表单控制间的关系,当用户点击label时，浏览器会自动将焦点转到和标签相关的表单控件上。通过label标签的for属性与指定表单元素的id绑定来实现关联表单

H5如何清除Input输入框多次输入的历史记录

autocomplete 属性规定输入字段是否应该启用自动完成功能。

前端需要注意哪些SEO

对WEB标准以及W3C的理解与认识?

web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表，通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
1）标签字母要小写
2）标签要闭合
3）标签不允许随意嵌套；对于css和js来说，尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

如何提高网站的速度

使用cdn加速，gzip压缩，使用精灵图，图片文件过大可以使用其他类型的图片格式，图片懒加载，少使用全局变量，数据缓存。

请写出至少五个HTML块级元素

<div>、<p>、<h1>...<h6>、<ol>、<ul>

请写出至少五个行内元素

<a>、<span>、<i>、<em>、<strong>、<label>

画一条0.5px的线

1.height: 1px;transform: scale(0.5);
2.使用cavas或则svg

html中有哪些标签是单标签？

hr,br,input,img,meta link

超链接在新窗口打开应该添加什么属性？

target=”_self”在本页面打开
target=”_blank”在新的页面打开

h1与title标签的区别是什么

title是网站标题，h1是文章主题
作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的。

块级元素与行内元素的区别

对于行内元素：1.自己独占一行2.宽度默认为父亲的宽度3.可以设置宽高。
对于行内及元素：1.与其他行内元素并排2.不能设置宽高，默认的宽度就是文字的宽度3.一行装不下就会换一行。

css

1.Flex弹性盒子模型解释一下

flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。
有几个常用的属性如下，可以使用这个去解释：

flex-direction：row-reverse  column-reverse:
flex-wrap
justify-content：flex-start默认值，左对齐 | flex-end右对齐 | center |space-between两端对齐 | space-around每个项目两侧的间距相等
align-items：flex-start | flex-end | center | baseline | stretch
flex属性(他是由flex-grow, flex-shrink 和 flex-basis三部分组，默认值是0 1 auto)

2.外边距塌陷

解决方案：

1. 给父元素加边框border
2. 给父元素加内边距padding
3. 给父元素加overflow:hidden

清除浮动都有什么方法

一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。clear:both
二、 父级添加overflow方法
三、使用after伪元素清除浮动：
四、使用before和after双伪元素清除浮动：

定位有哪些，他们分别是相对什么进行定位的

静态定位(static)是元素的默认定位方式，无定位的意思。,写不写都一样。
相对定位(relative)是元素相对于它 原来在标准流中的位置 来说的。（自恋型）相对于自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
绝对定位(absolute)是元素以带有定位的父级元素来移动位置 （拼爹型）完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）。
父元素要有定位
将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。子绝父相
固定定位只认浏览器的可视窗口,跟父元素没有任何关系；单独使用的
z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
如果说浮动的元素在空气中，那么带有定位的元素就是位于大气中，因为他们会压着浮动的元素。

行内元素与行内块元素的区别，如何消除行内块的空白间隙

1.给他的父元素加：font-size:0px;
2.让行内块元素浮动起来
3.给父盒子加上display: flex;
4.设置margin-right为负值

浮动带来的影响

1.他会脱离文档流，不占据位置
2.浮动的元素会在一行上显示，如果浮动的元素大于父元素的宽，显示不下就会另起一行，第二行显示
3.当浮动的子元素的父级没有设置宽高时，会导致父级的下面的标准流的兄弟盒子被覆盖。
4.对于行内元素来说，使用float之后，可以设置宽度高度了；

代替浮动的方案

解决方案：1.在块级元素，例如div中加入display: inline-block;即可。2.可以使用flex来解决

水平垂直居中的方案

1.子：margin: 50% auto；transform:translateY(-50%);父：overflow:hidden(为了解决外边距塌陷)
2.定位子绝父相，然后再使用margin-top:-子元素的一半; margin-left:-子元素的一半
3.定位子绝父相，然后在使用transform:translate(-50%,-50%)
4.使用flex布局，display: flex; justify-content: center; align-items: center;
5.Line-height=height;text-align:center实现文字的水平垂直居中
6.使用table-cell：父：display: table-cell; text-align:center；vertical-align:middle；子：display:inline-block;这个属性让子元素以表格单元格的形式呈现，类似于td标签
*注意：vertical-align:middle主要用来处理图片和文字之间的位置关系，行内元素与行内块元素都可以使用这个属性
7.使用grid布局：父：display: grid；align-items: center; justify-content: center; grid布局与flex布局很像，这是一些写法不一样。
8.使用定位，子绝父相，父亲用position: relative;儿子用position: absolute;top: 0; left: 0; right: 0; bottom: 0;margin: auto;

CSS引入的方式有哪些? link和@import的区别是?

①内联方式：css代码全都写在标签里（很糟糕的书写方式）②嵌入方式：css代码都写在style标签里③链接方式：通过link的方式引入外部的css代码④导入样式：通过@import url();导入
区别：1.link是XHTML语法，不存在兼容问题，@import提出的较晚有兼容性问题2.link是在页面加载的的同时一起加载的，@import是页面加载完毕后才加载的3.link支持javascript操作dom去改变样式，@import不支持，所以他要写到style标签里。

CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和!important哪个优先级高?

总结：大体上可以分为五类
元素选择器：* 、标签选择器、id选择器、类选择器
关系选择器：子集选择器和后代选择器
属性选择器：div[class^=icon]  input[type=text]等等
伪类选择器：E:link、E:visited、E:hover、E:active E:first-child、E:last-child等
伪元素选择器：E:before和E:after等
*注意:伪元素属于行内元素，一般配合定位于display:block使用.
1）继承的权重为0(比如说父元素的id选择器color为白色，子元素的标签选择器是黑色，虽然color会继承并且id权重大于标签选择器，不过由于父元素没有专门制定子元素的样式，所以子元素会继承父元素的样式，由于继承的权重为0，所以样式为黑色)；
2）载入样式以最后载入的定位为准；
3）!important优先级最高；
4）权重计算：
（1）内联，如style=”“——1000，
（2）id，如#content——100，
（3）类、伪类，结构化伪类和属性选择器，如:hover，:nth-child(n)，:first-child——10，
（4）标签选择器和伪元素选择器，如div p——1
（5）通配符、子选择器和相邻选择器，如*，>，+——0
权重的叠加不会产生进位
可以被继承的常见的属性有文本系列text-align，text-indent(控制缩进的多少2rem为两个字符)，line-height，color，字体系列：font-size，font-weight，font-family等等，列表系列：list-style

隐藏元素的方法

1.visibility: hidden；2.opacity: 0；3.position: absolute；给他一个特大的纸4.display: none；height: 0; 5. 将元素高度设为 0 ，并消除边框6.transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留

实现一个三角形

四行代码搞定一个等腰直角三角形
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: red;

2d，动画，3d知识点

2D知识点：利用transform属性进行变换，如transform: translate | rotate | scale | skew
动画知识点：利用@keyframs关键字定义动画，利用animations属性使用动画，animations：动画名称，动画时间，运动曲线，何时开始，播放次数，是否反向
3D知识点：transform XYZ或者translate3d(x,y,z)，透视，开启3d效果，需要给父元素透视perspective
透视perspective，可以产生近大远小的3D的效果。
transform-style:preserve-3d可以开启三维立体环境。

回流与重绘

回流：当渲染树(Render Tree)中的部分（或全部）元素的尺寸、结构、显示隐藏等发生改变时，浏览器重新渲染的过程称为回流。 简而言之，任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。 回流是影响浏览器性能的关键因素。
比如：
1.添加或者删除可见的 DOM 元素(不可见元素不会触发回流)
2.元素尺寸或位置发生改变
3.元素内容变化，比如文字数量或图片大小
4.浏览器窗口大小发生改变
5.CSS伪类的激活（例如：:hover，从而改变了元素的布局的）
重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。
如何避免(减少)回流：css：1.避免使用 table 布局 2.把要修改的样式集中到一个 class 内统一修改3如果需要设置动画效果，最好将元素脱离正常的文档流。4.避免使用CSS表达式（例如：calc()）。JavaScript：1.避免频繁操作样式，最好将样式列表定义为class并一次性更改class属性。2.避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。3.可以先为元素设置为不可见：display: none，操作结束后再把它显示出来。

src与href的区别

1、请求资源类型不同，href表示超文本引用，用来建立当前元素与文档之间的链接，常用的有：link、a。在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；2.作用结果不同：href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容；
3、 浏览器解析方式不同，若在文档中添加href ，浏览器会识别该文档为 CSS 文件，当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕。

如何让一段文本中的所有英文单词的首字母大写

text-transform: capitalize
他还有其他的值，如uppercase全部大写，lowercase全部小写

css伪类与伪元素的区别

伪类及伪元素的区别点其实在后面的类与元素。伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

px em rem的区别

px是固定的像素，他是相对于当前显示器设备而言的，显示器分辨率越高，元素越小，分辨率越低，元素越大，比如比如物理像素 1200px ,100px就是 12:1 如果物理像素是1000px，100px就是10:1。那么1px大小 在不同设备上显示的大小也不同，
em和rem相对于px更具有灵活性，更适用于响应式布局，em是相对于其父元素来设置字体大小的，而Rem是相对于根元素

css3的新特性

圆角border-radius，阴影：box-shadow，线性渐变：gradient，变形：transform，过渡：transition，动画：animation，媒体查询，增加了很多的选择器

解释一下CSS sprites（精灵图）原理，及优缺点

把网页中的一些背景图片整合到一张图片文件中, 利用backgroun-position等属性进行背景定位
优点:减少http请求, 加快网页的加载速度, 提高用户体验，减少图片的体积, 减少字节数，解决设计师图片命名的烦恼，更换风格方便。
缺点:开发时需要测量, 比较繁琐，维护的时候麻烦，精灵图不能随意改变大小和位置，宽屏高分辨率的屏幕下, 容易出现背景断裂。

:link,:visited,:hover,:active的执行顺序

:link表示鼠标点击之前，也称为原始状态
:visited表示鼠标点击之后状态
:hover表示鼠标悬停状态
:active表示鼠标点击状态
这样子是有顺序是有原因的：因为后面的样式会覆盖前面的样式，因此就要LVHA(爱恨原则)

什么是bfc

BFC（Block Formatting Context）就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。
BFC的应用：
如1.解决外边距塌陷2.清除浮动
如何创建BFC：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

::before和:after中双冒号和单冒号有什么区别，以及这 2 个伪元素的作用

单冒号用于CSS3伪类，双冒号用于CSS3伪元素。双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，因此就算写成单个冒号浏览器也可以加载，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

display 有哪些值？说明他们的作用。

Block，inline，inlineblock，none，inheriyt

一个满屏品字布局如何设计?

第一种：两个兄弟盒子，第二个兄弟设置两个盒子，然后可以使用浮动，flex，inline-block
第二种：三个兄弟盒子，后两个给他们一个margin-top:50%，然后向左浮动。

如何制作一个高度自适应的盒子

先定义一个盒子，然后内部的元素全部都浮动，然后再清除浮动。

css的calc函数的使用

calc() 函数用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

如何实现两边宽度固定，中间自适应的布局(三栏布局)

基础样式如下：

如果不给所有的元素加上height:100%，那么就还需要给body,html设置宽和高100
方式一：左右浮动，中间给一个margin，这种方法无法实现中间先加载的效果，必须先将left与right先加载，最后加载main，不然就无法实现三栏布局，详情请看——CSS关于浮动的一个易错点

方式二：左右使用定位，中间给一个margin，他可以将main区域优先加载，感觉不错。

其实使用定位还有其他的方式：比如再加上一个container盒子，子绝父相，
方式三：使用flex布局
Flex:1就是代表flex-grow：1，表示该元素会填充剩余的空间。他无法实现中间先加载的效果

方式四：calc布局：计算出中间的宽度，然后再来一个margin-left

方式五：圣杯布局
圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染；三栏全部使用“float:left”浮动，并配合left和right属性
圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。
方式六：双飞翼布局：

box-sizing的属性以及他们的作用

每一个盒子都是由内容，边框，padding以及margin组成
content-box（默认的盒子，设置padding和border会撑开盒子，使盒子比原本的宽高更大）他的盒子的总长度为width+padding+border+margin
border-box（包含了padding和border，设置两者不会撑开盒子，盒子大小不会改变）他的盒子的总长度为width+margin
inherit（规定应从父元素继承 box-sizing 属性的值）

display none与visibility hidden区别？

1.设置了display: none，那么该元素以及它的所有后代元素都会隐藏，浏览器也不会解析该元素，它会引起回流。
给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局，可以理解为透明度为0的效果
2.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘
3.在 CSS3 的 transition 中支持 visibility 属性，但是不支持 display，因为 transition 可以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户体验
4.visibility 不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。

rgba和opacity的区别及应用

区别：opacity不仅对改元素生效，而且他的子元素也会生效，也就是这个属性会被被继承，而rgba只对当前元素生效，他不会被继承。
应用：当我们制作弹窗的时候，如果我们使用的是opacity，那么所有的元素的效果都会改变，效果非常不好，但是如果使用的是rgba，效果就会好很多，他的子元素的样式不会发生改变。

css的50%代表的什么含义

对于第一个50%他平移的距离实际上是200px
对于第一个50%他平移的距离实际上是100px
Top与Left的百分比是相对于父元素来说的

如何实现一个全屏幕的红色

这里要注意的一点就是默认情况下，body与html不是全屏的，他的width默认是一整屏宽，但是高度都是0，如果想要为100%，那么必须同时为他们赋值高度为100%。

CSS关于浮动的一个易错点

错误点一：

对于浮动的元素，它会覆盖住它下面的兄弟元素，而不是上面的，因为上面的元素已经有了大小，已经确定了。
错误点二：

对于标准流的块级盒子，如果没有指定宽度，那么默认是一整屏宽，但是一旦脱离了标准流（如：浮动，绝对定位，固定定位），并且没有指定指定宽度，那么就会造成它的宽度为0。

相对定位脱离标准流吗(重点易错点)

绝对、固定定位和浮动都脱离了标准文档流,但是相对定位并没有脱离

rem适配方案

在自己的博客上

Chrome字体最小大小是12px,如何实现font-size:10px;?

font-size: 10px;
-webkit-transform: scale(0.8);
display: block;
此时：12*0.8=9.6 大约为10px
38 css 与 js 动画差异
css 性能好
css 代码逻辑相对简单 js 动画控制好
js 兼容性好
js 可实现的动画多 js 可以添加事件

li与li之间有看不见的空白间隔是什么原因引起的？有

什么解决办法
当li转变为inline-block的时候就会出现中间的间隔，原因是浏览器会将inline元素间的空白字符（空格换行tab）渲染成一个空格，解决方法上边有

你对 line-height 是如何理解的

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS 中起高度作用的是 height 和 line-height，没有定义 height 属性，最终其表现作用一定是 line-height。
单行文本垂直居中：把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居
中，其实也可以把 height 删除。 多行文本垂直居中：需要设置 display 属性为 inline-block