CSS盒子模型居中方法,web前端开发教程视频
前言
下面分享了一些关于腾讯,酷狗,字节(实习的)面试真题,让大家参考。大家也自己去收集整理其他的面试题,可以通过这些面试题,查看自己的不足,也可以了解自己想要去的公司容易出现的面试题,进行有针对性复习。
问: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伪类 清浮动(现在主流方法,推荐使用)
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
[CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](()
分享一些前端面试题以及学习路线给大家
+真实项目实战+最新讲解视频】](()**
分享一些前端面试题以及学习路线给大家
[外链图片转存中…(img-qfQ73yn7-1650698207603)]
CSS盒子模型居中方法,web前端开发教程视频相关推荐
- 0基础学前端开发,CSS盒子模型居中方法
1. 背景 作为互联网行业技术从业者,接口调试是必不可少的一项技能,通常我们都会选择使用 Postman 这类工具来进行接口调试,在接口调试方面 Postman 做的确实非常出色. 但是在整个软件开发 ...
- CSS盒子模型居中方法,限时删除
前言 正式学习前端大概 3 年多了,接触前端大概 4 年了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一 ...
- CSS盒子模型居中方法,下载量瞬秒百万
前言 跳槽,这在 IT 互联网圈是非常普遍的,也是让自己升职加薪,走上人生巅峰的重要方式.那么作为一个普通的Android程序猿,我们如何才能斩获大厂offer 呢? 疫情向好.面试在即,还在迷茫踌躇 ...
- CSS盒子模型居中方法,完整版开放下载
第一章 HTML(★★) 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 2.HTML5的优点与缺点? 3.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? 4.HTML5有哪些 ...
- 推荐20个很有帮助的 Web 前端开发教程
在平常的搜索中,我碰到过很多有趣的信息,应用程序和文档,我把它们整理在下面这个列表.这是收藏的遇到的有用内容的一个伟大的方式,可以在你需要的时候方便查阅.相信你会在这个列表中发现对你很有用的资料. 您 ...
- Delphi Web应用开发B/S框架推荐:《Delphi Web前端开发教程——基于TMS WEB Core框架》
使用TMS WEB Core 发现Delphi软件开发的无限潜能-- 二十多年来,编程语言Delphi 以对 Windows 应用程序的快速可视化编程而闻名于世.尤其是轻松开发桌面数据库应用程序和快捷 ...
- 国内外的自学web前端开发教程网站
@TOC有哪些自学web前端开发教程网站? 国内外有哪些自学web前端开发教程网站? https://www.w3cl.com 第一个着力推荐 http://codyhouse.co/library ...
- Delphi Web前端开发教程(9):基于TMS WEB Core框架
3.REST Servers服务端(后端)框架 REST服务端特点: - 为远程资源提供一个REST API接口.也可以为其他网络内容提供服务: - 包括在Delphi Enterprise & ...
- Delphi Web前端开发教程(5):基于TMS WEB Core框架
Delphi/Object Pascal的历史与现状 从技术上讲,Delphi 是一个由 Object Pascal 编程语言支持并为其提供开发环境的IDE,可以实现高生产力和快速应用程序开发的工具. ...
最新文章
- 怎样设计一个商城项目?
- 马云:腾讯不是阿里要打败的对手,是同为社会创造价值的伴侣
- python 笔记 之 requests获取网络数据
- VTK:网格之BoundaryEdges
- 计算广告学学习2 - 广告有效性模型
- Redhat Ha Cluster -(转)
- linux之用wget下sublime简单使用总结
- linux取设备分辨率,linux 获取系统屏幕分辨率
- python玩王者荣耀皮肤碎片怎么获得_大神教你用Python爬取王者荣耀英雄皮肤,不充钱也能入手!...
- 推荐《富爸爸、穷爸爸》
- 【笔记——Java】读取properties文件
- Android欢迎页短暂白屏
- 卡方分布分位数_数理统计第五讲(三大分布)
- 二十一、 Memento 备忘录(行为型模式)
- apache加nginx加Php,Apache/Nginx为PHP设置、添加$_SERVER服务器环境变量
- intel 显卡驱动的节能设置(新版驱动)
- 机器自动翻译古文拼音 - 十大宋词 - 水调歌头 明月几时有 苏轼
- 阿里云集群服务器的正确搭建
- Matlab 实用代码集
- 实验9-9 有理数比较(10 分)