CSS复合选择器,挥泪整理面经
问:BFC 与 IFC 区别
BFC 是块级格式上下文,IFC 是行内格式上下文:
- 内部的 Box 会水平放置
- 水平的间距由 margin,padding,border 决定
问:BFC会与float元素相互覆盖吗?为什么?举例说明
不会,因为 BFC 是页面中一个独立的隔离容器,其内部的元素不会与外部的元素相互影响,比如两个 div,上面的 div 设置了 float,那么如果下面的元素不是 BFC,也没有设置 float,会形成对上面的元素进行包裹内容的情况,如果设置了下面元素为 overflow:hidden;属性那么就能够实现经典的两列布局,左边内容固定宽度,右边因为是 BFC 所以会进行自适应。
问:了解box-sizing吗?
box-sizing 属性可以被用来调整这些表现:
content-box
是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box
告诉浏览器:你想要设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。
(2)什么是 BFC
BFC(Block Formatting Context)格式化上下文,是 Web 页面中盒模型布局的 CSS 渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。
形成 BFC 的条件
五种:
- 浮动元素,float 除 none 以外的值
- 定位元素,position(absolute,fixed)
- display 为以下其中之一的值 inline-block,table-cell,table-caption
- overflow 除了 visible 以外的值(hidden,auto,scroll)
- HTML 就是一个 BFC
BFC 的特性:
- 内部的 Box 会在垂直方向上一个接一个的放置。
- 垂直方向上的距离由 margin 决定
- bfc 的区域不会与 float 的元素区域重叠。
- 计算 bfc 的高度时,浮动元素也参与计算
- bfc 就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
(2)问:了解盒模型吗?
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)
、边框(border)
、内边距(padding)
、实际内容(content)
四个属性。 CSS盒模型:标准模型 + IE模型
标准盒子模型:宽度=内容的宽度(content)+ border + padding
低版本IE盒子模型:宽度=内容宽度(content+border+padding),如何设置成 IE 盒子模型
问:说一下你知道的position属性,都有啥特点?
static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性定义。 sticky:具体是类似 relative 和 fixed,在 viewport 视口滚动到阈值之前应用 relative,滚动到阈值之后应用 fixed 布局,由 top 决定。
问:两个div上下排列,都设margin,有什么现象?
- 都正取大
- 一正一负相加
问:为什么会有这种现象?你能解释一下吗
是由块级格式上下文决定的,BFC,元素在 BFC 中会进行上下排列,然后垂直距离由 margin 决定,并且会发生重叠,具体表现为同正取最大的,同负取绝对值最大的,一正一负,相加
BFC 是页面中一个独立的隔离容器,内部的子元素不会影响到外部的元素。
问:清除浮动有哪些方法?
不清楚浮动会发生高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)
- clear清除浮动(添加空div法)在浮动元素下方添加空div,并给该元素写css样式:{clear:both;height:0;overflow:hidden;}
- 给浮动元素父级设置高度
- 父级同时浮动(需要给父级同级元素添加浮动)
- 父级设置成inline-block,其margin: 0 auto居中方式失效
- 给父级添加overflow:hidden 清除浮动方法
- 万能清除法 after伪类 清浮动(现在主流方法,推荐使用)
CSS复合选择器,挥泪整理面经相关推荐
- css复合选择器 1205
css复合选择器 1205 后代选择器 通过父级筛查后代 父级 后代{属性:值} 子选择器 通过父级筛查子级 父级 子级{属性:值} 交集选择器 利用标签与类相交的特性来选中目标 标签.类名{属性:值 ...
- 从零开始学前端:CSS复合选择器 --- 今天你学习了吗?(CSS:Day10)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录 从零开始学前端:程序猿小白也可以完全 ...
- css3 复合选择器,CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...
- CSS基础(emmet 语法,CSS 复合选择器, 布局认知,背景样式)
CSS基础 1. emmet 语法 -- 开发效率 1.1 emmet 语法生成 html 标签 emmet 的特点和作用是什么? 通过简写提高编码效率. emmet 生成 HTML 结构语法 序号 ...
- CSS复合选择器---后代选择器、子选择器、并集选择器、伪类选择器
CSS复合选择器 建立在基础选择器上,对基本选择器进行组合形成的 可以更准确.更高效的选择目标元素(标签) 包含:后代选择器.子选择器.并集选择器.伪类选择器 一.后代选择器 又称为包含选择器,可以选 ...
- CSS复合选择器,元素的显示模式,CSS背景设置
CSS复合选择器,元素的显示模式,CSS背景设置 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页- ...
- CSS复合选择器、元素显示模式、背景
[CSS复合选择器.元素显示模式.背景] 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选择器的类型把选择器分为:基础选择器 和 复合选择器,复合选择器是建立在基础选择器之 ...
- day4 css复合选择器元素背景
1. Emmet语法 前身是zen coding,使用缩写来提高编写速度. 1.1 快速生成html语法结构 1.2 快速生成css语法结构 1.3 快速格式化代码 2. css复合选择器 2.1 复 ...
- 前端基础之CSS复合选择器
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础 # CSS 第二天 今天我们围绕一个 导航栏案例进行 ...
- CSS复合选择器( 交集、 并集、后代、子元素、兄弟、伪类、伪元素)
CSS复合选择器 总结 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. :first-child与:first-of-type区别 :fi ...
最新文章
- python 虚拟环境就两句话整那么多没用的
- 二、传统数据库遇到的挑战
- POJ 1745 Divisibility【DP】
- 宇宙人工智能计算机程序,由人工智能推理出:整个宇宙会变成一个玄计算机,宇宙是虚拟的...
- KERMIT,XMODEM,YMODEM,ZMODEM传输协议小结
- ecshop插件_ECSHOP和SHOPEX快递单号查询中通快递插件V8.6专版
- spring集成mybatis后怎么在控制台打印sql语句
- 经常用到的一个分页存储过程
- 记账本记录日常收支,使用图表查看项目
- Flutter 修改APP名称和logo
- 关于Windows下装jupyter
- HTML5 影音 ( Video ) 概論
- 我TM究竟应该选哪个版本的MySQL?!
- 提交按钮在form之外的提交方式,提交按钮提交页面任意表单
- mybatis-plus Invalid bound statement (not found)
- python爬虫抓取头条街拍美女图片
- PlotJuggler绘图工具无法打开rosbag文件解决方案
- Waymo二次裁员/特斯拉召回,自动驾驶赛道「新」变化
- GET和POST请求的区别
- CryptoJS 加密的使用方法
热门文章
- 【小西】优化生日品同步网易严选功能,使其支持多SPU对多SKU关系
- Shopee大规模毁约offer,今年的大厂装都不装了
- “1万起投,年化达8%”?天安金交中心卖力“吆喝”的产品,是“香”还是“坑”?
- Python数据分析入门与实践
- PAT 1069.微博转发抽奖
- chef_Chef Infra 16添加了YAML配方支持
- 人工智能在生物学和神经科学中的应用
- 《操作系统》第一章 知识点整理
- 利用html开发英语单词小程,前端利用表单标签自己制作一个简单的表单页面-表单制作-小程序表单制作...
- 牛客-紫魔法师(仙人掌染色-判奇环)