前端面试CSS

时间 2019-12-05

标签前端面试 css 栏目快乐工作繁體版

原文原文链接

选择器的权重和优先级

选择器的类型：css
- 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），这样就比较符合咱们的实际要求了。code

浮动float

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

清除浮动

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容 IE 低版本 */
}
<div class="clearfix">
    <img src="image/1.png" style="float: left"/>
    <img src="image/2.png" style="float: left"/>
</div>

如何实现水平居中

inline元素使用图片

text-align: center

block元素使用文档

margin: auto

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

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

如何实现垂直居中

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

.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;
}

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

<head>里边<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
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;
}

1. 前端面试——CSS相关
2. 前端面试之Css篇
3. 前端面试总结（css）
4. 前端 CSS 面试大纲
5. css前端面试题
6. 前端面试——css篇
7. 前端面试题 ----css篇
8. 前端面试题-CSS Hack
9. web前端—css面试题
10. 前端面试笔记 - css
更多相关文章...
• Lua 调试(Debug) - Lua 教程
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• Docker容器实战(一) - 封神Server端技术