- 对于面试题,第一时间想到其本质 --> 考点是什么
- 如何看待做不完的题海 -> 不变应万变(题可变,考点不变)
- 如何对待接下来的题目 -> 题目到知识点,再回到题目
CSS面试题相关
盒模型
标准盒模型(W3C)
- width = content ;
- box-sizing : content-box
IE盒模型
- width = content + padding + border
- Box-sizing: border-box
BFC的理解和应用
BFC, Block format context, 块级格式化上下文 一块独立的渲染区域,内部元素不会影响外部元素 形成BFC的常见条件
- float 不是none
- position不是absolute 或 fixed
- overflow不是visible
- display 是 flex inline-block
应用:
- 清浮动
position有哪些定位,absolute和relative分别依据什么定位
- static
- relative
- absolute
- fixed
- sticky 粘性定位
relative依据自身定位, absolute依据最近一层的定位元素定位
水平垂直居中的实现方式
- flex
- absolute + 负margin
- absolute + transform
- absolute + margin:auto + left/right/top/bottom:0
- absolute + calc()
- grid布局
line-height的继承问题
- 如果是纯数字值,则直接继承该值。
- 如果是百分比,会算完父级元素后,再继承
rem是什么,如何实现响应式
- px是绝对长度单位,
- em相对长度单位,相对于父元素
- rem,相对长度单位,相对于根元素,常用于响应式
- rem的弊端
CSS权重计算规则
- !important 10000
- 行内(内联)样式 如: style="" 1000
- ID选择器 #id 100
- Class、伪类、属性选择器 :hover [type="text"] 10
- 标签选择器、伪元素选择器 p、div :before; 0001
- 通用选择器*; 子选择器 > ; 相邻选择器 + ; 同胞选择器 ~ ;继承选择器 0000
- 计算优先级的前提是选择器作用于相同的元素
- 继承来的样式权重优先级最低,可视为0
html
<style type="text/css">
#a {font-size:12px} //100
div p{ font-size:13px } // 2
div .c{ font-size:14px } //12
.a .b .c{ font-size:15px } //30
#b{ font-size:16px } // 100
</style>
<body>
<div id="a" class="a">
<div id="b" class="b">
<p id="c" class="c">I’am here</p> // 15px
</div>
</div>
</body>
// 从上到下权重 100 2 12 30 100;
// 实际命中 #c .c 的 只有 div .c 和 .a .b .c ;
// 所以命中15px;
什么是BFC? 触发BFC的条件?
定义
BFC (Block Formatting Context,块级格式化上下文) 决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。简言之,就是一个特殊的块,内部的元素和外部的元素不会相互影响。BFC内的盒子会在垂直方向上一个接一个地放置,垂直方向上也会发生外边距重叠。
触发条件
- float属性 (不为none时)
- overflow属性(不为visible时) hidden;
- position属性(为absolute 或 fixed)
- display属性 (为inline-block,flex, table-cell,table-caption,,inline-flex)
overflow:hidden`、`float:left/right`、`position:absolute` display: flex;
应用场景
- 防止外边距重叠
- 可以包含浮动元素( 创建父级BFC) - 清除内部浮动
- 清除浮动的原理是两个div都位于同一个BFC区域中
- 计算 BFC 的高度时,浮动子元素也参与计算
- 自适应布局(BFC不与float box重叠)
外边距重叠(collapsing margins)/ margin坍塌问题
- 相邻的两个或多个
普通流中的块元素
,如果它们设置了外边距,那么在垂直方向上,外边距会发生重叠
,以绝对值大的那个为最终结果显示在页面上,即最终的外边距等于发生层叠的外边距中绝对值较大者
。 - 防止外边距重叠:创建BFC
- 行内元素、浮动元素、绝对定位元素之间的外边距都不会叠加
flex常用属性; flex: 0 1 auto;
容器属性 6个
- flex-direction
- 决定主轴方向
- row | row-reverse | column | column-reverse;
- flex-wrap
- 决定项目(item)如果一条轴线排不下,如何换行
- nowrap | wrap | wrap-reverse;
- flex-flow
- flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
- flex-flow:
- justify-content
- 定义了项目在主轴上的对齐方式
- flex-start | flex-end | center | space-between | space-around
- align-items
- 定义项目在交叉轴上如何对齐
- flex-start | flex-end | center | baseline | stretch(撑满)
- align-content
- 定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用
- flex-start | flex-end | center | space-between | space-around | stretch
项目属性 6个
- order
- 定义项目的排列顺序。数值越小,排列越靠前,默认为0
- order:
- flex-grow
- 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
- flex-grow: ; /_ default 0 _/
- flex-shrink
- 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
- flex-shrink: ; /_ default 1 _/
- flex-basis
- 在分配多余空间之前,项目占据的主轴空间(main size),默认值为auto
- flex-basis: | auto; /_ default auto _/
- 可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间
- flex
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写, 默认 0 1 auto; 后两个属性可选;
- flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
- align-self
- 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
- align-self: auto | flex-start | flex-end | center | baseline | stretch;
水平垂直居中的方式?
html
<div class="outer">
<div class="inner"></div>
</div>
1. flex
css
.outer{
display: flex;
justify-content: center;
align-items: center
}
2. position+transform, inner高宽未知
css
.outer{
position:relative;
}
.inner{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
3. position + 负margin, inner宽高已知
css
.outer{
position: relative;
}
.inner{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
4.设置各个方向的距离都是0,再将margin设为auto
前提:inner高宽已知
css
.outer {
position: relative;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
清除浮动的方式?
清除浮动主要是为了防止父元素塌陷
方法一:clearfix伪类
html
<div class="outer clearfix">
<div class="inner">inner</div>
</div>
<style>
.outer{
background: blue;
}
.inner{
width: 100px;
height: 100px;
background: red;
float: left;
}
.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
</style>
解析原理:
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;
方法二:额外加一个div, clear:both
html
<div class="container">
<div class="inner"></div>
<div class="clear"></div>
</div>
.container{
background: blue;
}
.inner {
width: 100px;
height: 100px;
background: red;
float: left;
}
.clear{
clear:both;
}
方法三 : 触发父盒子BFC, overflow:hidden;
html
<div class="outer">
<div class="inner">inner</div>
</div>
.outer{
background: blue;
overflow: hidden;
}
.inner {
width: 100px;
height: 100px;
background: red;
float: left;
}
如何用css实现一个三角形
1. 利用border属性
css
.triangle{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid red;
}
2. 利用CSS3的clip-path属性
css
.triangle {
width: 30px;
height: 30px;
background: red;
// 将坐标(0,0),(0,30),(30,0)连成一个三角形
clip-path: polygon(0px 0px, 0px 30px, 30px 0px);
transform: rotate(225deg); // 旋转225,变成下三角
}
伪类和伪元素的区别
- 伪类 :表示被选择元素的某种状态,例如
:hover
- 伪元素:类似于增添一个新的DOM节点到DOM树中,而不是改变元素的状态。(但又不是真的增加一个节点,这也是被称为伪元素的原因)
关键区别
伪类是操作文档中已有的元素,而伪元素是创建了一个文档外的元素。
伪元素
伪类
link 与 @import 的区别
- 从属关系区别
@import
是 CSS 提供的语法规则,只有导入样式表的作用;link 是 HTML 提供的标签
,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等
- 加载顺序区别
加载页面时,link 标签引入的 CSS 被同时加载;@import 引入的 CSS 将在页面加载完毕后被加载。