Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >第213天:12个HTML和CSS必须知道的重点难点问题

第213天:12个HTML和CSS必须知道的重点难点问题

作者头像
半指温柔乐
发布于 2018-09-11 01:30:52
发布于 2018-09-11 01:30:52
2.5K00
代码可运行
举报
文章被收录于专栏:前端知识分享前端知识分享
运行总次数:0
代码可运行

12个HTML和CSS必须知道的重点难点问题

这12个问题,基本上就是HTML和CSS基础中的重点个难点了,也是必须要弄清楚的基本问题,其中定位的绝对定位和相对定位到底相对什么定位?这个还是容易被忽视的,浮动也是一个大坑,有很多细节。

这12个知识点是我个人认为的,下面我们就来看看这12个知识点。

1.怎么让一个不定宽高的 DIV,垂直水平居中?

使用Flex

  • 只需要在父盒子设置:display: flex; justify-content: center;align-items: center;

使用 CSS3 transform

  • 父盒子设置:position:relative
  • Div 设置: transform: translate(-50%,-50%);position: absolute;top: 50%;left: 50%;

使用 display:table-cell 方法

  • 父盒子设置:display:table-cell; text-align:center;vertical-align:middle;
  • Div 设置: display:inline-block;vertical-align:middle;

2.position 几个属性的作用

position 的常见四个属性值: relative,absolute,fixed,static。一般都要配合"left"、"top"、"right" 以及 "bottom" 属性使用。

  • **static:默认位置。**在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用Position:static取消继承,即还原元素定位的默认值。设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。
  • **relative:相对定位。**相对定位是相对于元素默认的位置的定位,它偏移的 top,right,bottom,left 的值都以它原来的位置为基准偏移,而不管其他元素会怎么 样。注意 relative 移动后的元素在原来的位置仍占据空间。
  • **absolute:绝对定位。**设置为 absolute 的元素,如果它的 父容器设置了 position 属性,并且 position 的属性值为 absolute 或者 relative,那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性,那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。
  • **fixed:固定定位。**位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否,元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。

3.浮动与清除浮动

3.1 浮动相关知识

float属性的取值:

  • left:元素向左浮动。
  • right:元素向右浮动。
  • none:默认值。元素不浮动,并会显示在其在文本中出现的位置。

浮动的特性:

  • 浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。
  • 不管一个元素是行内元素还是块级元素,如果被设置了浮动,那浮动元素会生成一个块级框,可以设置它的width和height,因此float常常用于制作横向配列的菜单,可以设置大小并且横向排列。

浮动元素的展示在不同情况下会有不同的规则:

  • 浮动元素在浮动的时候,其margin不会超过包含块的padding。PS:如果想要元素超出,可以设置margin属性
  • 如果两个元素一个向左浮动,一个向右浮动,左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
  • 如果有多个浮动元素,浮动元素会按顺序排下来而不会发生重叠的现象。
  • 如果有多个浮动元素,后面的元素高度不会超过前面的元素,并且不会超过包含块。
  • 如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会高于非浮动元素
  • 浮动元素会尽可能地向顶端对齐、向左或向右对齐

重叠问题

  • 行内元素与浮动元素发生重叠,其边框,背景和内容都会显示在浮动元素之上
  • 块级元素与浮动元素发生重叠时,边框和背景会显示在浮动元素之下,内容会显示在浮动元素之上

clear属性 clear属性:确保当前元素的左右两侧不会有浮动元素。clear只对元素本身的布局起作用。 取值:left、right、both

3.2 父元素高度塌陷问题

为什么要清除浮动,父元素高度塌陷 解决父元素高度塌陷问题:一个块级元素如果没有设置height,其height是由子元素撑开的。对子元素使用了浮动之后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以撑开其高度,这样父级元素的height就会被忽略,这就是所谓的高度塌陷。

3.3 清除浮动的方法

方法1:给父级div定义 高度 原理:给父级DIV定义固定高度(height),能解决父级DIV 无法获取高度得问题。 优点:代码简洁 缺点:高度被固定死了,是适合内容固定不变的模块。(不推荐使用)

方法二:使用空元素,如<div class="clear"></div> (.clear{clear:both}) 原理:添加一对空的DIV标签,利用css的clear:both属性清除浮动,让父级DIV能够获取高度。 优点:浏览器支持好 缺点:多出了很多空的DIV标签,如果页面中浮动模块多的话,就会出现很多的空置DIV了,这样感觉视乎不是太令人满意。(不推荐使用)

方法三:让父级div 也一并浮起来 这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了,又会产生新的浮动问题。 不推荐使用

方法四:父级div定义 display:table 原理:将div属性强制变成表格 优点:不解 缺点:会产生新的未知问题。(不推荐使用)

方法五:父元素设置 overflow:hidden、auto; 原理:这个方法的关键在于触发了BFC。在IE6中还需要触发 hasLayout(zoom:1) 优点:代码简介,不存在结构和语义化问题 缺点:无法显示需要溢出的元素(亦不太推荐使用)

方法六:父级div定义 伪类:after 和 zoom

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1 .clearfix:after{
2     content:'.';
3     display:block;
4     height:0;
5     clear:both;
6     visibility: hidden;
7 }
8 .clearfix {zoom:1;}

原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题 优点:结构和语义化完全正确,代码量也适中,可重复利用率(建议定义公共类) 缺点:代码不是非常简洁(极力推荐使用)

经益求精写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1 .clearfix:after {
2     content:”\200B”; 
3     display:block; 
4     height:0; 
5     clear:both;
6  }
7 .clearfix { *zoom:1; } 照顾IE6IE7就可以了

4.BFC相关知识

定义:BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有 Block-level box 参 与, 它规定了内部的 Block-level Box 如何布局,并且与这个区域外部毫不相干。

BFC布局规则 BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

  • BFC这个元素的垂直方向的边距会发生重叠,垂直方向的距离由margin决定,取最大值
  • BFC 的区域不会与浮动盒子重叠(清除浮动原理)。
  • 计算 BFC 的高度时,浮动元素也参与计算。

哪些元素会生成 BFC

  • 根元素
  • float 属性不为 none
  • position 为 absolute 或 fixed
  • display 为 inline-block, table-cell, table-caption, flex, inline-flex
  • overflow 不为 visible

5.box-sizing是什么

设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content,二IE模型包括borderpadding box-sizing属性可以为三个值之一:

  • content-box,默认值,只计算内容的宽度,border和padding不计算入width之内
  • padding-box,padding计算入宽度内
  • border-box,border和padding计算入宽度之内

6.px,em,rem 的区别

px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的,是一个虚拟长度单位,是计算 机系统的数字化图像长度单位,如果 px 要换算成物理长度,需要指定精度 DPI。 em 是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置, 则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此并不是一个固定的值。 rem 是 CSS3 新增的一个相对单位(root em,根 em),使用 rem 为元素设定字体大小时,仍然是相对大小, 但相对的只是 HTML 根元素

7.CSS 引入的方式有哪些? link 和@import 的区别是?

有四种:内联(元素上的style属性)、内嵌(style标签)、外链(link)、导入(@import) link和@import的区别:

  • link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS
  • link引用CSS时,在页面载入时同时加载@import需要页面网页完全载入以后加载
  • link是XHTML标签,无兼容问题@import是在CSS2.1提出的,低版本的浏览器不支持
  • link支持使用Javascript控制DOM去改变样式;而@import不支持。

8.流式布局与响应式布局的区别

流式布局 使用非固定像素来定义网页内容,也就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进 行伸缩,不受固定像素的限制,内容向两侧填充。

响应式开发 利用CSS3 中的 Media Query(媒介查询),通过查询 screen 的宽度来指定某个宽度区间的网页布局。

  • 超小屏幕(移动设备) 768px 以下
  • 小屏设备 768px-992px
  • 中等屏幕 992px-1200px
  • 宽屏设备 1200px 以上

由于响应式开发显得繁琐些,一般使用第三方响应式框架来完成,比如 bootstrap 来完成一部分工作,当然也 可以自己写响应式。

区别

9.渐进增强和优雅降级

关键的区别是他们所侧重的内容,以及这种不同造成的工作流程的差异

  • 优雅降级一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。。
  • 渐进增强针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

区别:

  • 优雅降级是从复杂的现状开始,并试图减少用户体验的供给
  • 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要
  • 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

10.CSS隐藏元素的几种方式及区别

display:none

  • 元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。
  • 不会触发其点击事件

visibility:hidden

  • display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排。
  • 无法触发其点击事件
  • 适用于那些元素隐藏后不希望页面布局会发生变化的场景

opacity:0

  • 将元素的透明度设置为0后,在我们用户眼中,元素也是隐藏的,这算是一种隐藏元素的方法。
  • visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,但我们都知道,设置透明度为0后,元素只是隐身了,它依旧存在页面中。
  • 可以触发点击事件

设置height,width等盒模型属性为0

  • 简单说就是将元素的marginborderpaddingheightwidth等影响元素盒模型的属性设置成0,如果元素内有子元素或内容,还应该设置其overflow:hidden来隐藏其子元素,这算是一种奇技淫巧。
  • 如果元素设置了border,padding等属性不为0,很显然,页面上还是能看到这个元素的,触发元素的点击事件完全没有问题。如果全部属性都设置为0,很显然,这个元素相当于消失了,即无法触发点击事件。
  • 这种方式既不实用,也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的,比如jquery的slideUp动画,它就是设置元素的overflow:hidden后,接着通过定时器,不断地设置元素的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom为0,从而达到slideUp的效果。

其他脑洞方法

  • 设置元素的position与left,top,bottom,right等,将元素移出至屏幕外
  • 设置元素的position与z-index,将z-index设置成尽量小的负数

11.简述一下src与href的区别

href是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

12.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

这个问题面试偶尔被问到的时候有点懵逼~~~平时没在意。。。。

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea 块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-04-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
CSS 清理浮动 clear属性
虽然浮动可以便于页面布局,但同时会产生一些问题,也就是常说的副作用。浮动元素最常见的缺陷是:父元素的高度塌陷和影响兄弟元素的位置。
老K博客
2023/12/18
2880
前端开发必会的HTML/CSS硬知识
文/小魔女 1 本文简介 面试大厂,HTML/CSS,JS,网络基础这三块硬知识是必不可少的 我整理了一些备考笔记,分享给大家 初中级前端到高级前端的蜕变,从基础知识开始~ 分享小魔女的音乐 2 块元素和行元素 2.1 请说出3个H5新增的块元素,并介绍他们的应用场景 aside:表示article元素内容之外,与article元素内容相关的辅助信息 figure:代表一个块级图像,包含说明。figure添加标题时,与figcaption元素结合使用。 dialog:表示几个人直接的对话。与dt和dd元素
山月
2020/10/26
1.6K0
前端开发必会的HTML/CSS硬知识
前端面试之CSS重点概念精讲
今天,我们又开辟了一个新的篇幅 --「前端面试」。即是把一些平时常用的概念和工具方法整理和罗列,也算是一种变向的「未雨绸缪」。
前端柒八九
2022/12/19
2.7K0
前端面试之CSS重点概念精讲
CSS 基础系列:从清除浮动和margin塌陷问题谈BFC
浮动的元素会影响其兄弟元素的位置,并可能导致父元素的高度塌陷(假如父元素没设置高度),因此需要清除浮动(带来的影响)。
Chor
2019/11/07
2.7K0
css基础
    行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。
超蛋lhy
2018/08/31
1.7K0
css基础
CSS补充
文档流(定位流,普通流,浮动流) 1、普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素:按照从上到下的方式逐个排列 页面中的行内元素:按照
ymktchic
2022/01/18
6790
CSS补充
剖析一些经典的CSS布局问题,为前端开发+面试保驾护航
这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后,它有着块级元素的一些性质例如可以设置宽高等,但它与inline-block还是有一些区别的,第一个就是关于横向排序的时候,float可以设置方向而inline-block方向是固定的;还有一个就是inline-block在使用时有时会有空白间隙的问题
桃翁
2019/11/09
1.2K0
剖析一些经典的CSS布局问题,为前端开发+面试保驾护航
CSS&HTML面经专题——(三)CSS定位/盒模型/经典布局/浮动布局与BFC
position:static | relative | absolute | fixed | center | page | sticky
玖柒的小窝
2021/10/26
2.1K0
CSS&HTML面经专题——(三)CSS定位/盒模型/经典布局/浮动布局与BFC
「资深前端工程师总结」前端面试知识点大全—CSS篇
display:none使用后,元素的宽度,高度都会丢失,视为不存在不加载;元素原来占据的空间位置不保留;产生回流和重绘;
用户5997198
2019/08/09
1.7K0
「资深前端工程师总结」前端面试知识点大全—CSS篇
CSS基础知识点整理笔记
在开发过程中 我们会通过通配符+box-sizing ,将元素的标准统一,解决不同浏览器的兼容问题 ,box-sizing可选属性:content-box(content)、border-box(content + border)、padding-box(content + border + padding)。
前端达人
2021/08/10
1.5K0
CSS基础知识点整理笔记
HTML和CSS常见问题整理
对于IE5.x和6来说,在怪异模式中width等于content、左右padding和左右border。
用户7657330
2020/08/14
1.7K0
HTML和CSS常见问题整理
Css详细介绍
(就近原则): !important > id > class > tag (!important 比内联优先级高)
FGGIT
2024/10/15
3390
详解 清除浮动 的多种方式(clearfix)
版权声明:本文为博主原创文章,欢迎转载,转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/68954481
FEWY
2019/05/29
1.7K0
54个CSS重难点整理,12-24篇,进阶高薪必需要掌握的知识点
本次我把CSS中的重难点整理出来,总共54个核心知识点,供大家复习,希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点,同时也是面试必问的内容。
艾编程
2022/12/06
1.5K0
54个CSS重难点整理,12-24篇,进阶高薪必需要掌握的知识点
前端面试之HTML && CSS
带!important 标记的样式属性优先级最高; 样式表的来源相同时: !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
CODER-V
2023/03/04
4.5K0
2021前端面试高频 HTML + CSS
当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。
程序员海军
2021/10/11
1.1K0
2021前端面试高频 HTML + CSS
HTML+CSS高级
第一章 一、内联块     display: inline-block;      1、特征:                1.1     块级元素在一行显示     (得到内联元素的属性)           1.2     内联元素支持宽高     (得到块的属性)           1.3     没有宽度的时候,内容撑开宽度     (得到内联元
用户1148399
2018/01/09
6.3K0
百度Web前端技术学院(1)-HTML, CSS基础
百度前端学院的第一次任务笔记,HTML、CSS 基础。主要有 CSS 工作原理,选择器的使用,常用属性,行高属性,盒模型与定位,最后根据设计图实现 4 个页面。
零式的天空
2022/03/22
1.2K0
104道 CSS 面试题,助你查漏补缺(上)
https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md
刘小夕
2020/11/03
2.3K0
104道 CSS 面试题,助你查漏补缺(上)
HTML & CSS页面布局之定位
默认情况下,HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素,行内元素,行内块级元素,他们的特性是块级独占一行,行内和行内块级可以在一行内共存,这些特性都是针对标准流的。总结一下就是,标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版,如果元素是行内元素/行内块级元素, 那么就会水平排版。
用户5997198
2020/05/12
5.9K0
相关推荐
CSS 清理浮动 clear属性
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验