奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 笔经面经 >

Web前端面试笔记(CSS相关知识)

时间:2017-10-31 21:23来源:百面网 作者:
1. 盒子模型 标准盒子模型:盒子模型范围包括了margin\border\padding\content.但content(width)不包括其他部分。 IE

1. 盒子模型

 

标准盒子模型:盒子模型范围包括了margin\border\padding\content.但content(width)不包括其他部分。

 

IE的盒子模型的content(width)包括了border和padding

 

目前css3中属性box-sizing可以解决IE7以上的问题。

 

 重新定义盒子大小,解决盒模型在不同的浏览器中表现不一致的问题。

 

box-sizing: content-box | border-box;

content-box :  定义的width和height就直接是内容的宽度

border-box: 内容的宽度是 width -边框的宽度-padding

CSS定位

 

2. 定位机制

 

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

普通流:元素的位置由它在HTML中的位置决定的。

块级框:从上到下,一个接一个,垂直距离由框的垂直空白边决定的

行内框:水平布置。可使用水平填充,边框可调节水平间距。

position属性

 

相对定位的盒子仍在标准流中,相对于它原本的位置,通过偏移(left、right)指定的距离,到达新的位置。它对父块没有任何影响。

使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。

 

3.元素选择器,优先级及匹配原理 选择器种类详解

 

css匹配原理

    从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。所以在使用less的时候要防止层叠过多。

 

css权重

    通配选择符的权值 0,0,0,0

    标签的权值为 0,0,0,1

    类的权值为 0,0,1,0

    属性选择的权值为 0,0,1,1(0,0,1,0) 

    伪类选择的权值为 0,0,1,0

    伪对象选择的权值为 0,0,0,1

    ID的权值为 0,1,0,0

    important的权值为最高 1,0,0,0

 

使用的规则也很简单,就是 选择器的权值加到一起,大的优先;如果权值相同,后定义的优先 

 

从上面我们可以得出两个关键的因素:

    1.权值的大小跟选择器的类型和数量有关

    2.样式的优先级跟样式的定义顺序有关

 

总结:比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数 ,至于各级别的优先级,大家应该已经很清楚了,就是:

 

!important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承

 

ID选择器的效率是最高,而伪类选择器的效率则是最低

 

4. Css水平居中

 

基础布局对以后的开发很有作用。

 

   自动空白边居中

    缺点:IE5/6不支持,需要hack,并需要对两个元素添加样式

 

    <body> <div id=”wrapper”> </div></body>

 

    body{

        text-align: center; /*text-align:center让IE中的元素居中*/

        min-width: 760px; 

    }

    .wrapper{

        margin: 0 auto;

        width: 720px;

        text-align: left;       /* 防止继承父类 */

    }

 

2. 使用定位和负值空白边

 

    .wrapper{

        position: relative;

        width: 720px;

        left: 50%;

        margin-left: -360px;

        //对应的垂直居中也好处理了

        top: 50%;

    }

 

3. 神奇的弹性盒子 flex

 

    IE10+,Android2.1+ ,IOS safire3.2(添加-webkit-)兼容,所以目前移动端可以大量使用。

 

    body{

        display: flex;

        justify-content: center;  //水平居中

        //垂直居中

        align-items: center;   //当然需要设置容器的高度值

    }

 

5. BFC

 

BFC(box , formatting context),块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的 margin 会发生折叠。它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。

 

BFC布局规则

 

1.内部的Box会在垂直方向,一个接一个地放置。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

4.BFC的区域不会与float box重叠。(所以有左边宽度自适应)

5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

6.计算BFC的高度时,浮动元素也参与计算

 

    <b>哪些元素会触发BFC</b>

    根元素

    float属性不为none

    position为absolute或fixed

    display为    inline-block, table-cell, table-caption, flex, inline-flex

    overflow不为visible

 

    <b>IE如何解决?Layout </b> 

        position:absolute;

        float: left|right;

        display: inline-block;

        width: value;

        height: value;

        zoom:value(非normal);  //通常zoom:1;

 

 

具有以上优点,BFC实际中的作用

 

    自适应布局、清除浮动、防止margin重叠。

 

6.布局问题

 

移动端高清、多屏适配方案

 

1)响应式布局原理

   检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比的,而不是固定的宽度。

   因为大屏幕的移动设备越来越普及。而自适应布局已经无法胜任各种浏览需求。响应式设计的目的是尽可能以最好的布局显示您的数据,以实现用户友好的 Web 页面。

   现在CSS3有了个更为实用的 media query。而移动终端的浏览器(都是基于webkit内核的浏览器)基本已经完全支持了css3.他可以为你获取各种终端的数据。

   栅栏系统(响应式)

   响应式图片

   浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片,如屏幕分辨率320*480,那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高,也就是高清屏,那么我们就得输出2倍分辨率的图形(宽:640px);以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过 http://screensiz.es/phone查询。

    解决方案:响应式图形的草案:新定义标签<picture>。

 

 

高清:通常指的是分辨率高,如iphone6的dpr=2,6plus的dpr=3。

 

2)静态、自适应、流式、响应式四种网页布局有什么区别

 

   自适应布局(Adaptive Layout)

      自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化。

      你可以把自适应布局看作是静态布局的一个系列。

 

   流式布局(Liquid Layout)

      流式布局(Liquid)的特点(也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

 

   响应式布局(Responsive Layout)

      分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。

      把响应式布局看作是流式布局和自适应布局设计理念的融合

 

7. CSS3新特性

 

选择器,文本、多列布局、渐变效果、css盒子、边框、背景、动画、转换

 

8.CSSHack

 

1.什么是CSS hack

  由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

 

2.方式

    1).一般是针对IE浏览器处理

            只在IE下生效

            <!–[if IE]>

            这段文字只在IE浏览器显示

            <![endif]–>

 

            只在IE6下生效

            <!–[if IE 6]>

            这段文字只在IE6浏览器显示

            <![endif]–>

 

            只在IE6以上版本生效

            <!–[if gte IE 6]>

            这段文字只在IE6以上(包括)版本IE浏览器显示

            <![endif]–>

 

            只在IE8上不生效

            <!–[if ! IE 8]>

            这段文字在非IE8浏览器显示

            <![endif]–>

 

            非IE浏览器生效

            <!–[if !IE]>

            这段文字只在非IE浏览器显示

            <![endif]–>

2).类内属性前缀法

 

hack 写法

* *color

+ +color

– -color

_ _color

# #color

\0 color:red\0

\9\0 color:red\9\0

!important color:blue !important;color:green;

 

9. link与@import的区别

 

1. link是HTML方式, @import是CSS方式

2. link最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOUC

3. link可以通过rel=”alternate stylesheet”指定候选样式

4. 浏览器对link支持早于@import,可以使用@import对老浏览器隐藏样式

5. @import必须在样式规则之前,可以在css文件中引用其他文件

总体来说:link优于@import

 

10. display 属性 主要把以下值区别开

 

 display: inline | block | inline-block | inherit ;

 

1.inline

    a) 元素显示方式:”文本方式”,1个挨着1个,不独自占有1行;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。

 

    b) 内嵌的元素也必须是内联元素:如<a></a>,不能在里面嵌入<div></div>等块级元素

 

    c) 常用的标签有:<a>、<input>、<label>、<img>

 

2.block

 

    a) 元素显示方式:每个元素独自占有1行,相当于前后都带有换行符;

    b) 内嵌的元素可以是内联或块级元素;

    c) 常用的元素有:<h1>~<h6>、<div>、<hr>等等;

 

3.inline-block(IE8+)

    对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格

 

11. display: none;与visibility: hidden;的区别

 

共性: 都能隐藏元素

特性: 

    1. display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见

    2. display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility: hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式

    3. 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。

    4. 读屏器不会读取display: none;元素内容;会读取visibility: hidden;元素内容

 

12. CSS reset

 

浏览器样式重置。HTML标签在浏览器中都有默认的样式,例如p标签有上下边距,strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别,例如ul默认带有缩进样式,在IE下,它的缩进是由margin实现的,而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题,影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉,这就是CSS reset。

 

YUI为我们提供了一个很好的CSS reset,可以直接下载使用,这段代码很成熟,推荐大家使用。YUI的CSS reset主要做了下面几点:

•   白色背景,黑色字体

•   margin和padding设为0

•   去掉table的边框

•   去掉列表样式(ol,ul,dl)

•   所有文字字号设为100%

•   font-style和font-weight设为normal

•   更好(但不完全)的表格字体继承

•   减小sup和sub对line-height的影响

 

13. 瀑布流

 

实现方式:

1. 传统多列浮动

    *  各列固定宽度,并且左浮动;

    *  一列中的数据块为一组,列中的每个数据块依次排列即可;

    *  更多数据加载时,需要分别插入到不同的列上;

    优点:

        布局简单,应该说没啥特别的难点;

        不用明确知道数据块高度,当数据块中有图片时,就不需要指定图片高度。

    缺点:

        列数固定,扩展不易,当浏览器窗口大小变化时,只能固定的x列,如果要添加一列,很难调整数据块的排列;

        滚动加载更多数据时,还要指定插入到第几列中,还是不方便。

 

2. CSS3 定义,多列布局

 

        #container {

                -webkit-column-count: 5;

                /*-webkit-column-gap: 10px;

                -webkit-column-rule: 5px solid #333;

                -webkit-column-width: 210px;*/

 

                -moz-column-count: 5;

                /*-moz-column-gap: 20px;

                -moz-column-rule: 5px solid #333;

                -moz-column-width: 210px;*/

 

                column-count: 5;

                /*column-gap: 10px;

                column-rule: 5px solid #333;

                column-width: 210px;*/

            }

 

    column-count 为列数; column-gap 为每列间隔距离; column-rule 为间隔边线大小; column-width 为每列宽度; 当只设置 column-width 时,浏览器窗口小于一列宽度时,列中内容自动隐藏; 当只设置 column-count 时,平均计算每列宽度,列内内容超出则隐藏; 都设了 column-count 和column-width,浏览器会根据 count 计算宽度和 width 比较,取大的那个值作为每列宽度,然后当窗口缩小时,width 的值为每列最小宽度。

 

优点:

    直接 CSS 定义,最方便了;

    扩展方便,直接往容器里添加内容即可。

缺点:

    只有高级浏览器中才能使用;

    还有一个缺点,他的数据块排列是从上到下排列到一定高度后,再把剩余元素依次添加到下一列,这个本质上就不一样了;

    鉴于这两个主要缺点,注定了该方法只能局限于高端浏览器,而且,更适合于文字多栏排列。

 

3.绝对定位(最优方案)

    方便添加数据内容,窗口变化,列数/数据块会自动调整

    缺点:

        需要实现知道数据块高度,如果其中包含图片,需要知道图片高度;

        JS 动态计算数据块位置,当窗口缩放频繁,可能会狂耗性能。

 

 

14. 什么是FOUC?如何避免

 

Flash Of Unstyled Content:用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁。同时加载css文件会阻塞文件下载,在FF下,添加<script> </script>(中间有空格)

 

解决方法:把样式表放到文档的head

 

15. 渐进增强和优雅降级

 

渐进增强 :针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

 

优雅降级 :一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容