html&css

用户3219747322411
210 阅读5分钟

BOM和DOM

DOM是文档对象模型，定义了处理网页内容的方法和接口，比如能删除/增加元素。

BOM是浏览器对象模型，定义了浏览器窗口相关的方法和接口,可以跳转页面，前进或者后退。它既是js访问浏览器窗口的接口，也是一个全局对象。它的核心是windows,dom的最根本对象document就是windowd的子对象，window的子对象还有location、navigation、history等

标签语义化的优点

  • 代码结构清晰、易于阅读
  • 利于开发和维护
  • 有利于SEO，搜索引擎会根据不同的标签赋予不同的权重

页面绘制过程

  • HTML被HTML解析器解析成DOM树
  • CSS被CSS解析器解析成CSSOM树
  • 两者结合生成渲染树
  • 计算渲染树的节点信息
  • 根据计算好的信息绘制整个页面

重排和重绘

重排：当元素的尺寸或者结构发生变化，浏览器重新渲染部分或者整个页面的过程为重排

会导致重排的操作：

  • 页面首次渲染
  • 浏览器窗口大小发生变化
  • 元素内容、大小发生变化
  • 激活css伪类
  • 添加/删除可见的dom元素

重绘：当元素的样式发生改变，不改变布局时，浏览器赋予元素新的样式并且重新绘制它的过程

改变页面布局会引起浏览器重新计算页面节点信息，开销比较大，用户在使用的时候就会出现页面卡顿，所以怎样可以减少重排？

  • 增加元素时，使用documentFragment创建并组成一个dom子树，处理完之后再appendChild到dom元素中。原因是这样只会引发一次重排。
  • 尽量不使用table布局
  • 尽量用visiblity：hidden代替display:none
  • 尽量只修改position:absolute或者position:fixed的元素
  • 合并多次dom操作为单次

盒子模型

  • 标准盒模型：width和height只包含content
  • IE盒模型：width和Height包含conten+padding+border

设置属性box-sizing: border-box时，则用的是ie盒模型，设置box-sizing: content-box用的是标准盒模型

BFC

  1. 什么是BFC？

BFC意思是块级格式化上下文，BFC是一个独立的空间，空间内元素的变化不会影响外部布局

  1. 如何创建BFC？
  • overflow的值不为visible
  • position的值为absolute或者fixed
  • float的值不为none
  • display:inline-block、flex、table-cell、inline-flex
  1. BFC规则
  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
  • BFC的区域不会与float box重叠。(场景：左边float, 右边BFC)
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算。（场景：使得浮动不会崩塌）
  • 在一个BFC中，每个元素的左边缘都会紧贴着包含块的左边缘
  1. BFC的作用
  • 阻止元素被浮动元素覆盖
  • 自适应两栏布局
  • 清除内部浮动
  • 分属于不同的BFC防止margin重叠
  1. 如何清除浮动？
  • 给父元素设置Overflow:hidden清除浮动
  • 在浮动元素的后面添加一个块级元素，然后设置clear:both
  • 给浮动元素的父元素添加一个伪元素，设置为块级元素并且clear:both

如何实现两栏布局？

  • flex布局
  • 左侧float 右侧overflow: hidden触发bfc，bfc区域不会和浮动元素重叠
  • grid

如何设置元素水平垂直居中？

1.table-cell

父元素 display: table-cell；vertical-align: middle; text-align: center; 
子元素：display: inline 或者 display: inline-block

2.flex布局

父元素：display: flex; align-items: center; justify-content: center;

3.grid布局

父元素：display: grid；align-items: center; justify-content: center;

4.子绝父相+transform

父元素：position: relative; 
子元素：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
  1. 子绝父相 + 负margin
子元素定宽 父元素：position: relative 子元素：position: absolute; left: 50%; margin-left: 负自身的一半; top: 50%; margin-top: 负自身高度的一半

缺点：需要知道子元素的宽高

  1. 子绝父相 + margin:auto
父元素定宽高：position: relative
子元素定宽高：position:absolute
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;

flex,grid,table-cell方式均可设置内联元素和块级元素的水平垂直居中

  1. position的属性值
  • static：正常文档流，设置top|left|right|bottom都不会生效
  • absolute:脱离文档流 绝对定位，相对于第一个定位不为static的父级元素进行定位
  • relative：相对于自身定位，位置发生改变后会在原位置留白
  • fixed：脱离文档流 不随滚动条的变化而改变位置，相对于浏览器窗口进行定位
  1. display: none和visibility:hidden的区别
  • display为None时元素不会出现在渲染树中，不占据文档空间，visibility为hidden时元素还是会存在在dom树中并占据空间
  • display:none会引发重排，visibility:hidden只会引发重绘
  • display:none属性不具备继承性，子元素消失是因为父元在渲染树中消失造成的。visibility:hidden具有继承性，子元素可设置visibility:visible来显示出来 9.选择器的优先级 内联样式>ID选择器>类选择器>标签选择器 10.css样式的引入方式：
  • 内联样式
  • 内部样式：style标签内部
  • 外联样式：link标签引入 link的权重高于import
  1. href和src的区别
  • href是一个超链接，src引用的是外部的资源
  • href不会暂停其他资源的下载，sr暂停其他资源的下载
  • href不会替换元素本身的内容，src会替换元素本身的内容。
  1. h5新特性
  • 新增语义化标签 header, nav, article, aside, section等
  • input输入框新增multiple，required, autofocus等
  1. css3新特性
  • 新增选择器：属性选择器，结构伪类选择器（first-child, nth-child）
  • border-box属性，calc属性，transform, animation
  1. px,rem,em的区别
  • px是相对于屏幕分辨率而言的
  • rem相对于根元素
  • em相对于父级元素
  1. 伪类和伪元素 (:和::)
  • 伪类：伪类选择器（:hover, :active, :focus...）,结构性伪类选择器（nth-child, first-child, last-child....）
  • 伪元素：before,after...
avatar
文章
阅读
粉丝