前端面试CSS

light 发布于2019-08-30 15:55 / 2074人阅读

摘要：需要注意的是通用选择器子选择器和相邻同胞选择器并不在这四个等级中，所以他们的权值都为。权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。导致这一现象的最根本原因在于被设置了的元素会脱离文档流。

选择器的权重和优先级

选择器的类型：

id选择器(#myid)

类选择器(.myclassname)

标签选择器(div, h1, p)

相邻选择器(h1 + p)

子选择器（ul > li）

后代选择器（li a）

通配符选择器（*）

属性选择器（a[rel="external"]）

伪类选择器（a:hover, li:nth-child）

权重分为四级：

代表内联样式，如style="xxx"，权值为 1000；
代表 ID 选择器，如#content，权值为 100；
代表类、伪类和属性选择器，如.content、:hover、[attribute]，权值为 10；
代表元素选择器和伪元素选择器，如div、p，权值为 1。

需要注意的是：通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为 0。权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。

盒模型

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin

低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

box-sizing属性：

content-box：一个标准模式下的盒模型的计算方式

border-box：一个怪异模式下的盒模型的计算方式

div设置了box-sizing:border-box之后，width的宽度是内容 + padding + 边框的宽度（不包括margin），这样就比较符合我们的实际要求了。

浮动float

float被设计出来的初衷是用于文字环绕效果，即一个图片一段文字，图片float:left之后，文字会环绕图片.
float 的破坏性 —— float 破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象的最根本原因在于：被设置了 float 的元素会脱离文档流。其根本原因在于 float 的设计初衷是解决文字环绕图片的问题。大家要记住 float 的这个影响。

清除浮动

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容 IE 低版本 */
}

如何实现水平居中

inline元素使用

text-align: center

block元素使用

margin: auto

绝对定位元素可结合left和margin实现，但是必须知道宽度。

.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin: -150px;
}

如何实现垂直居中

inline 元素可设置line-height的值等于height值，如单行文字垂直居中：

.container {
   height: 50px;
   line-height: 50px;
}

绝对定位元素，可结合left和margin实现，但是必须知道尺寸。

优点：兼容性好

缺点：需要提前知道尺寸

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

绝对定位可结合transform实现居中。

优点：不需要提前知道尺寸

缺点：兼容性不好

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

绝对定位结合margin: auto，不需要提前知道尺寸，兼容性好

.container {
    position: relative;
    height: 300px;
}
.item {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

移动端的布局用过媒体查询吗?

里边

CSS : @media only screen and (max-device-width:480px) {/css样式/}

css动画

首先，使用@keyframes定义一个动画，名称为testAnimation，如下代码，通过百分比来设置不同的 CSS 样式，规定动画的变化。所有的动画变化都可以这么定义出来。

@keyframes myfirst
{
    0%   {background: red; left:0; top:0;}
    25%  {background: yellow; left:200px; top:0;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0; top:200px;}
    100% {background: red; left:0; top:0;}
}

然后，针对一个 CSS 选择器来设置动画，例如针对div元素设置动画，如下：

div {
    width: 100px;
    height: 50px;
    position: absolute;

    animation-name: myfirst;
    animation-duration: 5s;
}

专线服务超融合服务器前端面试前端工程师面试前端ddos 攻击面试前端开发工程师面试

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117446.html

前端 CSS 面试大纲

摘要：比如说预处理器，组件化，工程化，兼容性处理等方面，这些主要是基于自己的开发经验业界流行技术方案进行准备。但是在开始谈面试前我想先提出一个概念学霸面试模型学校的学习和公司的工作有很多相似的地方。所以对于面试，请参考上学那会儿你们班学霸的姿势。背景参加完厦门第四届CSS Conf 后，让我对 CSS 产生了新的思考。CSS 是前端必须熟练掌握并保持持续关注的技术，但是我又不想在 CS...

mating 2019-08-30 14:19 评论0 收藏0
前端最强面经汇总

摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...

wangjuntytl 2019-08-26 10:41 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
前端开发-从入门到Offer - 收藏集 - 掘金

摘要：一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。工欲善其事必先利其器-前端实习简历篇 - 掘金有幸认识很多在大厂工作的学长，在春招正式开始前为我提供很多内部推荐的机会，非常感谢他们对我的帮助。现在就要去北京了，对第一份正式的实习工作也充满期待，也希望把自己遇到的一些问题和...

sf_wangchong 2019-08-20 16:10 评论0 收藏0
前端面试题-CSS选择器

摘要：一选择器作用选择器用于定位我们想要给予样式的元素，但不只是在中，对的选择器也是支持的，比如。在选被元素后插入内容其用法和特性与相似。所有伪元素选择器在前端面试题伪类和伪元素扩展阅读前端面试题清除浮动前端面试题块格式化上下文一、CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素，但不只是在 CSS 中，JavaScript 对 CSS 的选择器也是支持的，比如 ...

leanote 2019-08-30 14:09 评论0 收藏0
前端面试题-CSS选择器

摘要：一选择器作用选择器用于定位我们想要给予样式的元素，但不只是在中，对的选择器也是支持的，比如。在选被元素后插入内容其用法和特性与相似。所有伪元素选择器在前端面试题伪类和伪元素扩展阅读前端面试题清除浮动前端面试题块格式化上下文一、CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素，但不只是在 CSS 中，JavaScript 对 CSS 的选择器也是支持的，比如 ...

h9911 2019-08-22 15:25 评论0 收藏0