做网络销售怎么建立网站,淘宝运营可以自学吗,泰安网络运营,电商的网站怎么做的「面试专栏」前端面试之css篇⌛序言✏️一、CSS框架先梳理#x1f58c;️二、基础样式问题1、请你讲一讲css的权重和优先级#xff08;1#xff09;权重#xff08;2#xff09;优先级2、说一下CSS的position属性3、span 标签是否可以设置宽高#xff0c; margin 和 padd… 「面试专栏」前端面试之css篇⌛序言✏️一、CSS框架先梳理️二、基础样式问题1、请你讲一讲css的权重和优先级1权重2优先级2、说一下CSS的position属性3、span 标签是否可以设置宽高 margin 和 padding 呢4、css能够实现继承的相关属性1字体系列属性2文本系列属性3元素可见性4表格布局属性5列表布局属性6生成内容属性7光标属性8页面样式属性9声音样式属性5、visibility 和 display 的差别还有opacity)6、CSS3有哪些新特性7、css3 新增伪类 - 伪元素8、display:inline-block 什么时候不会显示间隙11、rgba() 和 opacity 的透明效果有什么不同12、为什么要初始化CSS样式三、适配问题1、px、em的区别2、项目中移动端怎么用 rem 做的适配3、px、em和rem的适用背景四、动画类1、css3缩放、旋转相关的API2、如果需要手动写动画你认为最小时间间隔是多久为什么3、有没有做过动画如何实现一个元素从做向右移动每秒1px4、使用css实现一个持续的动画效果️五、浏览器相关1、Sass、LESS是什么大家为什么要使用他们1是什么2为什么要使用它们2、stylussassless区别3、重排和重绘是什么4、什么时候会导致重排问题发生5、如何减少重排对性能的影响六、性能优化相关1、link 与 import 的区别七、布局相关1、说下css的IFC2、说下css的BFC1BFC是什么2形成 BFC 的五种条件创建规则3BFC 的特性4BFC的作用3、BFC会与float元素相互覆盖吗为什么举例说明4、行内元素float:left后是否变为块级元素5、两个div上下排列都设margin有什么现象6、 清除浮动有哪些方法1后果2方法7、讲一讲flex属性8、了解box-sizing吗说下 css 的盒子模型1css盒模型2 IE 盒子模型和 W3C 盒子模型3box-sizing属性9、说下css3的flexbox10、说下 css 的水平垂直居中1水平居中方法2垂直居中方法11、用css2和css3分别写一下垂直居中和水平居中1css2方法2css3方法3代码实现Ⅰ. 已知宽高进行水平垂直居中Ⅱ. 宽高未知比如内联元素进行水平垂直居中Ⅲ. 绝对定位的div水平垂直居中Ⅳ. 图片和其他元素使用 display: table-cell; 进行垂直居中Ⅴ. 使用flex布局进行水平垂直居中12、CSS实现自适应正方形、等宽高比矩形1方法2代码实现13、如何实现两栏布局1两栏布局是什么2方法3代码实现Ⅰ. bfc和float实现两栏布局Ⅱ. flex实现两栏布局Ⅲ. position实现两栏布局14、如何实现三栏布局1三栏布局是什么2方法3代码实现Ⅰ. 圣杯布局Ⅱ. 双飞翼布局Ⅲ. flex布局Ⅳ. position布局Ⅴ. float布局八、结束语彩蛋 One More Thing资料获取更新地址番外篇⌛序言
对于前端来说 css 是初学者必学的一个知识。基本上在涉猎了 html 之后随之学习的就是 css 。同时 css 也是前端必考的一个知识点像水平垂直居中、两栏布局和三栏布局以及 bfc 等等都是面试的常考点也是必考点。因此 在下面的文章中将系统地整理周一在秋招过程中所遇到的题目。
一起来学习⑧~~⏰
✏️一、CSS框架先梳理
我们先用一张思维导图来了解关于 css 的一些常考题。详情见下图 下面开始梳理各个题目的解答~⏳
️二、基础样式问题
1、请你讲一讲css的权重和优先级
1权重
等级定义计算值0级通配选择器、选择符和逻辑组合伪类01级标签选择器12级类选择器、属性选择器和伪类103级ID选择器1004级style属性内联10005级!important10000
2优先级
权重相同写在后面的覆盖前面的“后来居上”原则
使用 !important 达到最大优先级都使用 !important 时权重大的优先级高 详细文章补充原文谁动了我的选择器深入理解CSS选择器优先级链接https://juejin.cn/post/6994580720807051301 2、说一下CSS的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 决定。 详细文章补充原文你可能对position和z-index有一些误解链接https://juejin.cn/post/6993468505773309982 3、span 标签是否可以设置宽高 margin 和 padding 呢
这道题考察的是 margin 和 padding 对行内元素的影响。
span 标签是行内元素设置不了宽高。但是 margin 和 padding 可以设置但值得注意的是设置 margin 和 padding 时只有水平方向有效果垂直方向没有效果。
在一篇文章中看到这样一段解释
While padding can be applied to all sides of an inline element,only left and right padding will have an effect on surrounding content.In the example below,50px of padding has been applied to all sides of the element.As you can see,it has an affect on the content on each side,but not on content above or below.上面这段话解释了当 padding 被应用与行内元素时只对左右的水平方向有影响而对上下的垂直方向是没有影响的。
4、css能够实现继承的相关属性
1字体系列属性
font组合字体font-family规定元素的字体系列font-weight设置字体的粗细font-size设置字体的尺寸font-style定义字体的风格font-variant设置小型大写字母的字体显示文本这意味着所有的小写字母均会被转换为大写但是所有使用小型大写字体的字母与其余文本相比其字体尺寸更小。font-stretch对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。font-size-adjust为某个元素规定一个 aspect 值这样就可以保持首选字体的 x-height。
2文本系列属性
text-indent文本缩进text-align文本水平对齐line-height行高word-spacing增加或减少单词间的空白即字间隔letter-spacing增加或减少字符间的空白字符间距text-transform控制文本大小写direction规定文本的书写方向color文本颜色
3元素可见性
visibility
4表格布局属性
caption-side、border-collapse、border-spacing、empty-cells、table-layout
5列表布局属性
list-style-type、list-style-image、list-style-position、list-style
6生成内容属性
quotes
7光标属性
cursor
8页面样式属性
page、page-break-inside、windows、orphans
9声音样式属性
speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation 详细文章戳下面链接原文CSS中可以和不可以继承的属性链接https://www.cnblogs.com/thislbq/p/5882105.html 5、visibility 和 display 的差别还有opacity)
visibility 设置 hidden 会隐藏元素但是其位置还存在与页面文档流中不会被删除所以会触发浏览器渲染引擎的重绘display 设置了 none 属性会隐藏元素且其位置也不会被保留下来所以会触发浏览器渲染引擎的回流和重绘opacity 会将元素设置为透明但是其位置也在页面文档流中不会被删除所以会触发浏览器渲染引擎的重绘同时值得注意的是 opacity 可以设置过渡效果。
6、CSS3有哪些新特性
新增各种CSS选择器 :not(.input) 表示所有 class 不是 input 的节点圆角 border-radius:8px多列布局 column阴影和反射 Shadow\Reflect文字特效 text-shadow线性渐变 gradient旋转缩放定位倾斜 transform动画 Animation多背景背景裁剪
7、css3 新增伪类 - 伪元素
第一组
p:first-of-type 选择属于其父元素的首个元素的每个元素。p:last-of-type 选择属于其父元素的最后元素的每个元素。p:only-of-type 选择属于其父元素唯一的元素的每个元素。p:only-child 选择属于其父元素的唯一子元素的每个元素。p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
第二组
:enabled 已启用的表单元素。:disabled 已禁用的表单元素。:checked 单选框或复选框被选中。::before 在元素之前添加内容。::after 在元素之后添加内容,也可以用来做清除浮动。::first-line 添加一行特殊样式到首行。::first-letter 添加一个特殊的样式到文本的首字母。
第三组
伪类语法一个 : 它是为了弥补 css 常规类选择器的不足。伪元素语法两个 : 它是凭空创建的一个虚拟容器生成的元素。
8、display:inline-block 什么时候不会显示间隙 浮动 移除空格 使用 margin 负值 使用 font-size:0 letter-spacing 字间距 word-spacing 词间距
11、rgba() 和 opacity 的透明效果有什么不同
rgba() 和 opacity 都能实现透明效果但最大的不同是 opacity 作用于元素以及元素内的所有内容的透明度而 rgba() 只作用于元素的颜色或其背景色。 设置 rgba 透明的元素的子元素不会继承透明效果
12、为什么要初始化CSS样式
因为浏览器的兼容问题不同浏览器对有些标签的默认值是不同的如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
当然初始化样式会对 SEO 有一定的影响但鱼和熊掌不可兼得但力求影响最小的情况下初始化。
最简单的初始化方法
* {padding: 0;margin: 0;}淘宝的样式初始化代码
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {margin: 0;padding: 0;}body, button, input, select, textarea {font: 12px/1.5tahoma, arial;
}h1, h2, h3, h4, h5, h6 {font-size: 100%;
}address, cite, dfn, em, var {font-style: normal;
}code, kbd, pre, samp {font-family: couriernew, courier, monospace;
}small {font-size: 12px;
}ul, ol {list-style: none;
}a {text-decoration: none;
}a:hover {text-decoration: underline;
}sup {vertical-align: text-top;
}sub {vertical-align: text-bottom;
}legend {color: #000;
}fieldset, img {border: 0;
}button, input, select, textarea {font-size: 100%;
}table {border-collapse: collapse;border-spacing: 0;
}三、适配问题
1、px、em的区别
px 和 em 都是长度单位区别是px 值固定容易计算。em 值不固定是相对单位其相对应父级元素的字体大小会调整
2、项目中移动端怎么用 rem 做的适配
rem 作用于根元素也就是作用于 html 元素。在实际的项目中通常会在初始化样式中这样设置
html{font-size: 625%; /* 即 16px * 625% 100px */
}
body{font-size: 0.16rem; /* 即 0.16rem * 100 16px */
}3、px、em和rem的适用背景
px 绝对长度单位最常用em相对长度单位不常用rem相对长度单位常用于响应式布局。
四、动画类
1、css3缩放、旋转相关的API
要弄懂 css 动画相关的 API 特别是 animation 、 transition 、 transform 、 translate 这几个属性要历届清楚他们之间的区别。具体如下
animation 用于设置动画属性他是一个简写的属性包含6个属性transition 用于设置元素的样式过度和 animation 有着类似的效果但细节上有很大的不同transform 用于元素进行旋转、缩放、移动或倾斜和设置样式的动画并没有什么关系translate translate 只是 transform 的一个属性值即移动除此之外还有 scale 等。
2、如果需要手动写动画你认为最小时间间隔是多久为什么
多数显示器默认频率是 60Hz 即 1 秒刷新 60 次所以理论上最小间隔为 1×1000ms6016.7ms\frac{1×1000ms}{60}16.7ms601×1000ms16.7ms
3、有没有做过动画如何实现一个元素从做向右移动每秒1px
translate transition transformrequestAnimationFrameanimation动画
4、使用css实现一个持续的动画效果
animation:mymove 5s infinite;keyframes mymove {from {top: 0px;}to {top: 200px;}
}️五、浏览器相关
1、Sass、LESS是什么大家为什么要使用他们
1是什么
他们是 CSS 预处理器也是动态样式语言是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS 。
例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性如变量继承运算 函数 . LESS 既可以在客户端上运行 (支持 IE 6 , Webkit , Firefox )也可以在服务端运行 (借助 Node.js )。
2为什么要使用它们
结构清晰便于扩展。可以方便地屏蔽浏览器私有语法差异。这个不用多说封装对浏览器语法差异的重复处理减少无意义的机械劳动。可以轻松实现多重继承。完全兼容 CSS 代码可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展所以老的 CSS 代码也可以与 LESS 代码一同编译。
2、stylussassless区别
均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性。Sass 和 LESS 语法较为严谨 LESS 要求一定要使用大括号 {} Sass 和 Stylus 可以通过缩进表示层次与嵌套关系。Sass 无全局变量的概念 LESS 和 Stylus 有类似于其它语言的作用域概念。Sass 是基于 Ruby 语言的而 LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进行编译这也是为什么安装 Sass 的时候有时候会报错需要安装 python 脚本。
3、重排和重绘是什么
重绘不一定需要重排重排必然会导致重绘。
重排当渲染树的一部分必须更新并且节点的尺寸发生了变化浏览器会使渲染树中受到影响的部分失效并重新构造渲染树。
通俗来说即当DOM的变化引发了元素几何属性的变化比如改变元素的宽高元素的位置导致浏览器不得不重新计算元素的几何属性并重新构建渲染树这个过程称为“重排”。
重绘是在一个元素的外观被改变所触发的浏览器行为浏览器会根据元素的新属性重新绘制使元素呈现新的外观。
通俗来说即完成重排后要将重新构建的渲染树渲染到屏幕上这个过程就是“重绘”。
DOM树表示页面的结构
渲染树表示页面的节点如何显示。
一旦渲染树构建完成就要开始绘制paint页面元素了。
4、什么时候会导致重排问题发生
添加、删除、更新 DOM 节点。通过 display: none 隐藏一个 DOM 节点 —— 触发重排和重绘。通过 visibility: hidden 隐藏一个 DOM 节点 —— 只触发重绘因为没有几何变化。移动或者给页面中的 DOM 节点添加动画。添加一个样式表调整样式属性。用户行为例如调整窗口大小改变字号或者滚动。
常见的重排元素widthheightpaddingmargindisplayborder-widthbordertoppositionfont-sizefloattext-alignoverflow-yfont-weightoverflowleftfont-familyline-heightvertical-alignrightclearwhite-spacebottommin-height
5、如何减少重排对性能的影响 尽可能限制重排的影响范围尽可能在低层级的DOM节点上如下述例子中如果你要改变p的样式class就不要加在div上通过父元素去影响子元素不好。 body div classhello h4hello/h4 pstrongName:/strongBDing/p h5male/h5 ollicoding/li liloving/li /ol /div
/body当 p 节点上发生 reflow 重排时 hello 和 body 也会重新渲染甚至h5和ol都会收到影响。 避免设置大量的 style 属性因为通过设置 style 属性改变结点样式的话每一次设置都会触发一次 reflow 所以最好是使用 class 属性。 实现元素的动画它的position属性最好是设为 absoulte 或 fixed 这样不会影响其他元素的布局动画实现的速度的选择。比如实现一个动画以 1 个像素为单位移动这样最平滑但是reflow就会过于频繁大量消耗 CPU 资源如果以 3 个像素为单位移动则会好很多。 不要使用 table 布局因为 table 中某个元素旦触发了reflow 那么整个 table 的元素都会触发 reflow 。那么在不得已使用 table 的场合可以设置 table-layout:auto 或者是 table-layout:fixed 这样可以让 table 一行一行的渲染这种做法也是为了限制reflow的影响范围。 如果 CSS 里面有计算表达式每次都会重新计算一遍出发一次 reflow 。
六、性能优化相关
1、link 与 import 的区别
link 是 HTML 方式 import 是 CSS 方式。
link 最大限度支持并行下载 import 过多嵌套导致串行下载出现 FOUC (文档样式短暂失效) 。
link 可以通过 relalternate stylesheet 指定候选样式。
浏览器对 link 支持早于 import 可以使用 import 对老浏览器隐藏样式。
import 必须在样式规则之前可以在其引入的 css 文件中再引用其他文件。
总体来说 link 优于 import link 优先级也更高。
七、布局相关
1、说下css的IFC
IFC 是行内格式上下文有以下特点
内部的 Box 会水平放置水平的间距由 marginpaddingborder 决定。
2、说下css的BFC
1BFC是什么
BFC (Block Formatting Context) 是块级格式上下文是 Web 页面中盒模型布局的 CSS 渲染模式指一个独立的渲染区域或者说是一个隔离的独立容器。
2形成 BFC 的五种条件创建规则
根元素 html 就是一个 bfc 浮动元素 float 不取值为 none 绝对定位元素 position 取值为 absolute 或 fixed display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之一的元素overflow 不取值为 visible 的元素 hidden auto scroll
3BFC 的特性
内部的 Box 会在垂直方向上一个接一个的放置。垂直方向上的距离由 margin 决定bfc 的区域不会与 float 的元素区域重叠。计算 bfc 的高度时浮动元素也参与计算bfc 就是页面上的一个独立容器容器里面的子元素不会影响外面元素。
4BFC的作用
可以包含浮动元素不被浮动元素覆盖阻止父子元素的 margin 折叠
3、BFC会与float元素相互覆盖吗为什么举例说明
不会因为 BFC 是页面中一个独立的隔离容器其内部的元素不会与外部的元素相互影响比如两个 div 上面的 div 设置了 float 那么如果下面的元素不是 BFC 也没有设置 float会形成对上面的元素进行包裹内容的情况如果设置了下面元素为 overflowhidden 属性那么就能够实现经典的两列布局左边内容固定宽度右边因为是 BFC 所以会进行自适应。
4、行内元素float:left后是否变为块级元素
行内元素设置成浮动之后变得更加像是 inline-block 行内块级元素设置 成这个属性的元素会同时拥有行内和块级的特性最明显的不同是它的默认宽度不是 100% 这时候给行内元素设置 padding-top 和 padding-bottom 或者 width 、 height 都是有效果的
5、两个div上下排列都设margin有什么现象
都正取大一正一负相加
问为什么会有这种现象你能解释一下吗
是由块级格式上下文决定的 BFC 元素在 BFC 中会进行上下排列然后垂直距离由 margin 决定并且会发生重叠具体表现为同正取最大的同负取绝对值最大的一正一负相加BFC 是页面中一个独立的隔离容器内部的子元素不会影响到外部的元素。
6、 清除浮动有哪些方法
1后果
不清除浮动会发生高度塌陷浮动元素父元素高度自适应父元素不写高度时子元素写了浮动后父元素会发生高度塌陷
2方法
clear 清除浮动添加空 div 法在浮动元素下方添加空 div ,并给该元素写 css 样式{clear:both;height:0;overflow:hidden;}给浮动元素父级设置高度父级同时浮动需要给父级同级元素添加浮动父级设置成 inline-block 其 margin: 0 auto 居中方式失效给父级添加 overflow:hidden 清除浮动方法万能清除法 after 伪类清浮动现在主流方法推荐使用代码如下
.float_div:after {content: .;clear: both;display: block;height: 0;overflow: hidden;visibility: hidden;
}.float_div {zoom: 1
}7、讲一讲flex属性
了解 flex 布局吗讲讲 flex 的 css 属性及其含义 flex:1 代表什么 flex-basis 什么含义
弹性盒布局CSS3 的新属性用于方便布局比如垂直居中flex 属性是 flex-grow 、 flex-shrink 和 flex-basis 的简写
8、了解box-sizing吗说下 css 的盒子模型
1css盒模型
CSS盒模型本质上是一个盒子封装周围的HTML元素它包括 外边距margin 、 边框 border 、 内边距padding 、 实际内容content 四个属性。 CSS盒模型标准模型 IE模型
标准盒子模型宽度内容的宽度content border padding
低版本IE盒子模型宽度内容宽度contentborderpadding如何设置成 IE 盒子模型
box-sizing: border-box;2 IE 盒子模型和 W3C 盒子模型
W3C盒模型 内容(content)、填充( padding )、边界( margin )、 边框( border ) box-sizing: content-boxwidth content width; IE盒子模型 IE 的content 部分把 border 和 padding 计算了进去 box-sizing: border-boxwidth border padding content width
3box-sizing属性
box-sizing 属性可以被用来调整这些表现
content-box 是默认值。如果你设置一个元素的宽为100px那么这个元素的内容区会有100px宽并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box 告诉浏览器你想要设置的边框和内边距的值是包含在 width 内的。也就是说如果你将一个元素的 width 设为 100px 那么这 100px 会包含它的 border和 padding 内容区的实际宽度是 width减去(border padding)的值 。大多数情况下这使得我们更容易地设定一个元素的宽高。
9、说下css3的flexbox
css3 的 flexbox 即弹性盒布局模型。它是一个用于页面布局的全新 CSS3 功能 Flexbox 可以把列表放在同一个方向从上到下排列从左到右并让列表能延伸到占用可用的空间。较为复杂的布局还可以通过嵌套一个伸缩容器 flex container 来实现。采用 Flex 布局的元素称为 Flex 容器 flex container 简称容器。它的所有子元素自动成为容器成员称为 Flex 项目 flex item 简称项目。常规布局是基于块和内联流方向而 Flex 布局是基于 flex-flow 流可以很方便的用来做局中能对不同屏幕大小自适应。在布局上有了比以前更加灵活的空间。
10、说下 css 的水平垂直居中
1水平居中方法
元素为行内元素设置父元素 text-align:center如果元素宽度固定可以设置左右 margin 为 auto ;如果元素为绝对定位设置父元素 position 为 relative 元素设 left:0;right:0;margin:auto ;使用 flex-box 布局指定 justify-content 属性为 centerdisplay 设置为 tabel-ceil
2垂直居中方法
将显示方式设置为表格 display:table-cell 同时设置 vertial-align:middle使用 flex 布局设置为 align-itemcenter绝对定位中设置 bottom:0,top:0并设置 margin:auto绝对定位中固定高度时设置 top:50%margin-top 值为高度一半的负值文本垂直居中设置 line-height 为 height 值
11、用css2和css3分别写一下垂直居中和水平居中
1css2方法
水平居中
div margin: autospan text-align。
垂直居中
使用 position 然后 left/top 和 margin 的方式垂直居中已知宽高和未知宽高使用 position margin使用 display: table-cell。
2css3方法
水平居中
flex布局
垂直居中
flex布局
3代码实现
Ⅰ. 已知宽高进行水平垂直居中
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title已知宽高进行水平垂直居中/titlestyle.outer {position: relative;width: 400px;height: 600px;background: yellow;}.inner {position: absolute;width: 200px;height: 300px;background: gray;left: 50%;top: 50%;margin: -150px 0 0 -100px;}/style
/headbodydiv classouterdiv classinner/div/div
/body/htmlⅡ. 宽高未知比如内联元素进行水平垂直居中
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title宽高未知比如内联元素进行水平垂直居中/titlestyle.outer {position: relative;width: 400px;height: 600px;background: yellow;}.inner {position: absolute;background: gray;left: 50%;top: 50%;/* translate指往x轴平移和往y平移x轴正数表示往右平移负数表示往左平移y轴正数表示往下平移负数表示往上平移 */transform: translate(-50%, -50%);}/style/headbodydiv classouterspan classinner我想居中显示/span/div/body
/html
Ⅲ. 绝对定位的div水平垂直居中
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title使用绝对定位的div进行水平垂直居中/titlestyle.outer {width: 400px;height: 600px;background-color: yellow;position: relative;}.inner {position: absolute;background: gray;left: 0;right: 0;bottom: 0;top: 0;width: 200px;height: 300px;margin: auto;}/style
/headbodydiv classouterdiv classinner我想居中显示/div/div
/body
/htmlⅣ. 图片和其他元素使用 display: table-cell; 进行垂直居中
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title使用tabel-cell进行水平垂直居中/titlestyle.outer {width: 400px;height: 600px;background-color: yellow;/* 让其变为单元格元素 */display: table-cell;/* 文本的垂直居中方式 */vertical-align: middle;}.inner {background: gray;width: 200px;height: 300px;/* 当对行内元素设置margin和padding时只有水平方向有效果垂直方向没有效果 *//* 水平居中方式 */margin: 0 auto;}/style
/headbodydiv classouterdiv classinner我想居中显示/div/div
/body/htmlⅤ. 使用flex布局进行水平垂直居中
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlecss3实现垂直和水平居中/title
/head
style.outer {width: 400px;height: 400px;display: flex;justify-content: center;align-items: center;background-color: yellow;}.inner {width: 200px;height: 200px;display: flex;justify-content: center;align-items: center;background-color: gray;}
/stylebodydiv classouterdiv classinner居中显示/div/div
/body/html12、CSS实现自适应正方形、等宽高比矩形
1方法
padding撑高伪元素设置 margin-top:100% 撑高
2代码实现
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS实现自适应正方形、等宽高比矩形/title
/head
style/* 第一种方法padding撑高画正方形 */.outer1 {width: 400px;height: 600px;background-color: beige;}.inner1 {width: 100%;padding-bottom: 100%;background-color: green;}/* 第二种方法伪元素设置margin-top */.inner2 {width: 100px;overflow: hidden;background-color: cadetblue;}.inner2::after {content: ;margin-top: 100%;/* 块状让其可以设置宽高才能正常显示 */display: block;}
/stylebody!-- 第一种方法padding撑高画正方形 --div classouter1div classinner1/div/div!-- 第二种方法伪元素设置margin-top --div classinner2/div
/body/html13、如何实现两栏布局
1两栏布局是什么
所谓两栏布局就是左边定宽右边自适应。
2方法
bfc 和 floatflexposition
3代码实现
Ⅰ. bfc和float实现两栏布局
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlebfc和float实现两栏布局/title
/head
stylediv {height: 500px;}.aside {width: 200px;float: left;background-color: yellow;}.main {/* overflow:hidden 触发一个bfc */overflow: hidden;background-color: gray;}
/stylebodydiv classaside/divdiv classmain/div
/body/htmlⅡ. flex实现两栏布局
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleflex实现两栏布局/title
/head
stylediv {height: 100%;}.container {display: flex;}.left {flex: 0 0 200px;/* flex-grow/flex-shrink/flex-basis */background-color: yellow;}.right {/* 当container_width sum(flex_basis)时flex-shrink值不会生效各item根据flex-grow按比例分配剩余的空间当container_width sum(flex_basis)时flex-grow值不会生效各item以flex-basis为基础值根据flex-shrink按比例缩小*/flex: 1 1;background-color: grey;}
/stylebodydiv classcontainerdiv classleftleft/divdiv classrightright/div/div
/body/htmlⅢ. position实现两栏布局
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleposition实现两栏布局/title
/head
style.container {display: flex;position: relative;}.left {position: absolute;width: 300px;background-color: yellow;}.right {width: 100%;margin-left: 300px;background-color: gray;}
/stylebodydiv classcontainerdiv classlefthello/divdiv classrighthi/div/div
/body/html14、如何实现三栏布局
1三栏布局是什么
所谓三栏布局就是左右定宽右边自适应。
2方法
圣杯布局双飞翼布局flex 布局position 布局float 布局
3代码实现
Ⅰ. 圣杯布局
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title实现三栏布局之圣杯布局/title
/headstyle.container {padding: 0 300px 0 200px;}.center {float: left;background-color: yellow;width: 100%;}.left {float: left;width: 200px;background-color: green;margin-left: -100%;position: relative;left: -200px;}.right {float: left;width: 300px;margin-left: -300px;background-color: grey;position: relative;right: -300px;}
/stylebodydiv classcontainerdiv classcenter中间区域/divdiv classleft左侧区域/divdiv classright右侧区域/div/div
/body/htmlⅡ. 双飞翼布局
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title实现两栏布局/title
/head
style.container {width: 100%;float: left;background-color: green;}.center {margin-left: 200px;margin-right: 300px;}.left {width: 200px;float: left;background-color: yellow;margin-left: -100%;}.right {width: 300px;float: left;background-color: grey;margin-left: -300px;}
/stylebody!-- 与圣杯模式相似只是中间盒子增加一个内容盒子用内容盒子设置左右margin留给左右盒子避免内容被遮挡。(不需要定位了)1中间盒子宽度width:100%;独占一行2三个盒子设置float left;3使用margin-left属性将左右两边的盒子拉回与中间盒子同一行.left{ margin-left: -100%};向左走一个父盒子的宽度.right{ margin-left: 负的自身宽度}4: 中间主盒子里面的内容盒子设置左右margin避免被遮挡内容 --div classcontainerdiv classcentercenter/div/divdiv classleftleft/divdiv classrightright/div
/body/htmlⅢ. flex布局
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleflex实现三栏布局/title
/head
style.container {display: flex;}.center {flex: 1 1;/* order 用于设置弹性盒对象元素的顺序 */order: 2;background-color: yellow;}.left {flex: 0 0 200px;order: 1;background-color: green;}.right {flex: 0 0 300px;order: 3;background-color: gray;}
/stylebodydiv classcontainerdiv classcentercenter/divdiv classleftleft/divdiv classrightright/div/div
/body/htmlⅣ. position布局
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleposition实现两栏布局/title
/head
stylediv {height: 500px;}.container {position: relative;}.left {width: 200px;background-color: green;position: absolute;left: 0;top: 0;}.right {width: 200px;background-color: yellow;position: absolute;right: 0;top: 0;}.middle {background-color: grey;margin-left: 200px;margin-right: 200px;}
/stylebodydiv classcontainerdiv classleftleft/divdiv classmiddlemiddle/divdiv classrightright/div/div
/body/htmlⅤ. float布局
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlefloat实现三栏布局/title
/head
stylediv {height: 500px;}.left {float: left;width: 200px;background-color: green;}.right {float: right;width: 200px;background-color: yellow;}.middle {background-color: grey;/* 触发一个bfc */overflow: hidden;}
/stylebodydiv classcontainerdiv classleftleft/divdiv classrightright/divdiv classmiddlemiddle/div/div
/body
/html八、结束语
对于 css 的面试来说 position 、 css 选择器优先级以及手写各种布局是久经不衰的话题。所以在复习的过程中要理解清楚各个知识点所涉及到的内容这样在面试中就不难被面试官问倒啦
到这里关于 css 的常考面试题讲解就结束啦希望对大家有帮助~
如文章有误或有想补充的新内容欢迎加我微信指出呀 vx: MondayLaboratory ~
往后专栏内容如有新补充也将放在下面的更新地址大家可以戳下方链接直达
彩蛋 One More Thing
资料获取 微信关注公众号 星期一研究室 回复关键字 css面试pdf 即可获取相关资料~ 回复 面试大全pdf 可获取全系列资料
更新地址 offer来了面试专栏
番外篇
如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~以上就是本文的全部内容我们下期见
