一、盒子模型
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
二、选择器
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的区别)
- link属于html标签,除了引入css样式以外还可以定义RSS等其他事物,@import是css提供的,只能引入css
- lilnk在页面加载的时候会同时加载,@import引用的css要等页面加载结束后再加载
- 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.如何使用字体图标
推荐:阿里巴巴图标库
-
找到网站,搜索需要的图标
-
将图片加入购物车,点击页面右上角的购物车按钮,将所有图标添加到自定义项目中。
-
在弹出的页面中,点击下载至本地。
-
解压下载后的文件夹,我们需要的是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;}
-
在页面中,我们只要给一个元素添加相应的类名就行,因为在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
时需要满足:
- 块级元素
- overflow:hidden(非visible)
- width:具体值(max-width,flex也可)
- white-space:nowrap|pre;(不折行)
2.CSS有哪些属性可以继承?
- 字体系列属性:如font,font-family,font-size,font-weight,font-style
- 文本系列属性:如color,text-indent(文本缩进),text-align(文本水平对齐),line-height,word-spacing(字间隔)
- 元素可见性:visibility
- 表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout
- 列表属性:list-style-type、list-style-image、list-style-position、list-style
- 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?
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 如何居中一个浮动元素?
-
水平居中
- 定宽: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优化、提高性能的方法
-
避免过度约束
-
避免后代选择符
-
避免链式选择符
-
使用紧凑的语法
-
避免不必要的命名空间
-
避免不必要的重复
-
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
-
避免!important,可以选择其他选择器
-
尽可能的精简规则,你可以合并不同类里的重复规则
-
修复解析错误
-
避免使用多类选择符
-
移除空的css规则
-
正确使用display的属性:由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。
-
display:inline后不应该再使用width、height、margin、padding以及float。
-
display:inline-block后不应该再使用float。
-
display:block后不应该再使用vertical-align。
-
display:table-*后不应该再使用margin或者float。
-
不滥用浮动:虽然浮动不可避免,但不可否认很多css bug是由于浮动而引起。
-
不滥用web字体
-
对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
-
不声明过多的font-size:这是设计层面的问题,设计精良的页面不会有过多的font-size声明。
-
不在选择符中使用ID标识符,主要考虑到样式重用性以及与页面的耦合性。
-
不给h1~h6元素定义过多的样式
-
全站统一定义一遍heading元素即可,若需额外定制样式,可使用其他选择符作为代替。
-
不重复定义h1~h6元素
-
值为0时不需要任何单位
-
标准化各种浏览器前缀:通常将浏览器前缀置于前面,将标准样式属性置于最后,类似:.foo{
-
-moz-border-radius: 5px; border-radius: 5px; }复制代码
-
使用CSS渐变等高级特性,需指定所有浏览器的前缀
-
避免让选择符看起来像正则表达式
-
CSS3添加了一些类似~=等复杂属性,也不是所有浏览器都支持,需谨慎使用。
-
遵守盒模型规则(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", ""); } }