HTML与css面试题梳理
使用css使元素上下居中的方法
不脱离文档流方式
1.左右居中：加宽度，使用margin：0 auto；
上下居中：子元素的line-height与父元素height相等
2.左右居中：加宽度，使用margin：0 auto；
上下居中：给子元素加margin-bottom（避免使用margin-top，存在margin-top传递问题，如果使用，需要给父元素加overflow：hidden）
3.如果子元素内是文字直接使用text-align：center与line-height=height
4.水平居中：子元素margin:0 auto
垂直居中：给父元素加display: table-cell; vertical-align:
脱离文档流方式
5.绝对定位。
父级元素position：relative； 子级元素position: absolute; top: 50%; left: 50%; margin-top:-1/2子级高度； margin-left：-1/2子级宽度；
6.绝对定位。
父元素position:relative; 子元素position：absolute； top:50%; left:50%; transform: translate(-50%,-50%);（指定元素在x轴y轴的平移）
7.弹性盒模型。
给父元素加display:flex;justify-content:center(实现水平居中效果),align-items:center(实现垂直居中效果)
css选择器有哪些？
1.标签选择器 div{ }
2.类选择器 .class{ }
3.ID选择器 #id{ }
4.通配符选择器 *{ }
5.后代选择器 ul li { }
6.子代选择器 ul>li{ }（必须是紧邻的父子关系）
7.属性选择器 （不常用） [标签属性名]{ }
8.分组选择器 h1,div,p,a{ }
9.交集选择器 div.div1{ }
div[title]{ }
10.伪类选择器 ：link 默认的状态
：hover 鼠标经过的状态
：active 点击时的状态
：visited 点击后的状态
奇偶行 奇数：odd li:nth-child(2n+1)
偶数：even li:nth-child(2n)
第一和最后 :last-child :first-child
同类型中第n个兄弟 :nth-of-type(n)
css3新增伪类有哪些？
请给出【Sausage】的字体颜色值
<ul class='shopping-list' id='shop'>
<li><span>Milk</span></li>
<li class='favorite' id='must-buy'>
<span class='highlight'>Sausage</span></li>
</ul>
<style>
body{ color:grey;}
#shop .favorite:not(#shop).highlight{ color:red;}
#shop .highlight:nth-of-type(1):nth-last-of-type(1){ color:blue;}
</style>
为什么要遵循标签语义化：
利于SEO优化（也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重）；
在样式丢失的时候，还是可以比较好的呈现结构；
更好的支持各种终端，例如无障碍阅读和有声小说等；
利于团队开发和维护，W3C给我们定了一个标准，那么团队中都遵循这个标准，那么代码的差异就会缩小，
在开发和维护的时候就可以提高效率；
日常工作中怎样遵循标签语义化：尽量减少使用无意义标签，例如span和div；
尽量不使用标签本身的css属性，例如b、font、s等标签，如果需要这些样式，那么使用css样式来进行添加；
在需要强调的部分，使用strong、em，但是样式尽量使用css样式来描述；
表格搭建时，使用表格头部 表格身体 表格尾部；
列表搭建时，使用<ul>无序列表</ul> <ol>有序列表</ol> <dl>定义列表 ；
简述对css盒子模型的理解
盒子模型示意图
一、简述
图中最内部的框是元素的实际内容，也就是元素框， 紧挨着元素框外部的是内边距padding， 其次是边框（border）， 然后最外层是外边距（margin），整个构成了框模型。 通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。 而外边距margin是透明的，不会遮挡周边的其他元素。 那么，元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度； 元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
合并问题
两个上下方向相邻的元素框垂直相遇时，
外边距会合并， 合并后的外边距的高度等于 两个发生合并的外边距中较高的那个边距值
说说box-sizing
概念
box-sizing属性是用户界面属性里的一种，这个属性跟盒子模型有关，而且在css reset中有可能会用到它。
box-sizing : content-box|border-box|inherit;
(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容
即总宽度=margin+border+padding+width
(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容
即总宽度=margin+width
很多CSS框架，都会对盒子模型的计算方法进行简化。
(3) inherit , 规定应从父元素继承 box-sizing 属性的值
关于border-box的使用：
1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好
2 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。
如何用css绘制一个实心三角
.triangle {
width : 0;
height: 0;
border : 100px solid transparent;
border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right四个方向的三角*/ }
用css绘制空心三角
思路：绘制一个大的实心黑色三角和一个小的白色实心三角，让小白三角覆盖在大的黑三角上即可
用css画对号
.duihao {position: absolute;
display: none;right:
.2rem;top: 40%;}
.duihao::before {content: '';
position: absolute;
width: 5px;
height: 15px;
color: #00CC9A;
border-bottom: 2px solid;
border-right: 2px solid;
top: 50%;
transform-origin: center;
transform: translate(-50%, -30%) rotate(45deg);
-webkit-transform: translate(-50%, -30%) rotate(45deg);}
如何用css画空心圆
div{
width:100px;
height:100px;
border:2px solid #000;
border-radius:50%;
}
用css画左右箭头
.u-icon-left{position:absolute;
top:50%;
right:0px;
width:8px;
height:8px;
margin-top:-2px;
border-style:solid;
border-width:0px 0px 2px 2px;
border-color:#ababab;
-webkit-transform-origin: 75% 25%;
-webkit-transform: rotateZ(45deg);
-webkit-transition: 100ms ease-in .1s;
transition: 100ms ease-in .1s;}
.u-icon-arr{position:absolute;
top:50%;
right:0px;
width:8px;
height:8px;
margin-top:-2px;
border-style:solid;
border-width:2px 2px 0 0;
border-color:#ababab;
-webkit-transform-origin: 75% 25%;
-webkit-transform: rotateZ(45deg);
-webkit-transition: 100ms ease-in .1s;
transition: 100ms ease-in .1s;}
用css绘制加减号
.deleteicon{width: 2.13rem;
height: 2.13rem;
background: #fff;
border-radius: 100%;
position: absolute;
border: 1px solid #cbcbcc;}
.deleteicon:before{position: absolute;
content:'';
width:1.6rem ;
height: .15rem;
background:#cbcbcc;
transform:rotate(0deg);
top:.975rem;
left: .265rem;}
.addicon{width: 2.13rem;
height: 2.13rem;
background: #00cc9a;
border-radius: 100%;
position: absolute;}
.addicon:before{position: absolute;
content:'';
width:1.6rem;
height: 0.15rem;
background:white;
transform:rotate(0deg);
top:.975rem;left: 0.265rem;}
.addicon:after{content:'';
position: absolute;
width: 1.6rem;
height:0.15rem;
background:white;
transform:rotate(-90deg);
top: 0.975rem;
left: .265rem;}
用css绘制叉号
.info-close {position: fixed;
right: calc(50% - 10px);
width: 30px;
height: 30px;
background:#000;
opacity:.6;
border-radius: 25px;
cursor: pointer;
z-index: 2002;}
.info-close:before {position: absolute;
content:'';
width: 20px;
height: 2px;
background: white;
transform: rotate(45deg);
top: 14px;
left: 5px;}
.info-close:after{content: '';
position: absolute;
width: 20px;
height: 2px;
background: white;
transform: rotate(-45deg);
top: 14px;left: 5px;}
什么时候需要清除浮动，清除浮动都有哪些方法？
浮动引起了父级元素高度塌陷。
张鑫旭大神观点：撇开浮动的“破坏性”，浮动就是个带有方位的display:inline-block属性。 如果我们给方块设置display:inline-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右，display:inline-block只能从左往右。
清除浮动的方法：
1.给父级元素添加高度（不常用）
2.给父级元素添加overflow：hidden 属性
把元素拉回文档流
3.在一组浮动元素的最后一个浮动元素后面加一段代码
4.利用伪元素 给所有使用浮动的元素加一个clear类名
.cklear:after{
display:block;
content:"";
clear:both;}
让元素在一行显示有几种方式?
1.float：left（或right）
2.display：inline（或inline-block） 3.定位 无论是float浮动还是display实现并排显示，要想并排显示首先总宽度要小于或等于对象上级宽度，这样才能并排显示实现横向排列排版布局。
让元素隐藏有几种方法，及display:none 和 visibility: hidden区别 ?
这个问题引用了其他大神的文章，原链接不记得了，如需删掉请告知。 1.display:none
设置元素的display为none是最常用的隐藏元素的方法。 将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
2.visibility:hidden
设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。 visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景
3.opacity:0
opacity属性我相信大家都知道表示元素的透明度，而将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。
这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
4.设置height，width等盒模型属性及font-size为0
这是我总结的一种比较奇葩的技巧，简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0， 如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，这算是一种奇技淫巧。 这种方式既不实用，也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的，比如jquery的slideUp动画， 它就是设置元素的overflow:hidden后，接着通过定时器，不断地设置元素的height，margin-top，margin-bottom，border-top， border-bottom，padding-top，padding-bottom为0，从而达到slideUp的效果。
H5新增标签
canvas 新元素
canvas标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
新多媒体元素
audio定义音频内容
video定义视频（video 或者 movie）
source定义多媒体资源 video和 audio
embed定义嵌入的内容，比如插件
track为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。
新表单元素
datalist 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
keygen 规定用于表单的密钥对生成器字段。
output 定义不同类型的输出，比如脚本的输出。
新的语义和结构元素
header 定义了文档的头部区域
footer 定义 section 或 document 的页脚。
nav 定义导航链接的部分。
section 定义文档中的节（section、区段）。
article 定义页面独立的内容区域。
figure 规定独立的流内容（图像、图表、照片、代码等等）。
figcaption 定义figure元素的标题
aside 定义页面的侧边栏内容。
time 定义日期或时间。
command 定义命令按钮，比如单选按钮、复选框或按钮
details 用于描述文档或文档某个部分的细节
dialog 定义对话框，比如提示框
summary 标签包含 details 元素的标题
mark 定义带有记号的文本。
meter 定义度量衡。仅用于已知最大和最小值的度量。
progress 定义任何类型的任务的进度。
bdi 允许您设置一段文本，使其脱离其父元素的文本方向设置。
ruby 定义 ruby 注释（中文注音或字符）。
rt 定义字符（中文注音或字符）的解释或发音。
rp 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
wbr 规定在文本中的何处适合添加换行符。
css3新增属性
border-radius 圆角
border-shadow 盒子阴影
background-size 背景尺寸
background-clip 背景裁剪
background-origin 背景显示原点
text-shadow 文字阴影
text-overflow 文字隐藏的方式 裁剪/省略号
box-sizing
transform 变换 转换
animation 动画
transition 过渡动画
媒体查询 @media
px，em，rem的区别？
px像素（Pixel）。
相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
PX特点
- IE无法调整那些使用px作为单位的字体大小；
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
- Firefox能够调整px和em，rem。
em是相对长度单位。
相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，
这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em,
也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
em特点
- em的值并不是固定的；
- em会继承父级元素的字体大小。 所以我们在写CSS的时候，需要注意两点：
- body选择器中声明Font-size=62.5%；
- 将你的原来的px数值除以10，然后换上em作为单位；
- 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em， 那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em， 它因继承#content的字体高而变为了1em=12px。
rem特点
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。
这个单位与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。
对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。
这些浏览器会忽略用rem设定的字体大小。
display：inline-block什么时候会出现间隙？及解决办法。
出现情况
<style>
*{margin:0;padding:0;}
.box{overflow-x:auto;background:#fff;white-space:nowrap;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}
</style>
</head>
<body>
<div class="box">
<span>111</span>
<span>111</span>
<span>111</span>
<span>111</span>
</div>
</body>
换行造成的空白符导致的
解决办法
方法一： 元素之间不换行，代码如下：
常见的浏览器及其内核
我们把浏览器中识别代码绘制页面的东西称为浏览器的内核或者渲染引擎。
谷歌 chorme：webkit(v8引擎)国内大部分，安卓和IOS等等 火狐 firfow：Gecke 欧朋 Opera：presto 14代改为webkit IE：tirdent 浏览器兼容： 1.W3C发布的规范都是开发者们不断尝试总结下来的产物 2.每个浏览器为了彰显自己的不一样，不按照标准来，但是把标准中规定的效果用另外一种方式实现了。（写同一个效果写两套代码）
========================================================= 欢迎批评指正！
