CSS知识点面试总结

3216

一、盒子模型

1.标准盒子模型和IE盒子模型

  • **标准(W3C)盒子模型:**内容content+填充padding+边框border+边界margin

​ 宽高指的是 content 的宽高

  • **低版本IE盒子模型:**内容(content+padding+border)+ 边界margin,

​ 宽高指的是 content+padding+border 部分的宽高

2.CSS如何设置这两种模型

box-sizing : content-box  
box-sizing : border-box

3.JS如何设置获取盒子模型对应的宽和高

dom.style.width/height;//设置获取的是内联样式
dom.currentStyle.width/height;//只有IE支持
window.getComputedStyle(dom).width/height;//兼容性好
dom.getBoundingClientRect().width/height;//适用场所:计算一个元素的绝对位置

4.margin塌陷/margin重叠

标准文档流中,竖直方向的margin不叠加,只取较大的值作为margin(水平方向的margin是可以叠加的,即水平方向没有塌陷现象)。

PS:如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有margin重叠的现象的。

  • 兄弟元素之间

    竖直方向的margin不叠加,以较大的为准

  • 父子元素之间

    margin这个属性,本质上描述的是兄弟和兄弟之间的距离; 最好不要用这个marign表达父子之间的距离。

    所以,如果要表达父子之间的距离,我们一定要善于使用父亲的padding,而不是儿子的margin。

5.BFC

BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。

1.如何生成BFC

只要元素满足下面任一条件即可触发 BFC 特性:

  • body 根元素
  • 浮动元素:float 除 none 以外的值
  • 绝对定位元素:position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)【最常用】

2.BFC的原理/BFC的布局规则

  • BFC 内部的子元素,在垂直方向,边距会发生重叠
  • BFC在页面中是独立的容器,外面的元素不会影响里面的元素,反之亦然。(稍后看举例1
  • BFC区域不与旁边的float box区域重叠。(可以用来清除浮动带来的影响)。(稍后看举例2
  • 计算BFC的高度时,浮动的子元素也参与计算。(稍后看举例3

3.BFC的应用

  • 解决margin重叠

    当父元素和子元素发生 margin 重叠时,解决办法:给子元素或父元素创建BFC

  • BFC区域不与float区域重叠

  • 清除浮动

参考链接:CSS盒模型及BFC

10 分钟理解 BFC 原理

二、选择器

1.常用CSS选择器

  • id选择器(#myid)
  • 类选择器(.myclass)
  • 标签选择器(div, h1,p)
  • 通配符选择器(*)
  • 相邻选择器(h1 + p)
  • 子选择器(ul > li)
  • 后代选择器(li a)
  • 属性选择器(a[rel="external"])
  • 伪类选择器(:link, :visited, :active , :hover, :before, :after)

2.CSS3新增伪类

  • :first-child 匹配父元素中第一个子元素
  • :last-child 匹配父元素中最后一个子元素
  • :nth-child() 匹配父元素中第n个子元素(n可以是一个数字,一个关键字,或者一个公式)
    • 参数n时选中所有行
    • 参数为n+i时表示从第i行开始下面的都被选中,如n+3,从第3行开始下面全部选中
    • 参数为-n+i时表示选中前i个元素,如-n+6表示选中前6个
    • 2n表示2的倍数行被选中,选中偶数行
    • 2n+1表示选中奇数行
    • 3n表示每个3行选中一次
    • odd表示奇数,even表示偶数
  • :nth-last-child(n) 匹配倒数第n个同级兄弟元素
  • :nth-of-type(n) 匹配同类型中的第n个同级兄弟元素
  • :root 根元素
  • :not(selector)

三、样式

1.优先级计算规则

  • 最近的祖先样式比其他祖先样式优先级高
  • "直接样式"比"祖先样式"优先级高
  • 内联样式 > ID 选择器 (权重100)> 类选择器 (权重10)= 属性选择器 = 伪类选择器 > 标签选择器 (权重1)= 伪元素选择器
  • !important 拥有最高优先级

2.HTML中引入CSS的方式

  • 内联方式:直接在 HTML 标签中的 style 属性中添加 CSS

    <div style="background: red"></div>

  • 嵌入方式:在 HTML 头部中的 <style> 标签下书写 CSS 代码

    <head>
        <style>
    
        .content {
            background: red;
        }
    
        </style>
    </head>
    
  • 链接方式:使用 HTML 头部的<head>标签引入外部的 CSS 文件

    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
  • 导入方式指的是使用 CSS 规则引入外部 CSS 文件

    <style>
        @import url(style.css);
    </style>
    

比较链接方式和导入方式(link和@import的区别)

  1. link属于html标签,除了引入css样式以外还可以定义RSS等其他事物,@import是css提供的,只能引入css
  2. lilnk在页面加载的时候会同时加载,@import引用的css要等页面加载结束后再加载
  3. link是html标签,没有兼容性,@import只有ie5以上才能识别

3.常见单位

  • px:绝对单位,页面按精确像素展示

  • em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值

  • rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持

  • vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%

  • vh:viewpoint height,视窗高度,1vh等于视窗高度的1%

  • vmin:vw和vh中较小的那个

  • vmax:vw和vh中较大的那个

  • %:百分比

四、字体

1.如何使用自定义字体

通过@font-face添加样式

支持的字体文件类型:

  • EOT
  • OTF
  • TTF
  • WOFF
  • WOFF2
@font-face {
  font-family: 'Open Sans';
  src: url('OpenSans-Regular.ttf') format('truetype');
}

#text-element {
  font-family: 'Open Sans', Arial, sans-serif;
}

2.如何使用字体图标

推荐:阿里巴巴图标库

  1. 找到网站,搜索需要的图标

  2. 将图片加入购物车,点击页面右上角的购物车按钮,将所有图标添加到自定义项目中。

  3. 在弹出的页面中,点击下载至本地。

  4. 解压下载后的文件夹,我们需要的是fonts文件夹style.css, 将这个文件放入你的项目中,style.css文件中引入了字体文件,所以会有路径,这个时候你在使用的时候要注意路径问题,代码如下:(这里的多种字体文件是为了兼容浏览器)

    @font-face {  font-family: 'icomoon';  src:  url('../fonts/icomoon.eot?snsrp8');  src:  url('../fonts/icomoon.eot?snsrp8#iefix') format('embedded-opentype'),    url('../fonts/icomoon.ttf?snsrp8') format('truetype'),    url('../fonts/icomoon.woff?snsrp8') format('woff'),    url('../fonts/icomoon.svg?snsrp8#icomoon') format('svg');  font-weight: normal;  font-style: normal;}
    
    
  5. 在页面中,我们只要给一个元素添加相应的类名就行,因为在style.css中已经将类名对应的图标写好了。

    .icon-account:before {
    content: "\e900";
    }
    .icon-caifu:before {
    content: "\e901";
    }
    .icon-edit:before {
    content: "\e902";
    }
    
    <span class="icon-account"></span>
    

3.让页面里的字体变清晰,变细用CSS怎么做?

-webkit-font-smoothing在window系统下没有起作用,

但是在IOS设备上起作用-webkit-font-smoothing:antialiased是最佳的,灰度平滑

五、文本属性

1.多行文本省略

text-overflow:ellipsis

使用text-overflow时需要满足:

  1. 块级元素
  2. overflow:hidden(非visible)
  3. width:具体值(max-width,flex也可)
  4. white-space:nowrap|pre;(不折行)

2.CSS有哪些属性可以继承?

  1. 字体系列属性:如font,font-family,font-size,font-weight,font-style
  2. 文本系列属性:如color,text-indent(文本缩进),text-align(文本水平对齐),line-height,word-spacing(字间隔)
  3. 元素可见性:visibility
  4. 表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout
  5. 列表属性:list-style-type、list-style-image、list-style-position、list-style
  6. cursor

参考链接:css有哪些属性可以继承

六、基本视觉格式化

1.display有哪些值

  • inline(默认)–内联
  • none–隐藏
    • block–块显示
    • table–表格显示
    • list-item–项目列表
    • inline-block-内联块
    • flex
    • grid-网格布局

2.display:inline-block产生间距解决方法

  • 为什么产生间距?

    归根结底这是一个西文排版的问题。举一个很简单的例子:

    I am very happy

    南京市长江大桥欢迎您

    英文有空格作为词分界,而中文则没有。(这背后延伸出一个中文分词的问题)

    这个问题的原因可以上述到SGML(标准通用标记语言)和TeX(排版工具),它实际上是一个行内(inline)的问题,它由空格、换行或回车所产生空白符所致

  • 解决方法

    • 改变书写方式:去掉html中的空格
    • 在父容器使用 font-size:0
    • 使用margin负值
    • 使用word-spacing或letter-spacing

3.display:none 与 visibility:hidden 的区别是什么?

  • 是否占据空间

    display:none,该元素不占据任何空间,在文档渲染时,该元素如同不存在(但依然存在文档对象模型树中)。 visibility:hidden,该元素空间依旧存在。 即一个(display:none)不会在渲染树中出现,一个(visibility :hidden)会。

  • 是否渲染

    display:none,会触发reflow(回流),进行渲染。 visibility:hidden,只会触发repaint(重绘),因为没有发现位置变化,不进行渲染。

  • 是否是继承属性

    display:none,display不是继承属性,元素及其子元素都会消失。 visibility:hidden,visibility是继承属性,若子元素使用 visibility:visible,则不继承,这个子孙元素又会显现出来。

  • 读屏器是否读取

    读屏器不会读取display:none的元素内容,而会读取visibility:hidden的元素内容。

4.visibility:collapse

  • 对于一般的元素,它的表现跟display:hidden是一样的。

  • 但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,它的表现却跟display: none一样,也就是说,它们占用的空间也会释放。

在不同浏览器下的区别:

  • 在谷歌浏览器里,使用collapse值和使用hidden值没有什么区别。
  • 在火狐浏览器、Opera和IE11里,使用collapse值的效果就如它的字面意思:table的行会消失,它的下面一行会补充它的位置。

5.rgba和opacity透明有何不同?

  • rgba()只作用于元素自身的颜色或背景色,对元素的内容没有影响。

  • opacity在作用于元素自身的颜色或背景色的同时,也作用于元素内的内容的透明度。

七、定位

1.position有哪些值

  • static:默认值。没有定位,元素出现在正常的文档流中(忽略 top, bottom, left, right 或者 z-index 声明)

  • relative:生成相对定位的元素,相对于其正常位置进行定位,不脱离文档流

  • absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位

  • fixed:生成固定定位的元素,相对于浏览器窗口进行定位。(老IE不支持)

  • inherit:规定应该从父元素继承 position 属性的值

  • sticky:粘性定位,它主要用在对 scroll 事件的监听上

2. 居中

绝对定位技巧:

定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际宽度

定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际高度

1.1 如何居中div?

参考链接:blog.csdn.net/weixin_3758…

1.1.1 水平居中

  • 行内元素:父元素是块级元素,给父元素设置text-align:center,父元素不是块级元素,先将父元素设置为块级元素,再给父元素设置text-align:center
  • 图片:给图片设置clear:both;display:block;margin:auto;
  • 块级元素

​ 方案一:(1)宽度定,需要谁居中,就给谁设置margin:0 auto;

​ (2)宽度不定,默认子元素宽度与父元素宽度一样,给子元素设置display:inline-block;display:inline,将其转换成行内块级元素/行内元素,给父元素设置text-align:center

​ 方案二:使用定位属性

​ 子元素设置绝对定位,父元素设置相对定位,left:50%,margin-left:-子元素的宽度的一半(宽度定),或者transform:translateX(-50%)(宽度不定)

​ 方案三:使用flexbox布局实现(宽度定不定都行)

​ 父元素设置display:flex;justify-content:center;

1.1.2 垂直居中

  • 单行的行内元素:设置 行高=父元素的高

  • 多行的行内元素:父元素设置display:table-cell;vertical-align:middle(行级、块级、图片都通杀)

  • 块级元素:

    ​ 方案一:子元素设置绝对定位,父元素设置相对定位,子元素设置top:50%;``margin-top:-子元素高度的一半(高度定),transform:translateY(-50%);(高度不定)

    ​ 方案二:flex布局,给父元素设置display:flex;align-items:center;(行级、块级、图片都通杀)

1.1.3 水平垂直居中

  • 已知高度和宽度的元素

    ​ 方案一:子元素设置绝对定位,父元素设置相对定位,子元素设置left:0;right:0;top:0;bottom:0;margin:auto;

    ​ 方案二:子元素设置绝对定位,父元素设置相对定位,子元素设置top:50%;left:50%(左上角垂直居中),margin-top:-子元素高的一半,margin-left:-子元素宽的一半

  • 未知高度和宽度的元素

    ​ 方案一:(定位属性)子元素设置绝对定位,父元素设置相对定位,子元素设置top:50%;left:50%(左上角垂直居中),transform:translate(-50%,-50%)(根据自身定位实现偏移)

    ​ 方案二:(flex布局)父元素定义display:flex;justify-content:center;align-items:center;

1.2 如何居中绝对定位的div?

1.3 如何居中一个浮动元素?

参考链接:segmentfault.com/a/119000001…

  • 水平居中

    • 定宽:relative + margin-left + left

    ​ 给浮动元素本身设置position:relative;left:50%;margin-left:-浮动元素宽的一半

    • 不定宽:父float + 父relative + 子relative

    ​ 给父元素清除浮动,设置float:left;,父元素设置position:relative;left:50%;,内部浮动元素设置position:relative;left:-50%;或right:50%;

    • 不管定宽还是不定宽:flex

      父元素设置display:flex;justify-content:center;

  • 垂直居中

    • 定高:(父relative + 子absolute + line-height) + top/bottom或margin-top
方式一:relative + absolute + line-height + top/bottom
   #outer {
      position: relative;
    }
    #inner {
      line-height:100px;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
    }

方式二:relative + absolute + line-height + margin-top
#outer {
      position: relative;
}
#inner {
      line-height:100px;
      position: absolute;
      top: 50%;
      margin-top:-50px
}

<div id="outer" style="height:200px;">
  <div id="inner" style="float: left;height: 100px;">我是垂直居中的元素</div>
</div>
    • 通用:flex
    #outer {
        display:flex;
        align-items:center;
    }
    
    <div id="outer" style="height:200px;">
      <div id="inner">我是垂直居中的元素</div>
    </div>
    
  • 水平垂直居中

    • flex
    • 子元素可以设置 mairgin 以及word-wrap:break-word; 方便效果

八、浮动

1.为什么出现浮动

浮动的初衷,是实现类似word里的文字环绕图片的效果。

普通文档流,因为从上到下,从左到右,规定的太死了,每个元素都被限制了位置。所以才引入了浮动,形成丰富的页面效果。

定位的引入,更加增强了,页面布局的可能。

2.浮动的工作原理

浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

3.浮动元素引起的问题

  • 父元素的高度无法被撑开,影响与父元素同级的元素

  • 与浮动元素同级的非浮动元素会跟随其后

  • 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

4.清除浮动的方式

  • 父级div定义height

    • 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题

    • 优点:简单,代码少,容易掌握

    • 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

    • 建议:不推荐使用,只建议高度固定的布局时使用

  • 额外标签法

    • 原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
    • 优点:简单,代码少,浏览器支持好,不容易出现怪问题
    • clear属性只适用于块级元素。这个办法会增加额外的标签使HTML结构看起来不够简洁。
    • 建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
  • 父级 div 定义 overflow:hidden

    • 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
    • 优点:简单,代码少,浏览器支持好
    • 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏
    • 建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
  • 父级div定义伪类:after和zoom

    • 原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE专有属性)可解决ie6,ie7浮动问题

    • 优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)

    • 缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持

    • 建议:推荐使用,建议定义公共类,以减少CSS代码

    .clearfix:after{
        content:"\0020"; //父元素结尾放一个空白符
        height:0; //让这个空白字符不显示出来
        display:block;
        clear:both; //确保这个空白字符是非浮动的独立块
    }
    .clearfix{
        zoom:1; //兼容IE6
    }
    

5.设置元素浮动后,该元素的display值是多少?

自动变为display:block

九、Sass、Less、Stylus区别

1.什么是CSS预处理器?

CSS预处理器是一种语言用来为CSS增加一些编程的特性,无需考虑浏览器兼容问题,例如你可以在CSS中使用变量,简单的程序逻辑、函数等在编程语言中的一些基本技巧,可以让CSS更加简洁,适应性更强,代码更直观等诸多好处

2.区别

  • 基本语法区别

    • Sass是以.sass为扩展名,Less是以.less为扩展名,Stylus是以.styl为扩展名
  • 变量的区别

    • Sass 变量必须是以$开头的,然后变量和值之间使用冒号(:)隔开,和css属性是一样的。

    • Less 变量是以@开头的,其余sass都是一样的。

    • Stylus 对变量是没有任何设定的,可以是以$开头或者任意字符,而且变量之间可以冒号,空格隔开,但是在stylus中不能用@开头

  • 三种预处理器都有:嵌套、运算符、颜色函数、导入、继承、混入。Stylus还有一些高级特性。例如循环、判断等

十、flex布局

1.基本概念

  • Flex布局元素,称为Flex容器,简称"容器"。它的所有子元素自动成为容器元素,简称"项目"。
  • 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的排列方式:从左到右;交叉轴的排列方式:从上到下;

2.容器的属性

1.flex-direction

属性决定主轴的方向 (即项目的排列方式)

  • row 主轴水平方向,起点在左端
  • row-reverse 主轴水平方向,起点在末端
  • column 主轴垂直方向,起点在上沿
  • colunm-reverse 主轴垂直方向,起点在下沿

2.flex-wrap

  • nowrap 默认,不换行
  • wrap 换行,第一行在上面
  • wrap-reverse 换行,第一行在下面

3.flex-flow

是flex-direction 属性和flex-wrap属性的简写,默认值row、nowrap

4.justify-content

属性定义了项目在主轴上的对齐方式

  • flex-start 默认值,左对齐
  • flex-end 右对齐
  • center 居中
  • space-between 两端对齐,项目之间间隔相等
  • space-around 两端间隔是中间项目的一半
  • space-evenly 项目之间间隔均分(包括与两端的间隔)

5.align-items

定义项目交叉轴上如何对齐(单行)

  • flex-start 交叉轴起点对齐
  • flex-end 交叉轴终点对齐
  • center 垂直方向,居中对齐
  • baseline 项目第一行文字基线对齐
  • stretch 默认值,如果项目未设置高度或设为auto,将占满整个容器的高度

6.align-content

多行轴线对齐,用法痛align-items

3.项目的属性

1.order

定义项目排列顺序,数值越小越靠前,默认为0

2.flex-grow

定义项目放大比例,默认为0

3.flex-shrink

定义项目缩小比例,默认为1,如果空间不足则会缩小,值为0不能缩小

4.flex-basis

定义项目自身大小,默认auto

5.flex

属性是flex-grow,flex-shrink ,flex-basis的简写,默认值为0、1、auto

6.align-self

项目自身对齐

十一、页面布局

参考链接:各种页面常见布局

页面布局

1.两栏式布局

1.1 左列定宽,右列自适应

1.2 左列自适应,右列定宽

1.3 一列不定,一列自适应

2.三栏式布局

2.1 两列定宽,一列自适应

2.2 两侧定宽,中间自适应

1.浮动

左侧设置左浮动,右侧设置右浮动即可,中间会自动地自适应。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .layout article div{
                height:100px;
            }
            .layout.float .left{
                float:left;
                width:300px;
                background-color:red;
            }
            .layout.float .right{
                float:right;
                width:300px;
                background-color:blue;
            }
            .layout.float .center{
                background-color:green;
            }
        </style>
    </head>
    <body>
        <section class="layout float">
        	<article class="left-center-right">
            	<div class="left">
                    我是left
                </div>
                <div class="center">
                    我是center
                </div>
                <div class="right">
                    我是right
                </div>
            </article>
        </section>
    </body>
</html>

2.绝对定位

左侧设置为绝对定位, left:0px。右侧设置为绝对定位, right:0px。中间设置为绝对定位,left 和right 都为300px,即可。中间的宽度会自适应。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .layout article div{
                height:100px;
            }
             .layout.absolute .left-center-right {
            position: relative;
        }

        .layout.absolute .left {
            position: absolute;
            left: 0;
            width: 300px;
            background: red;
        }

        /* 【重要】中间的区域,左侧定位300px,右侧定位为300px,即可完成。宽度会自使用 */
        .layout.absolute .center {
            position: absolute;
            left: 300px;
            right: 300px;
            background: green;
        }

        .layout.absolute .right {
            position: absolute;
            right: 0;
            width: 300px;
            background: blue;
        }
        </style>
    </head>
    <body>
        <section class="layout absolute">
        	<article class="left-center-right">
            	<div class="left">
                    我是left
                </div>
                <div class="center">
                    我是center
                </div>
                <div class="right">
                    我是right
                </div>
            </article>
        </section>
    </body>
</html>

3.flexbox布局

将左中右所在的容器设置为display: flex,设置两侧的宽度后,然后让中间的flex = 1,即可。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }

        .layout article div {
            height: 100px;
        }

        .left-center-right {
            display: flex;
        }

        .layout.flex .left {
            width: 300px;
            background: red;
        }

        .layout.flex .center {
            flex: 1;
            background: green;
        }

        .layout.flex .right {
            width: 300px;
            background: blue;
        }
    </style>

</head>

<body>
    <section class="layout flex">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="center">
                <h1>flex布局解决方案</h1>
                我是 center
            </div>
            <div class="right">
                我是 right
            </div>

        </article>
    </section>

</body>

</html>

4.表格布局

设置整个容器的宽度为100%,设置三个部分均为表格(display:table-cell),然后左边的单元格为 300px,右边的单元格为 300px,即可。中间的单元格会自适应。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }

        .layout.table div {
            height: 100px;
        }

        /* 重要:设置容器为表格布局,宽度为100% */
        .layout.table .left-center-right {
            width: 100%;
            display: table;
            height: 100px;

        }

        .layout.table .left-center-right div {
            display: table-cell; /* 重要:设置三个模块为表格里的单元*/
        }

        .layout.table .left {
            width: 300px;
            background: red;
        }

        .layout.table .center {
            background: green;
        }

        .layout.table .right {
            width: 300px;
            background: blue;
        }
    </style>

</head>

<body>
    <section class="layout table">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="center">
                <h1>表格布局解决方案</h1>
                我是 center
            </div>
            <div class="right">
                我是 right
            </div>

        </article>
    </section>

</body>

</html>

5.网格布局grid

设置容器为网格布局,宽度为100%,设置网格为三列,并设置每列的宽度,即可。

方法1:浮动:

  • 优点:兼容性好。
  • 缺点:浮动会脱离标准文档流,因此要清除浮动。我们解决好这个问题即可。

方法:2:绝对定位

  • 优点:快捷。
  • 缺点:导致子元素也脱离了标准文档流,可实用性差。

方法3:flex 布局(CSS3中出现的)

  • 优点:解决上面两个方法的不足,flex布局比较完美。移动端基本用 flex布局。

方法4:表格布局

  • 优点:表格布局在很多场景中很实用,兼容性非常好。因为IE8不支持 flex,此时可以尝试表格布局
  • 缺点:因为三个部分都当成了单元格来对待,此时,如果中间的部分变高了,其会部分也会被迫调整高度。但是,在很多场景下,我们并不需要两侧的高度增高。

什么时候用 flex 布局 or 表格布局,看具体的场景。二者没有绝对的优势,也没有绝对的不足。

方法5:网格布局

  • CSS3中引入的布局,很好用。代码量简化了很多。

PS:面试提到网格布局,说明我们对新技术是有追求的。

延伸:如果题目中去掉高度已知

问题:题目中,如果去掉高度已知,我们往中间的模块里塞很多内容,让中间的模块撑开。会发生什么变化?哪个布局就不能用了?

分析:其实可以这样理解,我们回去看上面的动画效果,当中间的模块变得很挤时,会发生什么效果?就是我们想要的答案。

答案是:flex 布局和表格布局可以通用,其他三个布局都不能用了。

3.多列布局

3.1 等宽布局

3.2 九宫格布局

3.3 栅格系统

十二、CSS优化、提高性能的方法

  1. 避免过度约束

  2. 避免后代选择符

  3. 避免链式选择符

  4. 使用紧凑的语法

  5. 避免不必要的命名空间

  6. 避免不必要的重复

  7. 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么

  8. 避免!important,可以选择其他选择器

  9. 尽可能的精简规则,你可以合并不同类里的重复规则

  10. 修复解析错误

  11. 避免使用多类选择符

  12. 移除空的css规则

  13. 正确使用display的属性:由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。

  14. display:inline后不应该再使用width、height、margin、padding以及float。

  15. display:inline-block后不应该再使用float。

  16. display:block后不应该再使用vertical-align。

  17. display:table-*后不应该再使用margin或者float。

  18. 不滥用浮动:虽然浮动不可避免,但不可否认很多css bug是由于浮动而引起。

  19. 不滥用web字体

  20. 对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

  21. 不声明过多的font-size:这是设计层面的问题,设计精良的页面不会有过多的font-size声明。

  22. 不在选择符中使用ID标识符,主要考虑到样式重用性以及与页面的耦合性。

  23. 不给h1~h6元素定义过多的样式

  24. 全站统一定义一遍heading元素即可,若需额外定制样式,可使用其他选择符作为代替。

  25. 不重复定义h1~h6元素

  26. 值为0时不需要任何单位

  27. 标准化各种浏览器前缀:通常将浏览器前缀置于前面,将标准样式属性置于最后,类似:.foo{

  28.     -moz-border-radius: 5px;
        border-radius: 5px; 
    }复制代码
    
  29. 使用CSS渐变等高级特性,需指定所有浏览器的前缀

  30. 避免让选择符看起来像正则表达式

  31. CSS3添加了一些类似~=等复杂属性,也不是所有浏览器都支持,需谨慎使用。

  32. 遵守盒模型规则(Beware of broken box models)

十三、响应式设计

  • 响应式设计就是网站能够兼容多个终端,而不是为每个终端做一个特定的版本

  • 基本原理是利用CSS3媒体查询,为不同尺寸的设备适配不同样式

  • 对于低版本的IE,可采用JS获取屏幕宽度,然后通过resize方法来实现兼容:

    $(window).resize(function () {
      screenRespond();
    });
    screenRespond();
    function screenRespond(){
    var screenWidth = $(window).width();
    if(screenWidth <= 1800){
      $("body").attr("class", "w1800");
    }
    if(screenWidth <= 1400){
      $("body").attr("class", "w1400");
    }
    if(screenWidth > 1800){
      $("body").attr("class", "");
    }
    }