HTML常问合集（一）

尤雨溪不懂VUE
96 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

1.盒子模型

当对一个文档进行布局渲染时，浏览器会将一个个元素表示为矩形盒子。 属性:

  • content：实际内容
  • border：边框
  • padding：内边距
  • margin：外边距

标准盒子模型：

  • 盒子总宽度：width+border+padding+margin
  • 盒子总高度：height+border+padding+margin

2.选择器及优先级

CSS常用选择器：

  • 标签选择器
  • 类选择器
  • id选择器
  • 后代选择器
  • 子选择器
  • 伪类选择器
  • 伪元素选择器

CSS3新增选择器

  • 层次选择器
  • 伪类选择器
  • 属性选择器

选择器优先级：标签<类<id<行内样式<通配符选择器

3.CSS中的属性继承

  • 字体属性系列
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
  • 文本属性系列
text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
  • 列表属性
list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合
  • 元素可见性/透明度
visibility
transiton

4.前端单位区别

px

px是“像素”，绝对单位。

em

em是相对单位，相对于当前对象内的font-size的大小。浏览器默认1em=16px

rem

rem是相对单位，相对于HTML根标签的font-size的大小。

vw/vh

是一个相对单位，相对于浏览器可视窗口的大小

5.CSS隐藏页面的元素

  • display:none;
  • visibility:hidden;
  • opacity:0;
  • height:0;weight:0;
  • 定位
.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

6.BFC

块级格式化上下文：形成一个相对外界完全独立的空间，保护内部元素不受外界的干扰。

触发条件

  • 浮动
  • 绝对定位或者固定定位
  • display:inline-block
  • overflow:hidden;

使用场景

  • 外边距塌陷 同一个BFC的两个上下的盒子的margin会重叠，以大的为主。

解决方案：在其中一个盒子外面包裹一层容器

  • 清除内部浮动

overflow:hidden;

7.元素水平居中的方式

  1. 子绝父相，子的上下左右都给0，margin:auto;
  2. 子绝父相，后子元素：
top:50%;
left:50%;
margin-top:-50%;
margin-left:-50%;
  1. 子绝父相，后子元素：
top:50%;
left:50%;
transform:translate(-50%,-50%);
  1. flex布局，给父元素开启：
display: flex;
justify-content: center;
align-items: center;

8.两栏布局

给父元素开启flex布局，左孩子盒子给一个固定宽度，右孩子盒子给个flex:1;

<style>
    .box{
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

9.三栏布局（双飞翼，圣杯）

  • 两边绝对定位，中间使用margin撑开。

  • flex布局，让中间的盒子自适应。

<style type="text/css">
    .wrap {
        display: flex;
        justify-content: space-between;
    }

    .left,
    .right,
    .middle {
        height: 100px;
    }

    .left {
        width: 200px;
        background: coral;
    }

    .right {
        width: 120px;
        background: lightblue;
    }

    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>
  • 仅需将容器设置为display:flex;，
  • 盒内两边元素给固定宽度，将中间元素设置为100%宽度，或者设为flex:1，即可填充空白
  • 盒内元素的高度撑开容器的高度

10.CSS3新增了哪些新特性

  • 属性、伪类选择器
  • 边框样式
-- border-radius：创建圆角边框
-- box-shadow：为元素添加阴影
-- border-image：使用图片来绘制边框
  • transition过渡属性
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
  • transform转换
-   transform: translate(120px, 50%)：位移
-   transform: scale(2, 0.5)：缩放
-   transform: rotate(0.5turn)：旋转
-   transform: skew(30deg, 20deg)：倾斜

11.css动画有哪些

  • transition 实现渐变动画
  • transform 转变动画
  • animation 实现自定义动画

12.回流和重绘

回流：布局引擎会根据样式来计算盒子在页面上的位置和大小。

重绘：当计算好盒子的位置和大小后，将其渲染到页面上。

13.浏览器的解析和渲染机制

  • 解析HTML，生成DOM树；同时解析CSS，生成CSSOM树。
  • 将DOM树和CSSOM结合，生成render-tree。
  • 回流
  • 重绘
  • 展示。将像素发给GPU，展示到页面上。
avatar
文章
阅读
粉丝