文章目录前端八股整理CSS高频小题 011.如何让元素水平垂直居中?2.盒模型?3.BFC,如何清除浮动?4.了解过哪些布局flex布局说一下,宽高不定的div如何定位在屏幕中间宽高为0能用flex实现吗?前端八股整理CSS高频小题 011.如何让元素水平垂直居中?方法一:定位布局,使用 postion 来实现元素水平垂直居中divclassparentdivclasschild内容/div/div.parent{position:relative;width:100vw;height:100vh;}.child{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}解释说明:position: absolute子元素 .child 不再参与普通文档流它的位置由 left 和 top 决定。left: 50%; top: 50%;把 子元素的左上角 移动到了父容器 .parent 的正中心。这时候 .child 的左上角在 .parent 的正中间元素会错位右下角偏移。为了让元素,调整中垂直水平居中的位置,应该向上向左移动,所以负的transform: translate(-50%, -50%)translate(-50%, -50%) 是 相对自身尺寸偏移 的操作向左移动 50%自身宽度的一半向上移动 50%自身高度的一半这就把左上角对齐中心 → 变成 整体居中方法二:也是定位布局,但是需要子元素存在宽高divclassparentdivclasschild内容/div/div.parent{position:relative;width:100vw;height:100vh;}.child{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:200px;height:100px;}解释说明:top: 0; bottom: 0; left: 0; right: 0;.child 会紧贴父元素的四条边margin: auto width: 200px; height: 100px;假如说此时父元素宽高为 500px,同样你写了子元素高度为100px,那么 margin:auto;会自动计算 margin-top 和margin-bottom500-100px400px,那么 margin-top 和margin-bottom分别就是 200方法三:使用 flex 布局,考虑好主轴 交叉轴即可默认的主轴方向 flex-direction:row 横向的,然后就是把主轴和交叉轴都设置为 center 就居中了.parent{display:flex;justify-content:center;/* 水平居中 */align-items:center;/* 垂直居中 */}2.盒模型?盒模型都是有四部分组成content、padding、border、margin最内层是content,外边是 padding,然后是 border,最外层是 margin标准盒模型和IE盒模型(怪异盒模型)的区别在于设置width和height时对应的范围不同标准盒模型和IE盒模型的区别在于设置width和height时对应的范围不同标准盒模型的width、height只包含了contentIE盒模型的width、height包含了border、margin、padding就是说如果是标准盒模型,如果设置 width:100px padding:10px border:1px,其中 width:100px,意味着 content 是 100px,实际上这个盒子的宽度是 100202122px 宽度如果是怪异盒模型,置 width:100px padding:10px border:1px,意味着 content 是 100-20-278px,三个加一起为 100px改变盒模型的种类通过修改元素的 box-sizing 属性来改变元素的盒模型box-sizeing:content-box 表示标准盒模型(默认值)box-sizeing:border-box 表示 IE 盒模型(怪异盒模型)什么时候用怪异盒模型?border-box怪异盒模型更适合绝大多数页面开发因为设的宽高就是最终看到的宽高padding 和 border 不会把盒子撑大布局更稳定、更好算所以现在很多项目都会直接全局写*, *::before, *::after{box-sizing:border-box;}3.BFC,如何清除浮动?BFC (Block Formatting Context块级格式化上下文是什么?BFC 可以理解成一个相对独立的布局区域。最常见的作用是让父元素在计算高度时把内部浮动元素也算进去从而解决浮动导致的高度塌陷同时它也能在一定程度上隔离外部浮动和 margin 重叠的影响。如何创建一个 BFC/* 最常见 */.bfc{overflow:hidden;/* 或 auto / scroll */}/* 其他常见方式 */.bfc{float:left;}.bfc{position:absolute;}.bfc{position:fixed;}.bfc{display:inline-block;}.bfc{display:flow-root;}BFC 的作用:解决高度塌陷问题:当子元素浮动后会脱离普通文档流父元素默认不会把它计算进自身高度如果让父元素形成 BFC父元素在计算高度时就会把内部浮动元素算进去。避免垂直 margin 重叠,不会发生垂直方向的 margin 重叠。BFC 实例:例子一:高度塌陷问题!-- 没有 BFC父元素高度会塌陷 --divclassparentdivclasschild/div/div.parent{background:lightgray;}.child{float:left;width:100px;height:100px;background:red;}此时父元素不会计算子元素的高度,他的高度塌陷为 0,如果这个父元素外边还有元素需要他撑开,就会出现问题div 是块级元素,默认是 display:block,默认 width: auto通常占满父元素可用宽度设置 bfc.parent{background:lightgray;overflow:hidden}.child{float:left;width:100px;height:100px;background:red;}例子二:垂直外边距合并当父元素和它的第一个子元素在垂直方向上紧贴在一起时如果父元素顶部没有内容、没有 padding-top、没有 border-top并且父元素也没有形成新的 BFC那么子元素设置的 margin-top 可能不会老老实实出现在父元素内部而是会和父元素的上外边距发生合并。这时的视觉效果往往是本来希望的是子元素在父元素内部距离父元素顶部 50px实际看到的是父元素整体被向下“顶”了 50px触发这种合并的常见条件通常需要满足以下几种情况父元素没有形成新的 BFC父元素没有padding-top父元素没有 border-top父元素和第一个子元素之间没有行内内容或其他内容把它们隔开注意:外边距合并,从感觉上来说就是子元素的外边距和父元素的的外边距之间没有了内容,所以产生了合并!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody{margin:0;}.outer{background:lightblue;/* overflow: hidden; */}.inner{background:lightcoral;margin-top:50px;}/style/headbodydivclassouterdivclassinner内容/div/div/body/html父元素内容由子元素撑起,父元素外边距合并,变成了 50px加入 BFC 隔离.outer{background:lightblue;overflow:hidden;}成功解决问题 蓝色部分和红色部分都是父元素,父元素由子元素本身和它的外边距构成,这样就就解决了外边距合并的问题4.了解过哪些布局flex布局说一下,宽高不定的div如何定位在屏幕中间宽高为0能用flex实现吗?第一问了解过哪些布局?我了解过的布局方式主要有普通文档流、浮动布局、定位布局、Flex 布局和 Grid 布局。早期页面中会比较多用浮动和定位来做布局现在实际开发里更常用的是 Flex 和 Grid。其中 Flex 更适合一维布局主要解决一行或者一列上的对齐和分布问题Grid 更适合二维布局可以同时从行和列两个维度去划分区域。拓展了解:普通文档流就是按照 html 的顺序,比如几个 div,就是从上到下 div 都占一行,浮动布局就是 float ,定位布局就是 postion:绝对定位相对定位第二问Flex 布局说一下Flex 是一种一维弹性布局模型主要用于控制子元素在主轴和交叉轴上的排列方式。使用时父元素设置 display: flex之后可以通过• flex-direction 控制主轴方向• justify-content 控制主轴对齐• align-items 控制交叉轴对齐• flex-wrap 控制是否换行• 子元素通过 flex、flex-grow、flex-shrink、flex-basis 控制伸缩它比较适合做水平排列、垂直居中、两端对齐、等分布局这类场景。拓展了解::为什么不叫横轴纵轴?因为不是固定横轴纵轴,flex-direction 决定主轴的方向,它是 row,那主轴就是横向,反之就是纵向的,交叉轴就是主轴垂直的那个方向.第三问宽高不定的 div 如何定位在屏幕中间方式一绝对定位 transform.parent{position:relative;width:100vw;height:100vh;}.child{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}方式二Flex 居中.parent{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;}如果父容器就是整个视口其实更常用 flex 直接居中实现会更简单。第四问宽高为 0 能用 flex 实现吗可以。因为 flex 控制的是flex item 在容器中的排列和对齐方式并不要求子元素必须有宽高。即使子元素宽高为 0只要它是一个 flex item仍然可以被放到父容器中心。只是如果元素本身宽高为 0 且没有内容视觉上看不到所以看起来像“没有效果”。.parent{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;}.child{width:0;height:0;}