position
属性
position
用来指定一个元素在文档中的位置
- static:正常布局;
top
,right
,bottom
,left
,z-index
属性失效 - relative:相对定位
- absolute:绝对定位,相对最近一个非
static
祖先元素定位;脱离文档流(以及float属性) - fixed:固定定位,相对于屏幕视口(viewport)的位置来指定元素位置,页面滚动位置也固定;脱离文档流
- sticky:粘性定位,先按照relative定位,再按照fixed定位。详见MDN
display
属性
display
是指定元素的呈现
- none:关闭一个元素的显示
- inline:行内显示
- block:块级显示
- table:表格显示
- list-item:列表行显示
- flex:flexbox模型显示
- grid:栅格盒模型
衍生题
display:none、visibility:hidden:、opacity:0
之间的区别
display: none
彻底消失,render tree中也不存在(dom tree中存在);可能会引起reflowvisibility: hidden
渲染为空盒子,在render tree中存在;不会引起reflow
;性能更好;也不会触发事件opacity: 0
将元素隐藏起来,也不会改变页面布局,但是会触发点击事件
替换元素&非替换元素
内容是否能够修改、替换;例如修改<img>
标签修改src
属性就会变化,这是替换标签
下面列举一些替换元素,除了替换元素都是非替换元素
img
:display:inline
iframe
:display:inline
video
&audio
:display:inline
input
:display:inline-block
button
:display:inline-block
select
:display:inline-block
注:vertical-align
属性适用于inline
元素和table-cell
元素
居中:实现水平垂直布局
flex
:主轴(justify-content
)和交叉轴(align-items
)均为center
transform
:(居中块)采用相对布局,top:50%
,left:50%
再加上transform: translate(-50%; -50%)
实现水平垂直居中table
:这个不用讲了margin
负值:(居中块)采用相对布局 +top:50%
,left:50%
+margin-top: -height/2
,margin-left: -width/2
- 绝对定位:父级节点相对定位,居中块绝对定位而且
top:0;left:0;right:0;bottom:0;
+margin:auto;
布局:实现三栏自适应布局
float
布局:左边float:left
,右边float:right
,中间块设置min-width
即可absoluate
定位:中间块设置距离父级节点的left:100px;right:100px;
即可;当然父级节点positon
不能为static
flex
布局:中间块flex-grow
为1(默认0);左右两边设置flex-basis:100px
即可table
布局:table``table-cell
很容易grid
布局:父级节点需要display:grid;
然后网格流方向为grid-auto-flow:column;
再然后grid-template-columns: 100px auto 100px;
设置列宽
BFC
BFC是块级格式化上下文(Block Format Context),我们可以把它看作一个大盒子,一个独立的容器。这个容器就是一个BFC,其内部和外部不会有任何影响,在这个大盒子(BFC)中,你可以随便布局、浮动。
面对的问题
我们创建BFC是为了解决实际中的问题,如
边距重叠/边距吞噬
- 同一个BFC内,边距会发生重叠,公共边距为边距大的那个(水平方向边距永远不会重叠)
- 如果需要清除边距重叠,可以创建两个BFC即可
清除内部浮动,父级元素高度未加上浮动元素高度
- 内部元素浮动,父级高度未加上浮动元素高度
- 清除内部元素浮动,父级高度加上浮动元素高度
浮动aslide重叠
- 左边aslide和右边main重叠
- 右边main创建BFC,不会和左边aslide重叠
如何创建BFC
- float不为none
- overflow为auto、hidden
- display为inline-block、table=cell、flex
- position不为static或relative
BFC的特性
- 计算BFC高度时,浮动子元素也会参与计算
- BFC内部的box一个接一个放
- BFC是页面上一个独立元素,和外界元素互不影响
- BFC不会和浮动元素重叠
清除浮动
在清除浮动之前,我们先了解一下浮动的原理:
浮动和position:absoluate;|position:fixed;
一样都会脱离文档流。当一个元素浮动的时候,他会脱离当前文档流,向左或向右浮动,直到遇到父元素或者另外一个浮动元素。
浮动会造成哪些问题,为什么要清除浮动
- 浮动造成父元素高度坍塌:浮动会脱离当前文档流,父元素高度不会被撑开,计算父元素高度时不会加上浮动子元素的高度
- 浮动元素和非浮动元素重叠:aslide(浮动元素)和main重叠
清除浮动的方法
- 创建BFC,因为BFC不和浮动元素重叠
- 添加额外标签,并设置
clear:both
clearfix
方法
.clearfix:before,
.clearfix:after {
content: '';
display: block;
clear: both;
}
盒模型
分类
- IE盒模型:计算盒子高度/宽度时会加上
padding/margin/border
;box-sizing:border-box;
- 标准盒模型:计算盒子高度/宽度时会不加上
padding/margin/border
;box-sizing:content-box;
(默认)
获取盒模型高度
dom.style.height
获取内联csswindow.getComputedStyle(dom).height
或者window.getComputedStyle(dom).getPropertyValue("height")
(IE9下不支持)应用活动样式表后的元素的所有CSS属性的值dom.getBoundingClientRect().height
返回元素的大小及其相对于视口的位置
Html5 新特性
H5新增标签
语义化标签
- header 页头
- footer 页脚
- nav 导航栏 () 描绘一个含有多个超链接的区域
- section 表示文档中的一个区域(或节)
- article 文档、页面、应用或网站中的独立结构
- aside 侧边栏或者嵌入内容
canvas
& svg
canvas
通过JavaScript绘制2D图形svg
通过xml描述2D图形
表单标签
- datalist 一组元素,这些元素表示其它表单控件可选值
- output 表示计算或用户操作的结果
多媒体标签
- audio 音频内容
- video 视频内容
- source 表示多媒体资源
其他问题
z-index
和position
z-index
属性指定了一个具有定位属性(即position
属性值是非static
的元素)的元素及其子代元素的z-order
。
z-index
只能在positon: relatice|absoluate|fixed;
的元素上使用z-index
控制元素在垂直显示屏方向(z轴)上显示z-index
只能决定同一个父元素下的同级子元素堆叠顺序
link & import 引入CSS区别
import
是CSS引入样式表的语法,link
则是HTML提供的标签。link
在页面加载时同时加载,import
是在页面加载完成之后再加载。- 可以使用操作DOM,插入
link
标签改变样式,import
不可以。
伪类和伪元素的区别
- 伪类,当前元素属于某种状态时,为其添加相应的样式,状态会随着用户行为而变化。如
:hover
,:focus
- 伪元素,创建一些DOM树种不存在的元素,并添加样式。例如
:before
会在元素之前添加一些内容。用户看的到,但这些内容不存在于DOM树中。