重要
边距塌陷/规则、BFC/规则/创建BFC/BFC应用、浮动/规则/清除浮动
本节需要掌握,边距塌陷是什么?边距塌陷规则有哪些?如何解决边距塌陷?BFC是什么?BFC与普通元素的区别/BFC规则?触发元素为BFC的条件有哪些?BFC在开发中的应用?clear含义是什么?浮动是什么?如何将元素设置为浮动元素?浮动的规则?阻止普通块元素被浮动元素覆盖的方法?浮动的缺点有哪些?清除浮动的方法有哪些?浮动元素有哪些应用?
边距塌陷
边距塌陷的含义:
- margin-collapse 即边距塌陷/边距重叠,在同一BFC区域里的普通块元素垂直方向上的margin折叠(左右margin不会)
边距塌陷的规则 :
以下分3种情况讨论边距塌陷:相邻上下元素、相邻父子元素、空元素自身
(千万注意以下讨论相邻的意思都是标签挨着标签,如
这样才会发生边距塌陷,如果代码是
这样是不会发生边距塌陷的,因为插入的aaa实际上是个文本节点造成了不相邻了)aaa相邻上下元素发生边距重叠,指上元素设置margin-bottom,下元素设置margin-top,两者之间的margin规则如下:
- 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值
- 两个相邻的外边距都是负数时,折叠结果是两者的绝对值的较大值
- 两个外边距一正一负时,折叠结果是两者的相加的和
相邻父子边距塌陷,子元素必须是挨着父元素的顶部或底部(注意文本会生成textNode因此不相邻)
- 如果子设置了margin-top,子的margin-top会变成父的margin-top,此时子元素贴着父的顶部
- 如果子设置margin-bottom,且父亲未设置高度或高度为auto,则子的margin-bottom变成父的margin-bottom,子元素贴着父的底部
- 如果父子都有margin,那取值规则仍参照上面
- 元素自身的内容为空,且未设置height、border、padding等的情况下,同时设置了margin-bottom和margin-top也会边距塌陷(后面的元素与它的margin最终值的取值规则参照上面)
解决边距塌陷/阻止margin折叠
- 触发元素为BFC(具体看下面的触发BFC的4种方法)
- 设置padding使会发生边距塌陷的元素不相邻
BFC
BFC含义:
- BFC(Block Formatting Context),块级格式化上下文,是一个独立的渲染区域(独立的容器)
BFC规则:
- BFC在页面中是独立的容器,BFC内外的元素之间互相不影响
- BFC不与外部的元素发生边距重叠(因此可将元素设置为BFC来解决边距重叠),但BFC内部的子元素仍遵守垂直方向边距重叠规则
- BFC区域的元素不会被浮动元素覆盖
- 计算BFC高度,浮动子元素也参与计算(是子元素)=> 因此可用来清除浮动
BFC触发条件:(可为以下任意一条)
- 根元素
- float !== none(left/right/inherit)
- overflow !== visible(hidden/scroll/auto/inherit)
- position != relative| static ( absolute / fixed / sticky)
display = inline-block / table / flex
待解决:table不生效,flex的子元素margin-bottom、margin-top有值时很奇怪
- 根元素
BFC应用:
- 阻止外边距塌陷
清除浮动,阻止普通元素被浮动元素覆盖
待解决:清除浮动的原理是两个div都位于同一个BFC区域之中
浮动
clear:
- clear属性指定一个元素必须移动到在它前面的浮动元素下面。clear属性适用于浮动和非浮动元素
浮动的含义:
- 元素的float不为none,即float: left/right/inherit,使元素脱离正常文档流,按照指定的水平方向发生移动,直到碰到父元素的边界或另一个浮动元素边框为止
- float对设置flex的子元素不起作用
浮动的规则:
- 设置元素浮动后,该元素的display值自动变成block,但是行为是inline-block,可以设置高宽,未设置高宽便由内容物撑开,多个float水平排列
- 浮动元素会遮住排在它后面块级元素,但不会遮住块级元素里的文本内容,此时文本内容围绕在浮动元素周围(非浮动元素会覆盖浮动元素的位置)
- 浮动元素不会遮住行内元素或行内块元素,不管该元素里有无内容
- 浮动元素参与BFC父级的高度计算,但不参与非BFC父级的高度计算(所以会导致父元素高度无法撑开,因此需要清除浮动)
清除浮动方法:(空元素、伪元素、BFC)
给父元素设置height
- 弊端:父元素高度变成固定值,子元素超过父元素高度时会溢出,且父元素里若有其它子元素,这些子元素还是有可能被浮动元素覆盖
在浮动元素后面添加空元素,且该空元素设置样式clear:both
- 弊端:产生大量空元素
设置父元素的伪元素::after(推荐)
触发父元素为BFC(推荐)
布局(圣杯、双飞翼、响应式布局、flex)
圣杯布局
- 特点:三列,中间主体内容前置且宽度自适应,两边内容定宽
- 好处:重要的内容放在文档流前面可以优先渲染
- 原理:3个都浮动、最外层padding预留、左右负边距移动
//主体内容优先渲染,padding预留左右位置
.container {
padding-left: 150px; //外层必须设置padding
padding-right: 190px;
}
.main {
float: left;
width: 100%;
}
.left {
float: left;
width: 150px;
margin-left: -100%; //left设置负左边距
position: relative;
left: -150px;
}
.right {
float: left;
width: 190px;
margin-right: -190px;
}
圣杯布局是:外层盒子包裹三个内层盒子,分别是中左右,这样中间主体区最先渲染,外层的盒子设置padding-left和padding-right等于左右盒子的宽度,并且伪元素清除浮动,三个盒子都设置左浮动,中间盒子宽度100%,
左边盒子margin-left = - 100%移动父盒子的百分百宽度,在定位left= - 宽度出去,
右边盒子直接margin-right= -宽度 到右边去
双飞翼布局
- 特点:对圣杯布局(使用相对定位,对以后布局有局限性)的改进,消除相对定位布局
- 原理:主体元素上设置左右边距,预留两翼位置。左右两栏使用浮动和负边距归位,消除相对定位
//margin预留左右位置
.main-wrap {
width: 100%;
float: left;
}
.main {
margin-left: 150px;
margin-right: 190px;
}
.left {
float: left;
width: 150px;
margin-left: -100%;
}
.right {
float: left;
width: 190px;
margin-left: -190px; //不是margin-right:-190px
}
双飞翼布局是,三个盒子都是浮动,main用父盒子包裹并设置宽度100%,里面main设置margin-left为左盒子宽度,margin-right为右盒子宽度,然后左盒子设置margin-left负100%正好移动到主体区的左侧,有盒子margin-left负自身宽度到主体区右侧
响应式布局
- 特点:兼容多个终端,而不是为每个终端做一个特定的版本
- 原理:利用CSS3媒体查询,为不同尺寸的设备适配不同样式(如bootstrap的栅格结构),查询媒体并且设置最大和最小设备宽度,然后每级别设置font-size之后的rem会根据这个大小来响应式设置
flex布局
特点:
- 采用Flex布局的元素称为"容器"(设置display:flex会触发BFC),它的所有子元素自动成为容器成员,称为"项目"。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis),项目默认沿主轴排列
设置display : flex,块级元素,占据整个宽度,设置display : inline-flex,行内元素,宽度由子元素撑开
- 设为Flex布局以后,子元素的
float
、clear
和vertical-align
属性将失效
- 设为Flex布局以后,子元素的
容器属性:
flex-direction
:row | row-reverse | column | column-reverse(主轴/水平排列方向)flex-wrap
:nowrap | wrap | wrap-reverse(是否换行,如果设为nowrap表示所有子元素挤占一行且平分宽度)flex-flow
:flex-direction、flex-wrap的简写justify-content
:flex-start | flex-end | center | space-between | space-around (主轴对齐方式)align-items
:flex-start | flex-end | center | baseline | stretch(交叉轴对齐方式、单根主轴)align-content
:flex-start | flex-end | center | space-between | space-around | stretch(多根轴线的对齐方式)
项目属性:
order
:定义项目的排列顺序。数值越小,排列越靠前,默认为0flex-grow
:平分容器剩余空间的宽度比例(默认为0,表示如果存在剩余空间也不平分)flex-shrink
:定义项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小flex-basis
:定义了在分配多余空间之前,占据的主轴空间,默认值auto
(项目的本来大小)flex
:是flex-grow、flex-shrink、flex-basis
的简写,默认值为0 1 auto
。后两个属性可选,常设置flex:1来表示该元素占据该行的全部剩余空间align-self
:auto | flex-start | flex-end | center | baseline | stretch,align-self属性允许单个项目有与其他项目在交叉轴方向上不一样的对齐方式,默认值为auto
,表示继承父元素的align-items属性,若设为其它值便会覆盖align-items属性
flex实现三栏布局
main//使用项目属性orderleftright
场景题
以下的题目请想出尽可能多的解法并比较优缺点:
一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度
(flex-flow:column flex:1)
- 左边定宽,右边自适应方案
- ( flex:1)
设高度默认100px,请写出三栏布局,其中左栏、右栏宽各位300px,中间自适应,需要3种以上的解法
(圣杯 双飞翼 flex)
水平、垂直居中
水平居中
- 行内元素:
text-align:center
(且text-align可继承) - 块级元素:
margin:auto
(只对块级元素生效, 行内元素只对确定值的左右margin生效)
- 行内元素:
水平垂直居中
//方法一:父元素设置flex布局 - PC端无兼容性要求,推荐flex - 移动端推荐使用flex .father{ display: flex; justify-content: center; align-items: center; } //方法二:父相子绝+子translate .father{ position: relative; //一定要设置父元素相对定位 .son{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } //方法三:父设置display:table-cell布局,子设置display:inline-block .father { display: table-cell; text-align: center; vertical-align: middle; .son { display: inline-block; } } //方法四:父相子绝+子margin:auto .father { width: 200px; height: 200px; position: relative; text-align: center; .son { width: 100px; height: 100px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } } //方法五:在已知子元素高度的情况下计算值设置父的padding、子的margin
元素(行内/块级)、属性(继承/不可继承、引发重排(回流)/引发重绘、伪类/伪元素)
元素
行内元素:
- 不可以设置宽高(宽高默认由内容物撑开),不独占一行,上下margin不生效(但左右会生效),行内元素只能包含行内元素,不能包含块元素
a b span img input select strong i
块级元素:
- 可以设置宽高,独占一行,块级元素可以包含块级元素或行内元素(p是块元素)
p div ul ol li dl dt dd h1…h6
空元素:
属性
可继承、不可继承
- 可继承:与font相关的如color、cursor、visibility、line-height、text-align..
- 不可继承的样式:width、height、padding、border、margin...(width/padding/margin值为百分比时是相对父的宽度的,height值为百分比时是相对父的高度的)
引发重排(回流)reflow、引发重绘repaint:
- 引发重绘:背景或颜色相关的属性
伪类、伪元素
伪类:
:
单冒号,已有元素的不同状态,不产生新的元素(a标签的伪类有执行顺序)
伪元素:
::
双冒号,创建dom中不存在的元素,并为其添加样式,虽然用户可以看见这些文本,但是实际上并不在dom文档中
css3新增
- 新增选择器
p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
- ==弹性盒模型
display: flex;
== - 多列布局
column-count: 5;
- ==媒体查询==
@media (max-width: 480px) {.box: {column-count: 1;}}
- 个性化字体
@font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
- 颜色透明度
color: rgba(255, 0, 0, 0.75);
- 圆角
border-radius: 5px;
- 渐变
background:linear-gradient(red, green, blue);
- 阴影
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
- 倒影
box-reflect: below 2px;
- 文字装饰
text-stroke-color: red;
- ==文字溢出
text-overflow:ellipsis;
== - 背景效果
background-size: 100px 100px;
- 边框效果
border-image:url(bt_blue.png) 0 10;
转换
- ==旋转
transform: rotate(20deg);
== - ==倾斜
transform: skew(150deg, -10deg);
== - ==位移
transform: translate(20px, 20px);
== - ==缩放
transform: scale(.5);
==
- ==旋转
- 平滑==过渡==
transition: all .3s ease-in .1s;
- ==动画==
@keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
transition
:==定义了元素在变化过程中是怎么样的==,包含transition-property
、transition-duration
、transition-timing-function
、transition-delay
。
transform
:==定义元素的变化结果==,包含rotate
、scale
、skew
、translate
。
animation
:==动画定义了动作的每一帧(@keyframes
)有什么效果==,包括animation-name
,animation-duration
、animation-timing-function
、animation-delay
、animation-iteration-count
、animation-direction
css优化
- 多个css合并,尽量减少http请求
- css雪碧图来减少http网络请求次数
- 将css文件放在页面最上面(script放在body)
- 选择器优化嵌套,尽量避免层级过深
- 充分利用css继承属性,减少代码量
- 抽象提取公共样式,减少代码量
- 属性值为0时,不加单位
- 属性值为小于1的小数时,省略小数点前面的0
基础
盒模型
本节需要掌握,css的盒模型分类及分别包含哪些?浏览器默认是哪一种盒模型?如何设置不同的盒模型?
分类:
标准盒子模型:
- width和height指的是content的宽度和高度
- 增加padding、border、margin不会影响content的尺寸,但还是会增加元素的总尺寸
- 计算盒子宽度 =
width + padding + border + margin
IE盒子模型:
- width和height指的是content+padding+border的宽度和高度
- 增加padding、border会挤占原本的宽高
- 计算盒子宽度 =
width + margin
注:margin不管是哪个盒模型,都不会挤占原本的宽高
设置:(可通过box-sizing属性设置盒模型,默认为标准盒模型)
box-sizing: content-box
// 标准盒模型,默认值 (边界是content)box-sizing: border-box
// IE盒模型 (边界是border)
优先级
本节需要掌握,css样式优先级、各个选择器权重、样式穿透
优先级:! important(最大) > 内联样式/行内样式(1000) > id选择器(100)> 类选择器 = 伪类选择器 = 属性选择器(10) > 元素选择器 = 伪元素选择器(1) > 通配选择器 = 后代选择器 = 兄弟选择器
注:可简记为
!important > 行内 > id > class > tag
!important优先级最大、第一
如果权值一样,按照样式规则的先后顺序,顺序靠后的覆盖靠前的规则
修改第三方样式时用样式穿透
position、display
position:
static
:默认值,没有定位relative
:相对定位absolute
:绝对定位,相对于距离最近的已定位父元素进行定位(即position !== 'static'
)fixed
:固定定位,相对于浏览器窗口进行定位sticky
: 在某个位置前是relative定位,超过阈值后是fixed定位(可以设置距离视口的top、left等为阈值)inherit
:规定从父元素继承position
属性的值注:absolute、fixed、sticky的区别是:absolute是相对于最近的已定位的父元素进行定位,fixed一开始时就固定在视图的某个位置,sticky是超过阈值后才固定住
display:
none
:设置元素不可见block
:块元素inline
:行内元素inline-block
:行内块元素,水平排列(inline特性),可设置宽高或上下margin、padding(block特性)list-item
:像块类型元素一样显示,并添加样式列表标记table
:此元素会作为块级表格来显示inherit
:规定应该从父元素继承display
属性的值待解决:设置为行内元素才可以text-align=center,设置table才可以vertical-align=center
margin负值
负值 | 行为(讨论的是负值) |
---|---|
margin-top | 元素向上拖拽 |
margin-left | 元素向左拖拽 |
margin-bottom | 元素自身位置不变、下边元素上移(自身高度减少了margin的负值绝对值) |
margin-right | 元素自身位置不变、右边元素左移(自身宽度减少了margin的负值绝对值) |
- margin的值设为百分比时是相对于父元素content的宽度
- margin:auto,只对块级元素生效,行内元素只对确定值的左右margin生效
- 元素的margin、padding设置为百分比时都是相对于其父元素的宽度,不是自身高度!
left、right、top、bottom生效的条件有:
- 本身的position不能是static
- 相对最近的position值不为static的父元素进行定位,且left、right、top、bottom值为百分比时是相对该父元素的宽高的百分比
- translate设置百分比时是相对自身的宽高
场景题
如何实现小于12px的字体效果
浏览器默认支持最小字体为12px,小于12px的都按12px显示,若要实现显示小于12px的字体,可通过scale缩放:
display:inline-block; //若为行内元素,还需设置此行
transform: scale(0.7);
用纯CSS创建一个三角形的原理是什么
/* 设置该div长和宽都为0,及border-color的上、左、右三条边隐藏掉(颜色设为 transparent)*/
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
图片不超出块区域的设置方法?
超出div的文字省略?
//单行溢出,超出省略
.desc{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
//多行,超出行数后省略
.desc {
display: -webkit-box; //将元素设为盒子伸缩模型显示
-webkit-box-orient: vertical; //伸缩方向设为垂直方向
-webkit-line-clamp: 3; //超出3行隐藏,并显示省略号
overflow: hidden;
}
一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度
//方案1:
.sub {
height:calc(100% - 100px);
}
//方案2:
.container {
position:relative;
}
.sub {
position: absolute;
top: 100px;
bottom: 0;
}
//方案3:
.container {
display:flex;
flex-direction:column;
}
.sub {
flex:1;
}
左边定宽,右边自适应方案
/* 方案1 */
.left {
width: 120px;
float: left;
}
.right {
margin-left: 120px;
}
/* 方案2 */
.left {
width: 120px;
float: left;
}
.right {
width: calc(100% - 120px);
float: left;
}
注:以上的代码带验证、带解决
else
canvas、svg的区别?
px、em、rem的区别?(42、85)
img的alt、title的区别?
strong、em、i、b的区别?
display:none、visibility:hidden的区别?
href、src的区别?
link、@import的区别?
stylus、sass、less的区别?
rgba()和opacity()设置透明效果的区别?
元素竖向的百分比设定是相对于容器的宽度,而不是高度
全屏滚动的原理是什么? 用到了CSS的那些属性?
什么是视差滚动效果,如何给每页做不同的动画?
li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
v-show的dom元素为它设置为bfc元素(脱离文档流)提高性能,因为v-show设置display:none有无的时候会影起重排重绘,这是消耗性能的
是块级元素
div1、div2、div3都设置float:right,此时在右侧排列顺序应该是3、2、1