CSS知识点面试总结

时间  2020-02-27
标签 css 知识 面试 总结 栏目 CSS 繁體版
原文   原文链接

1、盒子模型

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

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

​ 宽高指的是 content 的宽高css

  • **低版本IE盒子模型：**内容（content+padding+border）+ 边界margin，

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

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是能够叠加的，即水平方向没有塌陷现象)。git

PS：若是不在标准流，好比盒子都浮动了，那么两个盒子之间是没有margin重叠的现象的。github

  • 兄弟元素之间web

    竖直方向的margin不叠加，以较大的为准面试

  • 父子元素之间正则表达式

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

    因此，若是要表达父子之间的距离，咱们必定要善于使用父亲的padding，而不是儿子的margin。编程

5.BFC

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

具备 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 原理

2、选择器

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)

3、样式

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中较大的那个

  • %:百分比

4、字体

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是最佳的，灰度平滑

5、文本属性

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有哪些属性能够继承

6、基本视觉格式化

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在做用于元素自身的颜色或背景色的同时，也做用于元素内的内容的透明度。

7、定位

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; 方便效果

8、浮动

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

9、Sass、Less、Stylus区别

1.什么是CSS预处理器?

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

2.区别

  • 基本语法区别

    • Sass是以.sass为扩展名，Less是以.less为扩展名，Stylus是以.styl为扩展名

  • 变量的区别

    • Sass 变量必须是以$开头的，而后变量和值之间使用冒号（：）隔开，和css属性是同样的。

    • Less 变量是以@开头的，其他sass都是同样的。

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

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

10、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、一、auto

6.align-self

项目自身对齐

11、页面布局

参考连接：各类页面常见布局

​ 页面布局

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 栅格系统

12、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）

十3、响应式设计

  • 响应式设计就是网站可以兼容多个终端，而不是为每一个终端作一个特定的版本

  • 基本原理是利用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", "");
}
}
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程