前端面试题目整理——css篇

1.css选择器

  • id选择器(#myid)
  • 类选择器(.myclassname)
  • 标签选择器(div, h1, p)
  • 直接相邻选择器(h1 + p)、普通相邻选择器(h1~p)
  • 子选择器(ul > li)、后代选择器(li a)
  • 通配符选择器(*)
  • 属性选择器(a[rel=”external”])
  • 伪类选择器(a:hover, li:nth-child)

css选择器之组合选择器

选择器 含义 作用
E,F 多元素选择器 同时匹配元素E或元素F
E F 后代选择器 匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F
E>F 子元素选择器 匹配E元素的所有直接子元素
E+F 直接相邻选择器 匹配E元素之后的相邻的同级元素F
E~F 普通相邻选择器(弟弟选择器) 匹配E元素之后的同级元素F(无论直接相邻与否)

css选择器之伪类选择器

伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素。因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。

选择器 示例 示例说明
:focus input:focus 选择元素输入后具有焦点
:checked input:checked 选择所有选中的表单元素
:read-only input:read-only 选择只读属性的元素属性
:read-write input:read-write 选择没有只读属性的元素属性
:disabled input:checked 选择所有禁用的表单元素
:enabled input:enabled 选择所有启用的表单元素
:in-range input:in-range 选择元素指定范围内的值
:out-of-range input:out-of-range 选择指定范围以外的值的元素属性
:valid input:valid 选择所有有效值的属性
:invalid input:invalid 选择所有无效的元素
:required input:required 选择有"required"属性指定的元素属性
:optional input:optional 选择没有"required"的元素属性
:empty p:empty 选择所有没有子元素的p元素
:first-of-type p:first-of-type 选择每个父元素是p元素的第一个p子元素
:last-of-type p:first-of-type 选择每个p元素是其父元素的最后一个p元素
:first-child p:first-child 匹配第一个p元素
:last-child p:last-child 匹配最后一个p元素
:not :not(p) 选择所有p以外的元素
:only-child p:only-child 选择所有仅有一个子元素的p元素
:nth-child p:nth-child(2) 选择所有p元素的第二个子元素
:nth-last-child p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素
:nth-of-type p:nth-of-type(2) 选择所有p元素第二个为p的子元素
:nth-last-of-type p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:hover a:hover 把鼠标放在链接上的状态
:active a:active 选择正在活动链接
:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
:root root 选择文档的根元素
:lang q:lang(no){quotes: “~” “~”} 为不同的语言匹配特殊的规则

css选择器之伪元素选择器

选择器 作用 说明
::before/:before 在被选元素前插入内容。 需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。
::after/:after 在选被元素后插入内容 其用法和特性与:before相似。
::first-letter/:first-letter 匹配元素中文本的首字母。 被修饰的首字母不在文档树中。
::first-line/:first-line 匹配元素中第一行的文本。 这个伪元素只能用在块元素中,不能用在内联元素中。
::selection ::selection匹配用户被用户选中或者处于高亮状态的部分 在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式。
::placeholder ::placeholder匹配占位符的文本,只有元素设置了placeholder属性时,该伪元素才能生效。 该伪元素不是CSS的标准,它的实现可能在将来会有所改变,所以要决定使用时必须谨慎。在一些浏览器中(IE10和Firefox18及其以下版本)会使用单冒号的形式。
::backdrop(处于试验阶段) ::backdrop用于改变全屏模式下的背景颜色,全屏模式的默认颜色为黑色 该伪元素只支持双冒号的形式

css选择器之属性选择器

选择器 示例 示例说明
[attribute] a[target] 用于选择具有指定属性的元素
[attribute=“value”] a[target="_blank"] 用于选择具有指定属性和值的元素
[attribute~=“value”] [title~=“flower”] 于选择包含指定单词的属性值的元素
[attribute|=“value”] [class|=“top”] 用于选取带有以指定值(此处top-)开头的属性值的元素
[attribute^=“value”] [class^=“top”] 用于选择属性值以指定值(此处top)开始的元素
[attribute$=“value”] [class$=“test”] 用于选择属性值以指定值结束的元素
[attribute*=“value”] [class*=“te”] 用于选择属性值包含指定值的元素
  1. 清除浮动
    父元素没有设置高度,子元素浮动会导致父元素坍塌,清除浮动可以解决。
  • 在浮动元素后添加一个空标签
    ,并且在CSS中设置.clear{clear:both;},即可清理浮动。
    前端面试题目整理——css篇_第1张图片
    原理:添加一个空标签,利用CSS提高的clear:both清除浮动,让父元素可以自动获取到高度
    优点:简单,代码少,兼容所有浏览器
    缺点:增加页面的标签,造成结构的混乱
    建议:不推荐使用,此方法已经过时
  • 父级元素定义:overflow:auto;zoom:1
  • :after伪元素===>给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素之后添加一个看不见的块元素(Block element)清理浮动。
    前端面试题目整理——css篇_第2张图片
    原理:通过CSS伪元素在容器的内部元素之后添加一个看不见的空格“/20”或点“.” ,并且设置clear属性清除浮动。
    优点:浏览器支持较好
    缺点:clearfix这个class需要添加zoom: 1(触发haslayout),才能支持IE6和IE7浏览器
    建议:推荐使用,设置公共类,减少CSS代码
  1. 盒子模型
    标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin
    低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin

  2. css中可以继承的样式
    可继承的属性:font-size, font-family, color
    不可继承的样式:border, padding, margin, width, height

  3. 优先级
    优先级(就近原则):!important > [ id > class = 伪类 > tag ]
    !important比内联样式优先级还高,继承得到的样式优先

  4. display有哪些值?说明他们的作用?
    inline(默认)–内联
    none–隐藏
    block–块显示
    table–表格显示
    list-item–项目列表
    inline-block

  5. 当margin-top、padding-top的值是百分比时,分别是如何计算的?
    对元素的margin设置百分数,是相对于父元素width计算的,不管是margin-top/margin-bottom/margin-left还是margin-right。(padding同理)

  6. css3,html5,es6的新特性
    css3新特性
    html5的新特性
    es6的新特性
    let/const、class、扩展运算符、rest参数、模板字符串、Set、变量的解构赋值、Symbol(一种新的原始数据类型,表示独一无二的ID,它通过Symbol函数生成)

  7. display:none与visibility:hidden的区别?
    display:none 不显示对应的元素,在文档布局中不再分配空间(回流+重绘)
    visibility:hidden 隐藏对应元素,在文档布局中仍保留原来的空间(重绘)

  8. CSS优化、提高性能的方法有哪些?

避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免!important,可以选择其他选择器
尽可能的精简规则,你可以合并不同类里的重复规则

10.什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

  • 响应式网页设计之Viewport
    Viewport 是用户网页的可视区域。
    Viewport 随设备而异,在移动手机上比在电脑屏幕上要小。
    在平板电脑和移动手机之前,网页只为电脑屏幕设计,网页的静态设计和固定大小是很常见的。
    然后,当我们开始使用平板电脑和手机上网的时候,固定大小的网页太大了,不适合观看。为了解决这个问题,这些设备上的浏览器缩小了整个网页以适应屏幕。
    这并不完美!但可快速修复。

    
    

    窗口元素为浏览器提供了如何控制页面尺寸和缩放的说明。
    width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度(其将根据设备变化而变化)。
    initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。

  • 网格视图
    前端使用过bootstrap框架的朋友们应该很清除介个东西,所谓网格视图,是把网页分割为n列,通常是 12 列,宽度为100%,平分下来每列为8.33%,在浏览器窗口大小调整时会自动伸缩。

  • 媒体查询
    网格视图可以很好的做到同缩同放,但是,当屏幕变得很小的时候,网页缩得很小,一个小屏幕一行挤入那么多内容,对用户显得很不友好。
    我们想有重点地显示,怎么做呢?
    使用媒体查询可以做到: 假设一个网页分为左右两面,如图(左侧导航右侧内容)
    前端面试题目整理——css篇_第3张图片

手机屏幕下,全部显示会显得很拥挤,如果左侧导航不显示就好了,像这样
前端面试题目整理——css篇_第4张图片
是不是好多了~简单实现如下:

// 屏幕大小小于768px时候
.left {
	display: none;
}
@media only screen and (min-width: 768px) {
	.left {
		display: block;
	}
}
  • 网格和媒体查询结合

    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    @media only screen and (min-width: 768px) {
        /* For desktop: */
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}
    }
    
    // 结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局
    // 如果是竖屏背景将是浅蓝色:
    @media only screen and (orientation: landscape) {
        body {
            background-color: lightblue;
        }
    }
    
  1. 使用flex布局搭配百分比很容易实现自适应的多行多列
    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

  2. 移动端web页面适配方案(经典)(将viewport的scale设为设备像素比dpr的倒数+rem)
    viewport=>缩放到合适的大小
    rem=>根据不同大小的屏幕修改内容大小(大屏东西大,小屏东西小)
    https://www.jianshu.com/p/e5ca5b78e03e
    https://segmentfault.com/a/1190000008767416
    根据设备像素比设置viewport的缩放大小,再配合rem适配

  3. rem实现移动端自适应
    http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/
    http://caibaojian.com/flexible-js.html

  4. 1px边框问题

  5. BFC(格式化上下文)
    https://zhuanlan.zhihu.com/p/25321647

    只要元素满足下面任一条件即可触发 BFC 特性:
    body 根元素
    浮动元素:float 除 none 以外的值
    绝对定位元素:position (absolute、fixed)
    display 为 inline-block、table-cells、flex
    overflow 除了 visible 以外的值 (hidden、auto、scroll)

  6. 居中布局的实现
    https://www.cnblogs.com/coco1s/p/4444383.html

你可能感兴趣的:(css,面试)