面试题整理—CSS部分
HTML与css面试题梳理
使用css使元素上下居中的方法
不脱离文档流方式
1.左右居中：加宽度，使用margin：0 auto；
上下居中：子元素的line-height与父元素height相等javascript
2.左右居中：加宽度，使用margin：0 auto；
上下居中：给子元素加margin-bottom（避免使用margin-top，存在margin-top传递问题，若是使用，须要给父元素加overflow：hidden）css
3.若是子元素内是文字直接使用text-align：center与line-height=height
4.水平居中：子元素margin:0 auto
垂直居中：给父元素加display: table-cell; vertical-align:java
脱离文档流方式
5.绝对定位。
父级元素position：relative； 子级元素position: absolute; top: 50%; left: 50%; margin-top:-1/2子级高度； margin-left：-1/2子级宽度；jquery
6.绝对定位。
父元素position:relative; 子元素position：absolute； top:50%; left:50%; transform: translate(-50%,-50%);（指定元素在x轴y轴的平移）css3
7.弹性盒模型。
给父元素加display:flex;justify-content:center(实现水平居中效果),align-items:center(实现垂直居中效果)web
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>定义列表 ；canvas
简述对css盒子模型的理解
盒子模型示意图
1、简述
图中最内部的框是元素的实际内容，也就是元素框， 紧挨着元素框外部的是内边距padding， 其次是边框（border）， 而后最外层是外边距（margin），整个构成了框模型。 一般咱们设置的背景显示区域，就是内容、内边距、边框这一块范围。 而外边距margin是透明的，不会遮挡周边的其余元素。 那么，元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度； 元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。浏览器
合并问题
两个上下方向相邻的元素框垂直相遇时，
外边距会合并， 合并后的外边距的高度等于 两个发生合并的外边距中较高的那个边距值ruby
说说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.每一个浏览器为了彰显本身的不同，不按照标准来，可是把标准中规定的效果用另一种方式实现了。（写同一个效果写两套代码）
========================================================= 欢迎批评指正！
- 1. CSS面试题整理
- 2. 前端部分面试题目整理
- 3. 前端面试题整理——javaScript部分
- 4. python 部分面试题整理（1）
- 5. JavaSE部分面试题整理
- 6. JavaWeb部分面试题整理
- 7. ios 面试部分整理
- 8. CSS基础部分问题整理
- 9. 前端面试题整理—HTML/CSS篇
- 10. 前端面试题目整理——css篇
- 更多相关文章...
- • Git 分支管理 - Git 教程
- • ionic 头部与底部 - ionic 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker 清理命令
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vs2019运行opencv图片显示代码时，窗口乱码
- 2. app自动化 - 元素定位不到？别慌，看完你就能解决
- 3. 在Win8下用cisco ××× Client连接时报Reason 422错误的解决方法
- 4. eclipse快速补全代码
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代码的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒发生变种 新文件名将带有“.UIWIX”后缀
- 8. 【原创】Python 源文件编码解读
- 9. iOS9企业部署分发问题深入了解与解决
- 10. 安装pytorch报错CondaHTTPError：******
- 1. CSS面试题整理
- 2. 前端部分面试题目整理
- 3. 前端面试题整理——javaScript部分
- 4. python 部分面试题整理（1）
- 5. JavaSE部分面试题整理
- 6. JavaWeb部分面试题整理
- 7. ios 面试部分整理
- 8. CSS基础部分问题整理
- 9. 前端面试题整理—HTML/CSS篇
- 10. 前端面试题目整理——css篇