【面试回顾】CSS常见题全总结 css前端面试问题

盒模型

盒模型#div1 { width: 100px; padding: 10px; border: 1px solid #ccc; margin: 10px; box-sizing: border-box; }this is div1

offsetWidth

正常盒子模型宽度：内容宽度（width）+padding+border+margin
控制总宽度为width：box-sizing：border-box

margin纵向重叠

相邻元素的margin-top和margin-bottom会发生重叠，最终高度会取大的
空白内容的
也会重叠

margin 纵向重叠p { font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom: 15px; }AAA 【【面试回顾】CSS常见题全总结】 BBB

margin负值问题

top和left负值，元素向上、向左移动
right负值，右侧元素左移，自身不受影响
bottom负值，下方元素上移，自身不受影响

margin 负值body { margin: 20px; }.float-left { float: left; } .clearfix:after { content: ''; display: table; clear: both; }.container { border: 1px solid #ccc; padding: 10px; } .container .item { width: 100px; height: 100px; } .container .border-blue { border: 1px solid blue; } .container .border-red { border: 1px solid red; }用于测试 margin top bottom 的负数情况 this is item 1this is item 2用于测试 margin left right 的负数情况 this is item 3this is item 4

BFC理解与应用

Block format context，块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件

float 不是 none
position 是 absolute 或 fixed
overflow 不是 visible （为hidden）
display 是 flex inline-block 等

BFC的常见应用

清除浮动

Document.container { background-color: #f1f1f1; } .left { float: left; } .bfc { overflow: hidden; /* 触发元素 BFC */ } 文章图片某一段文字……

布局
圣杯布局和双飞翼布局的目的

三栏布局，中间一栏最先加载和渲染
两侧内容固定，中间内容随着宽度自适应
一般用于PC网页

圣杯布局和双飞翼布局的技术总结

使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding一个用margin

圣杯布局

圣杯布局body { min-width: 550px; } #header { text-align: center; background-color: #f1f1f1; }#container { padding-left: 200px; padding-right: 150px; } #container .column { float: left; }#center { background-color: #ccc; width: 100%; } #left { position: relative; background-color: yellow; width: 200px; margin-left: -100%; right: 200px; } #right { background-color: red; width: 150px; margin-right: -150px; }#footer { text-align: center; background-color: #f1f1f1; }/* 手写 clearfix */ .clearfix:after { content: ''; display: table; clear: both; } this is headerthis is center this is left this is rightthis is footer

双飞翼布局

双飞翼布局body { min-width: 550px; } .col { float: left; }#main { width: 100%; height: 200px; background-color: #ccc; } #main-wrap { margin: 0 190px 0 190px; }#left { width: 190px; height: 200px; background-color: #0000FF; margin-left: -100%; } #right { width: 190px; height: 200px; background-color: #FF0000; margin-left: -190px; }this is mainthis is leftthis is right

flex 布局常用语法回顾：

flex-direction //横向、纵向
justify-content //对齐方式
align-items
flex-wrap
align-self

画个三点的色子

flex 画骰子.box { width: 200px; height: 200px; border: 2px solid #ccc; border-radius: 10px; padding: 20px; display: flex; justify-content: space-between; } .item { display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #666; } .item:nth-child(2) { align-self: center; } .item:nth-child(3) { align-self: flex-end; }

css 定位
absolute 和 relative定位

relative 依据自身定位
absolute 依据最近一层的定位元素定位
定位元素：
- absolute relative fixed
- body

absote relative 定位问题body { margin: 20px; } .relative { position: relative; width: 400px; height: 200px; border: 1px solid #ccc; top: 20px; left: 50px; } .absolute { position: absolute; width: 200px; height: 100px; border: 1px solid blue; top: 20px; left: 50px; }absolute 和 relative 定位问题 this is absolute

水平居中

inline元素：text-align：center
block元素：margin：auto
absolute元素：left：50% + margin-left负值

垂直居中

inline元素：line-height的值等于height的值
absolute元素：top：50%+margin-top负值
absolute元素：transform（-50%，-50%）
absolute元素：top，left，bottom，right = 0 + margin：auto

水平对齐

水平对齐.container { border: 1px solid #ccc; margin: 10px; padding: 10px; } .item { background-color: #ccc; }.container-1 { text-align: center; }.container-2 .item { width: 500px; margin: auto; }.container-3 { position: relative; height: 100px; } .container-3 .item { width: 300px; height: 100px; position: absolute; left: 50%; margin-left: -150px; }一段文字this is block itemthis is absolute item

垂直对齐

垂直对齐.container { border: 1px solid #ccc; margin: 10px; padding: 10px; height: 200px; } .item { background-color: #ccc; }.container-1{ text-align: center; line-height: 200px; height: 200px; }.container-2 { position: relative; } .container-2 .item { width: 300px; height: 100px; position: absolute; left: 50%; margin-left: -150px; top: 50%; margin-top: -50px; }.container-3 { position: relative; } .container-3 .item { width: 200px; height: 80px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }.container-4 { position: relative; } .container-4 .item { width: 100px; height: 50px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }一段文字this is itemthis is itemthis is item

css 图文样式
line-height的继承

line-height 继承问题body { font-size: 20px; line-height: 200%; } p { background-color: #ccc; font-size: 16px; }这是一行文字

css 响应式
rem概念

相对长度单位，相对于根元素，常用于响应式布局

rem 演示html { font-size: 100px; } div { background-color: #ccc; margin-top: 10px; font-size: 0.16rem; }rem 1 rem 1 rem 1 this is div1this is div2this is div3

响应式布局的常用方案

media-query，根据不同的屏幕宽度设置根元素font-size
rem，基于根元素的相对单位

响应式布局@media only screen and (max-width: 374px) { /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */ html { font-size: 86px; } } @media only screen and (min-width: 375px) and (max-width: 413px) { /* iphone6/7/8 和 iphone x */ html { font-size: 100px; } } @media only screen and (min-width: 414px) { /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */ html { font-size: 110px; } }body { font-size: 0.16rem; } #div1 { width: 1rem; background-color: #ccc; }this is div

vw/vh