CSS高频八股

一、盒模型1Margin(外边距)- 清除边框外的区域外边距是透明的。Border(边框)- 围绕在内边距和内容外的边框。Padding(内边距)- 清除内容周围的区域内边距是透明的。Content(内容)- 盒子的内容显示文本和图像。2重要:当您指定一个 CSS 元素的宽度和高度属性时你只是设置内容区域的宽度和高度。要知道完整大小的元素你还必须添加内边距边框和外边距。div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }3元素宽度高度计算总元素的宽度宽度左填充右填充左边框右边框左边距右边距30025*225*225*2总元素的高度高度顶部填充底部填充上边框下边框上边距下边距二、css3弹性盒子flexbox1、基本语法display: flex;1作用是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。2弹性容器通过设置display属性的值为flex或 inline-flex将其定义为弹性容器。3弹性容器外及弹性子元素内是正常渲染的”flex只管容器里面的一层子元素怎么排列。容器外面兄弟元素和容器里面某个子元素的内部比如它的子子孙孙该怎么布局就怎么布局也按普通文档流或它自己的样式渲染不受父级的flex控制。4“弹性子元素通常在弹性盒子内一行显示”默认情况下所有直接子元素会像排队一样水平挤在同一行不会自动换行。5“默认情况每个容器只有一行”容器只有一根主轴所有子元素都放在这一行里不会因为你宽度不够就自动换到第二行除非你设置flex-wrap: wrap。例子!DOCTYPE html html head style.flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; }/style /head body div classflex-container div classflex-itemflex item 1/div div classflex-itemflex item 2/div div classflex-itemflex item 3/div /div div classotherflex item 3/div /body /htmlflex只控制.flex-item在这一行里怎么排列靠左、居中、等分…。外面的.other不归flex管。.item里面如果还有东西那也是按普通方式显示。如果三个.item宽度加起来超过容器默认会溢出不会自动换行。总结flex 只管“爸爸”怎么安排“儿子”在这一行站队不管“爷爷”也不管“孙子”。2、弹性盒子的主轴线弹性容器里所有子元素排队时沿着哪条“看不见的线”排列这根线就叫主轴即主轴 子元素“怎么排队”的方向线。主轴就是子元素排列的方向flex-direction: row→ 主轴是水平从左到右flex-direction: column→ 主轴是垂直从上到下交叉轴就是垂直于主轴的那条线3、flex-direction属性指定了弹性子元素在父容器中的位置1flex-direction属性的值row→ 从左到右排默认row-reverse← 从右到左排column↓ 从上到下排column-reverse↑ 从下到上排一句话row是水平排column是垂直排带reverse的就是反向排。注意flex-direction属性的值仅影响 flex 容器的子元素排列而flex容器默认在文本上是从左到右的。而direction属性rltright to left影响整个元素的文本方向、布局、浮动等,会让盒子容器在文本上从左到右4、justify-content 属性1flex-start仅弹性盒子父容器中的子元素全部挤在起点。就像排队从第一人开始挨着站前面不留空。2flex-end.........全部挤在终点。像排队从最后一个人往前排后面不留空。3center.............整体居中。整队人整体放在中间两边空的一样多。4space-between..............两边靠墙中间均分空隙。第一个贴左边或上边最后一个贴右边或下边中间平均拉开距离。5space-around..............每个元素两边都有相同宽度的空隙。元素之间距离是两边空隙的两倍视觉上更像“每个人周围都有呼吸空间”。5、align-items 属性用大白话解释align-items控制交叉轴上每个子元素怎么对齐stretch默认拉满。子元素不设高度或设auto时会像拉皮筋一样填满整个容器高度/宽度。flex-start顶头对齐。都往交叉轴的起点挤横排时就是顶部对齐。flex-end末尾对齐。都往交叉轴的终点挤横排时就是底部对齐。center居中对齐。在交叉轴上上下或左右居中。baseline按文字基线对齐。不管高度、内边距怎么变让所有子元素里的第一行文字的底边对齐。例子flex-startflex-endcenterstretch:在交叉轴上拉满6、flex-wrap属性用于指定弹性盒子的子元素换行方式。nowrap- 默认 弹性容器为单行。该情况下弹性子项过多会溢出容器。wrap- 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行子项内部会发生断行wrap-reverse-反转 wrap 排列。7、align-content属性align-content控制的是只有多行/多列才有用多行/多列之间怎么在交叉轴上排列而不是单行内的元素。用大白话解释每个值前提容器已换行有多行子元素stretch默认把多行均匀拉长让它们填满整个容器高度行之间自动撑开。flex-start所有行整体靠上或靠交叉轴起点排。flex-end所有行整体靠下或靠交叉轴终点排。center所有行整体在容器中间上下留空一样多。space-between第一行靠上最后一行靠下中间的行均分剩余空间。space-around每一行的上下都有相同大小的空隙行间空隙比上下边缘的空隙大一倍。8.总结flexbox父容器的各个属性1flex-direction:控制主轴线的方向子元素在父容器中会沿着主轴线的方向排列2justify-content:控制子元素在父容器的主轴线上的分布居中、两边靠、聚在一边...;3align-items:控制子元素在父容器的交叉轴线上的分布顶对极、末对齐、居中、拉满...;4flex-wrap:决定子元素是否换行/列防止溢出5align-content:多行/列才有效控制子元素在父容器的交叉轴线上的分布6注这些只会影响父容器内的子元素的排列布局不会影响父容器在页面上的分布出分用directionrtl(right to left)9、弹性子元素属性1order排序你想让哪个元素排到最前面就给它的order设个最小的数比如.item:first-child { order: 2; /* 本来排第1现在排到后面去 */ } .item:last-child { order: -1; /* 本来排最后现在插队到第1 */ }2align-self单独特立独行覆盖父容器align-items的设置只控制这一个子元素在交叉轴上的对齐方式。可选值flex-start/flex-end/center/baseline/stretch大白话所有兄弟都听父级的align-items安排就这个元素“我不听我要自己对齐”。.container { align-items: center; /* 所有子元素都居中 */ } .item:nth-child(2) { align-self: flex-end; /* 只有第2个元素跑到底部 */ }3flex-grow / flex-shrink / flex-basis顺带说一下你虽然没问但跟order、align-self同属“子元素属性”也顺便一提flex-grow父容器有空余空间时我能不能多占flex-shrink空间不够时我愿不愿意被压缩flex-basis在放大/缩小之前我默认占多宽大白话大家分蛋糕grow是“谁多要”shrink是“谁少给”basis是“本来该分多少”。总结属性作用order控制排队顺序插队align-self控制自己在交叉轴上的对齐不听父级flex-grow / shrink / basis控制自己在主轴上如何占空间核心思想父级定大局方向、换行、整体对齐子元素用这三个属性搞特殊化。三、浮动float1、概念1浮动是 CSS 中传统布局方式虽然现在被 Flex/Grid 取代但仍是面试重点且在某些场景文字环绕依然有用。2让元素“漂浮”起来脱离正常文档流向左或向右靠只能水平移动直到碰到父容器边界或其他浮动元素。3浮动的特性特性说明脱离文档流元素不再占位后续块级元素会“钻”到它下面贴边排列向左或向右靠碰到边界或其他浮动元素就停下行内元素环绕文字/行内元素会环绕在浮动元素周围核心设计初衷块级元素变行内块浮动后的元素可以设置宽高且不独占一行4如果不想要文字环绕呢清除浮动元素浮动之后周围的元素会重新排列为了避免这种情况使用 clear 属性。!DOCTYPE html html head meta charsetutf-8 title菜鸟教程(runoob.com)/title style .thumbnail { float:left; width:110px; height:90px; margin:5px; } .text_line { clear:both; margin-bottom:2px; } /style /head body h3图片库/h3 p试着调整窗口,看看当图片没有足够的空间会发生什么。./p img classthumbnail src/images/klematis_small.jpg width107 height90 img classthumbnail src/images/klematis2_small.jpg width107 height80 img classthumbnail src/images/klematis3_small.jpg width116 height90 img classthumbnail src/images/klematis4_small.jpg width120 height90 h3 classtext_line第二行/h3 img classthumbnail src/images/klematis_small.jpg width107 height90 img classthumbnail src/images/klematis2_small.jpg width107 height80 img classthumbnail src/images/klematis3_small.jpg width116 height90 img classthumbnail src/images/klematis4_small.jpg width120 height90 /body /html对文字元素设置clear,这样文字“第二行”就不会围绕着浮动元素图片了四、两栏/三栏布局1、两栏布局左边定宽右边自适应经典场景左侧固定导航/侧边栏右侧自适应内容区。1浮动float margin(盒模型的外边距)最传统左边元素利用浮动将左边元素宽度设置为200px并且设置向左浮动floatleft右边元素右边元素知道左边元素靠左浮动且占了 200px所以会主动环绕浮动元素主动把自己的左内边距左边空位让出 200px老老实实待在它右边自然就自适应了。然后将右边元素的margin-left左外边距设置为200px宽度设置为auto默认为auto撑满整个父元素。HTML结构 div classcontainer div classleftleft/div div classrightright/div /divCSS实现两栏布局 .left { float: left; width: 200px; } .right { margin-left: 200px; width:auto; }2.三栏布局中间自适应页面中一共有三栏左右两栏宽度固定中间自适应的布局1左右浮动给宽高 中间要放在左右的后面才可以div classcontainer div classleft左边栏/div div classcenter中间栏/div div classright右边栏/div /div.left, .right { width: 200px; float: left;浮动的元素碰到父容器边框或者别的浮动元素就会停下来所以都设置向左浮动是OK 的 } .center { margin: 0 200px;这个是外边距 }五、BFC块级格式化上下文1、概念BFC 是浏览器在渲染页面时为了管理块级元素的布局创建的一个“隔离容器”只有块级盒子参与区域内部的布局不会影响外部元素也不会被外部元素影响。BFC 就是给元素加一道“空气墙”让它的内部布局和外部完全隔离互不影响。2.BFS除非条件最常见的.类名{overflowhidden}3.作用1防止 margin 合并塌陷相邻两个块级元素的垂直外边距会发生合并但如果它们处在不同的 BFC 中则不会合并。例子上下两个元素一个margin-bottom: 30px一个margin-top: 20px按理说距离应该是 50px但实际只有 30px取了大的解决方案div classcontainer !-- 这个容器触发了 BFC -- div classbox1我是上面/div /div div classbox2我是下面/div.container { overflow: hidden; /* 触发 BFC */ } .box1 { margin-bottom: 30px; background: red; } .box2 { margin-top: 20px; background: blue; } /* 现在两个元素的距离就是 30px 20px 50px 了 */2可以包含浮动元素一个 BFC 会扩展其高度以包含其内部的浮动子元素从而防止“高度塌陷”。例子父元素包裹着浮动的子元素但父元素高度变成 0 了。div classparent div classchild我是浮动的/div /div.parent { background: yellow; /* 这个父元素高度是 0背景色看不见 */ overflow: hidden; /* 触发 BFC现在父元素能包住浮动的子元素了 */ } .child { float: left; height: 100px; }3阻止文字环绕浮动元素在 BFC 中的内容不会受到外部浮动元素的影响例如不想文字受浮动图片的影响而环绕图片例子清除浮动法一给要清除浮动的元素设置属性overflow:hidden;法二给要清除浮动的元素设置属性clear:both;4实现布局隔离BFC 可以防止内部元素影响外部布局是构建复杂布局时的常用技术。例子用来两栏布局左浮动右自适应且不会相互影响外边距不会重叠.left { float: left; width: 200px; } .right { overflow: hidden; }六、水平居中/垂直居中