潜入理解H5&CSS3-面试准备(不断更新中😄···)

1,969 阅读6分钟

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中存在);可能会引起reflow
  • visibility: 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重叠
    左边aslide和右边main重叠
  • 右边main创建BFC,不会和左边aslide重叠
    右边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/borderbox-sizing:border-box;
  • 标准盒模型:计算盒子高度/宽度时会不加上 padding/margin/borderbox-sizing:content-box;默认

获取盒模型高度

  • dom.style.height 获取内联css
  • window.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-indexposition

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树中。