前端知识点总结（html+css）（上）

zhouzhouya

发布于 2023-10-26 17:22:55

3350

发布于 2023-10-26 17:22:55

文章被收录于专栏：一名前端开发

众所周知，前端内容多而杂，经过查阅各种资料，总结了一些知识点，以备后续复习使用。文章分为上（html，css）中(js)下(vue)三部分。

html篇

html应该是前端中最简单的知识点了，标签用着用着就熟记于心，在面试过程中对html的提问更是少之又少，话不多说，上干货。

1. 常见块级元素、行内元素、行内块元素的特点和区别

块级元素 (常见的块级元素div，p，h，form，li)
- 一行显示一个;
- 宽度默认为容器的100%；
- 可以设置高度宽度内外边距
- 块级元素可以包含其他的块级元素和文本（如div下可包含div）
行内元素（常见的行内元素a,span.img）
- 一行显示多个
- 宽度为内容的宽度
- 不可以设置高度和宽度
- 标签内一般不包含标签（如a标签内包含a标签）
行内块元素
- 行内块元素包含块级元素和行内元素的特征

2. html5有哪些新特性

语义标签（header，footer，nav，artice，section，aside）
音视频标签（audio，video）
画布（canvas）
地理（geolocation）
web存储api（localstorage，sessionstorage）

3. img标签上的title属性和alt属性的区别

alt属性为了给不能看到图片的人提供文字说明，图片加载失败时
title属性可以实现鼠标悬停时提示的内容

css篇

学习css重点就是清楚的了解布局，给你一个页面，你能一眼知道这个页面如何布局。

1. css盒模型

标准盒模型：height/width = content(默认)
IE盒模型：height/width = content+padding+border
通过css3的box-sizing属性设置，设为content-box即为标准盒模型，设为border-box即为IE盒模型

2. css选择器

优先级！important（infinite）>id（1000）>class（100）>伪类选择器（:first-of-type）>伪元素选择器（::after）元素选择器（div）
如果优先级相同，选择最后出现的样式

3. css3新增伪类

p:first-of-type 选择属于父元素的首个p元素
p:last-of-type 选择属于父元素的最后一个p元素
p:only-of-type 选择属于父元素的唯一p元素
p:first-child 选择属于属于父元素的唯一子元素 扩展: 伪元素：::before，::after，::first-line，::first-letter，::selection、::placeholder

4. BFC原理（块级格式化上下文）

含义：是页面中的一块独立渲染区域，并有一套渲染规则。它决定了其子元素如何定位，以及其它元素的关系和相互作用。（属于普通流）
如何创建BFC
- overflow不为visible
- float不为none
- position不为static或者relative
- display属性为inline-block、flex、table-cell等
BFC作用
- 可以避免外边距重叠的问题，将两个元素放在不同的BFC容器中即可。（或者把其中一个margin改为padding）
- 解决高度塌陷
- 阻止元素被浮动元素覆盖

5. 高度塌陷

原因

很多情况父盒子不方便给高度，子盒子浮动脱离文档流不占位置，使父盒子高度为0

解决方案

在浮动元素末尾加一个空标签，设clear:both

父级添加overflow:hidden

使用after伪元素

:after {
    content:’’,   
    dispaly:block, 
    height:0, 
    visibilty:hidden, 
    clear:both,
}

6. 自适应布局

两栏布局
- 左边左浮动，右边margin-left（float+margin）
- 左元素float:left 右边父元素BFC（float+BFC）
- 左元素绝对定位，left:0;右边margin-left（定位+margin）
- 父元素display:flex；右边元素flex:1（flex）
三栏布局
- 左元素左浮右元素右浮，中间设置margin-left和margin-right（浮动+margin）
- 左右元素absolute，left:0 right:0 中间margin:0 宽
- 父元素display:flex;中间元素flex:1;（flex）
- 表格布局:父元素display:table;width:100% 所有子元素：display:table-cell
- calc布局：全部float:left .main:calc(100% - 两宽度) 使用calc符号两边一定要有空格

7. 如何用css创建一个三角形

箭头向下的三角为例

   width : 0
   height : 0
   border : 6px solid transparent
   border-top : 6px solid red

8. display:none、visibilty:hidden和opacity:0的区别

     display:none  //不显示对应元素，在文档中不占位置
     visibilty:hidden //隐藏对应元素，在文档中仍保留位置
     opacity：0 //隐藏元素，占位置，可添加事件

9. css中的overflow属性

 scroll  //必会出现滚动条
 auto //子元素内容大于父元素，显示滚动条，超出显示，不超出不显示
 visible //溢出内容出现在父元素之外
 hidden //溢出隐藏

10. 溢出文字的省略显示

单行文本

white-space: nowrap //(强制一行显示)
overflow: hidden //(溢出隐藏)
text-overflow: ellipsis //(显示省略标记)

多行文本

  -webkit-line-clamp:2 //（用来限制在一个块元素显示的文本的行数）
  display: -webkit-box//（将对象作为弹性伸缩盒子模型显示）
  overflow: hidden;
  -webkit-box-orient: vertical; //（设置对齐模式）
  text-overflow: ellipsis //（以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本）

11. 为什么要初始化css

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。
初始化css的方式

* { 
    padding：0；
    margin：0；
  }

12. 如何使英文单词发生词内断行

word-wrap:break-word。

13. div水平垂直居中的几种方式。

绝对定位(子绝父相)

<div class="father">
  这里是父容器
  <div class="child">
  这里是子容器
  </div>
</div>

.father {
   width: 200px;
   height: 200px;
   background: yellowgreen;
   position: relative;
 }

.child {
   width: 100px;
   height: 100px;
   background: red;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

flex布局

 <div class="father">
    <div class="child">这里是子div</div>
 </div>

.father {
  width: 200px;
  height: 200px;
  background: yellowgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
   width: 100px;
   height: 100px;
   background: slateblue;
 }

div绝对定位水平垂直居中(margin:auto实现绝对定位元素的居中)

 <body>
   <div class="center">这里是div</div>
 </body>

.center {
   width: 200px;
   height: 200px;
   background: yellowgreen;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
 }

14. px和em的区别是什么

px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是固定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px，所以未经调整的浏览器都符合lem=16px，那么12px=0.75em，10px=0.625em。
与em对应的另一个长度单位是rem，是指相对于根元素（通常是HTML元素）字体的大小。
vw和vh：都是针对当前浏览器窗口大小而言，1vw就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一。

15.z-index(层叠上下文)

触发条件：根层叠，html本身的层叠 position非static css3的新特性：

flex
transform
opacity
filter z-index设置为auto或者0时，后出现的覆盖前面的；

16.各种居中方案

参考文章juejin.cn/post/717980… 水平居中： 行内元素给父元素设置text-align：center 定宽：margin：0，atuo 定宽：absolute，left：50%，margin-left：-1/2宽度不定宽：父：flex，子：margin：0，auto 不定宽：父。flex，justify-content: center 垂直居中 单行文本：line-height：高度定高：margin：auto ， 0 定高：absolute，top：50%，margin-top 不定高：父：flex，子：margin：auto，0 不定高：父：flex，align-items: center 水平垂直居中 子元素为块级元素：父：flex，子：margin：auto 子元素未知：display：flex；justify-content: center；align-items: center 子元素用绝对定位，上下左右为0，margin：auto，父：relative，

17.如何实现小于12px的字体

transform: scale(0.7);相对于12px缩小0.7

水平有限，如有错误，敬请指正。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-10-26，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度