【持续..】WEB前端面试知识梳理 - CSS部分
传送门:
WEB前端面试知识梳理 - CSS部分
WEB前端面试知识梳理 - JS部分
最近在看大厂的一些面试题,发现很多问题都是平时没有在意的,很多知识都是知道一点但又很模糊说不出个所以然来,反思自己这几年来貌似只是为了工作而工作,忽略了很多本该了解的基础知识,基础知识不牢固导致进步很慢,借这次机会空闲的时候恶补一下,慢慢梳理并记录下来。
=================================================
盒模型
概念
CSS盒模型本质上是一个盒子,封装周围的HTML元素,有W3C标准盒模型和IE怪异盒模型两种,由里到外分别包含:content(内容),padding(内边距),border(边框),margin(外边距)
标准模型和怪异模型
区别:两种盒模型的内容计算方式不同
- w3c标准盒模型:
总元素宽度 = content部分的宽度
总元素高度 = content部分的高度 - IE(怪异)盒模型:
总元素宽度 = content + padding + border 这三个部分的宽度
总元素高度 = content + padding + border 这三个部分的高度
开发中常用哪种模型?为什么?
常用IE盒模型,因为使用了IE盒模型的布局更可控。
举例1:因为如果想保持一个盒子的真实占有宽度不变,那么加width的时候就要相应的减少左右的padding。加padding的时候就要相应的减少width,不然就会导致盒子真实占有宽度增加,导致布局发生改变,比如同一行的盒子因为宽度超出被挤下去了。
举例2:移动端布局采用百分比的情况很常见,如果有两个div宽度分别为50%,横向排列,这时候如果给其中一个div加固定的border值(非百分比),还要保证两个div横向排列不掉下来,并且真实占有宽度不发生改变,这种情况下如果用IE盒模型就方便的多,不用过多调整,直接加border值就好。
改变容器的盒模型组成方式
借助css3的box-sizing属性
box-sizing: content-box; //W3C盒模型 box-sizing: border-box; //IE盒模型
BFC
BFC: 一个独立的渲染区域,它规定了内部的块级盒子如何布局,并且与这个区域外部毫不相干,在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。
BFC布局特点:
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的最左边,与包含块的最左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与浮动盒子重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时,浮动元素也参与计算
哪些元素会生成BFC?
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
应用
1. 自适应两栏布局
2. 清除内部浮动
3. 防止垂直 margin 重叠
关于定位
position定位的几种方式以及主要区别?
- static(静态定位):默认值,不脱离文档流
- relative(相对定位):元素相对自身偏移某个位置定位,不脱离文档流,会引起
- absolute(绝对定位):相对于其最近的父级块元素定位,脱离文档流
- fixed(固定定位):相对于可视窗口定位,脱离文档流
relative和translate都是基于自身的移动,有什么区别?
- translate不会引起页面的重排,但relative会引起重排
link 与 @import 的区别
扩展:文章传送门
- 从属关系区别:
link是HTML标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。
@import是CSS语法,只有导入样式表的作用; - 加载顺序区别
link标签引入的 CSS 被同时加载;
@import引入的 CSS 将在页面加载完毕后被加载。 - 兼容性区别
link标签作为 HTML 元素,不存在兼容性问题。
@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别; - DOM可控性区别
通过JavaScript可以动态创建或者删除<link>标签,进而操作CSS
@import不支持。
【持续..】WEB前端面试知识梳理 - CSS部分相关推荐
- 前端面试知识梳理(高级前端开发工程师)
css部分 盒子模型 margin+border+padding+content Content边界/内边界: content边界环绕在由该元素的宽和高决定的一个矩形上,这个尺寸通常由该元素渲染后的内 ...
- Web前端基础知识:CSS盒子模型、绝对定位和相对定位
一:CSS盒子模型 CSS盒子模型概念:CSS盒子模型包含了内容(content).内边距(padding).边框(border).外边距(margin).宽度(width).高度(height)几个 ...
- Web 前端基础知识面试大全
目录 一.HTML 1.对 HTML 语义化的理解 2.区别:src 和 href 3.DOCTYPE 的作用 4.HTML5 的新特性 5.script 标签中的 defer 和 async 6. ...
- web前端面试宝典——带你直击面试重难点(40个经典题目,涵盖近90%的考点,码字2w,干货满满!)
系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上 的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容 参考链接 HTML & CSS 篇 ...
- web前端面试高频考点——JavaScript 篇(一)【JS的三座大山 】 原型和原型链、作用域和闭包、异步
系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上 的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容 参考链接 HTML & CSS 篇 ...
- WEB前端底层知识--浏览器是如何工作的
随笔- 6 文章- 2 评论- 103 WEB前端底层知识--浏览器是如何工作的 概述 对于一直从事B/S架构(B/S也是一种C/S架构,只不过C/S自己写显示而B/S有相对统一的显示引擎实现而已 ...
- 【PHP 面试知识梳理】
PHP 面试知识梳理 算法与数据结构 BTree和B+tree BTree B树是为了磁盘或者其他存储设备而设计的一种多叉平衡查找树,相对于二叉树,B树的每个内节点有多个分支,即多叉. 参考文章:ht ...
- Web前端基础知识整理
1. 前端基础知识 文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述 特点: 扩展名为.xml 内容区分大小写 标签要成对出现,形成容器,只能有一个 标签按正确 ...
- 2018web前端不好找工作之web前端面试简历补救篇
web前端面试简历算是第一张脸,给HR/CTO的第一印象,弄好啦,就有面试的机会!? 关于前端面试简历简单的介绍几点吧. 1.关于简历如何写.首先可以去招聘网站上面看看.那么可以看哪些呢.比如在拉钩上 ...
最新文章
- linux应用程序安装与管理
- Kolla 让 OpenStack 部署更贴心
- SQL With As 用法Sql 四大排名函数(ROW_NUMBER、RANK、DENSE_RANK、NTILE)简介
- HeartBeat 集群组件概述
- Docker Java+Tomcat 环境搭建
- 北京尚学堂|程序员的智慧
- 如何读H.264的标准和代码
- 【ERNIE】深度剖析知识增强语义表示模型——ERNIE
- LeetCode Interview Qustions: Add Two Number
- MFC中获取各个窗口(对话框)之间的指针、对象、句柄
- 数据加载中...请稍后(js一句代码)
- 王道训练营3月12日
- 知识直播的“顶流”,正在被复制
- lpx寒假作业案例15
- 集美福利!陈睿当时加入B站的故事分享
- 【Python】股票价格与交易量分析代码
- 循环体中continue、break语句的使用
- 64码高清电视 android版,爱直播tv版-爱直播v4.7.64 安卓智能电视版__西西安卓tv
- 单总线协议(1—wire)
- 语义分割标签npy文件保存为图片的几种方式详细讨论
热门文章
- effective typescript_初学typescript(一) - 来亦何哀
- vue 不识别svg_vue中引用svg,vue引入svg不显示,vue引用svg配置,vue3.0+ts如何配置svg...
- mac u盘格式化 linux系统文件,Mac上怎么制作Ubuntu的U盘开启盘(装Linux系统)
- object detection
- 【图像分类】没有人工收银,吃饭买单全自动化,是谁的功劳?
- 【赠书】迁移学习如何入门,看看这本简明手册即可
- 【GAN优化】小批量判别器如何解决模式崩溃问题
- 【完结】12篇文章告诉你深度学习理论应该学到什么水平
- 【AI基础】OpenCV,PIL,Skimage你pick谁
- 【数据】深度学习从“数据集”开始