😂这只是个人笔记……我没想到居然有人看到……
题目来源: 前端开发面试题
答案基本是自己整理的。并不是全部题目都有。
会有很多自己的啰嗦,还有很多乱七八糟的补充,请见谅。
介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
盒子模型有两种:IE 盒子模型(IE5.5及以下),W3C标准盒子模型。
-
盒子模型(box model):
内容(content)、填充(padding)、边框(border)、边界(margin) 。
-
不同:
W3C标准盒子模型的width和height,是content的宽高;
IE盒模型的width和height,是content、padding、border三部分合起来的宽高。
-
附加:
outline(轮廓)绘制在元素框之上,其不占据空间(不影响元素大小和定位)【所以如果轮廓线很粗,会遮住其他内容demo,不是很懂轮廓的覆盖顺序,它居然可以盖住下一个元素的内容?轮廓本身是另一次元的吗?会覆盖内容,但后一个轮廓会覆盖前一个轮廓】。
兼容性:IE8以上。
其他参考:关于外边距的一些实践上的细节, 解决盒模型的兼容性问题
如何居中div?
水平居中
-
已知宽度, block元素:
添加
margin:0 auto
属性。div{ width:200px; margin:0 auto; }
-
已知宽度, 绝对定位的div居中:
div { position: absolute; width: 300px; height: 300px; margin: auto; /* 这一步很关键 */ top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /* 方便看效果 */ }
-
未知宽度,fit-content:
兼容性很差。
div { width: fit-content; margin: auto; background-color: pink; /* 方便看效果 */ }
-
未知宽度,inline-block:
.parent { text-align: center; } div { display: inline-block; background-color: pink; /* 方便看效果 */ }
-
未知宽度/已知宽度,relative:
- 优点:兼容性强,扩展性强;
- 缺点:实现原理较复杂。
需要两个div,外层left 50%,内层left -50%。
用
float
或inline-block
,使容器大小为内容大小,而非默认的100%。.outter { display: inline-block; /* or float: left; */ position: relative; left: 50%; } .inner { position: relative; left: -50%; }
- left的值为百分比时,为父容器的宽度的百分比(MDN)。
水平垂直居中
-
确定容器宽高:
相对或绝对定位, 设置外边距margin。
div { position: relative / fixed; /* 相对定位或绝对定位均可 */ width:500px; height:300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */ background-color: pink; /* 方便看效果 */ }
-
不确定容器宽高:
绝对定位,利用
transform
属性。div { position: absolute/fixed; /* relative会让width变成100%, 所以不行 */ top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; /* 方便看效果 */ }
-
flex 布局:
宽高可以确定,也可以不确定。
实际使用时应考虑兼容性。
.container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ } .container div { width: 100px; /* 可省 */ height: 100px; /* 可省 */ background-color: pink; /* 方便看效果 */ }
-
inline-block:
宽高可以确定,也可以不确定。
水平居中:text-align。
垂直居中:父元素line-height与height同值,子元素 vertical-align。
缺点:内层高度超出外层,无法垂直居中,会和父层同顶部(参见demo)。
.container { height: 200px; /* 垂直居中 */ line-height: 200px; /* 垂直居中 */ text-align: center; /* 水平居中 */ } .container div { display: inline-block; /* 核心:宽度自适应,高度可居中 */ line-height: 20px; /* 会自动继承,必须设置不同的值来覆盖 */ vertical-align: middle; /* 垂直居中 */ }
CSS选择符有哪些?
- id选择器( #myid)
- 类选择器(.myclassname)
- 标签选择器(div, h1, p)
- 紧邻同胞选择器
h1 + p
(选的是h1后紧跟的那个p) - 一般同胞选择器
h1 ~ p
(选择所有跟在h1后的p)[css3] - 子选择器(ul > li)
- 后代选择器(li a)
- 通配符选择器( * )
- 属性选择器(a[rel = "external"])
- 伪类选择器(a:hover, li:nth-child)
- 伪元素 & 伪类:
- 所有伪元素:
::after ::before ::first-letter ::first-line ::selection
- 伪类:
:active, :hover, :visited :any :any-link :checked :default :defined :dir() :disabled :empty :enabled :first :first-child :first-of-type :fullscreen :focus :focus-visible :host :host() :host-context() :indeterminate :in-range :invalid :lang() :last-child :last-of-type :left :link :not() :nth-child() :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :read-only :read-write :required :right :root :scope :target :valid
- 所有伪元素:
通配符选择器有一个非常有意思的用法,即用它构成非子选择符,比如:
section * a {font-size:1.3em;}
任何是 section 孙子元素,而非子元素的 a 标签都会被选中。至于 a 的父元素是什么,没有关系。
哪些属性可以继承?
-
所有元素可继承
visibility cursor
-
内联元素可继承:
letter-spacing word-spacing white-space line-height color font font-family font-size font-style font-variant font-weight text-decoration text-transform direction
font-variant:把段落设置为小型大写字母字体。
text-transform: 控制文本中的字母的大小写。
-
块状元素可继承:
//文本块中首行文本的缩进 text-indent text-align
-
列表元素可继承:
list-style list-style-type list-style-position list-style-image
-
表格元素可继承:
/* 1. separate 默认值。边框会被分开。 不会忽略 border-spacing 和 empty-cells 属性。 2. collapse 如果可能,边框会合并为一个单一的边框。 会忽略 border-spacing 和 empty-cells 属性。 3. inherit 规定应该从父元素继承 border-collapse 属性的值。 */ border-collapse
-
不可继承的样式:
display position left right top bottom z-index height min-height max-height width min-width max-width padding border margin background overflow float clear vertical-align /*下面几个都没见过*/ table-layout /*表格宽度是否自适应。值:automatic,fixed,inherit*/ page-break-after page-break-before /*打印时强制分页*/ unicode-bidi /*与direction合用,控制文字方向*/
CSS优先级算法如何计算?
- 优先级就近原则,同权重情况下样式定义最近者为准;
- 载入样式以最后载入的定位为准。
优先级为:
// 同权重下,权限由高到低:
1.元素标签里(行内样式/内联样式)
2.写在<style>标签里(嵌入样式)
3.写在单独的 CSS 样式表中(链接样式)
4.在样式表中链接其他样式表:@import url(css/styles2.css)
// 不同权重计算
!important > id > class > tag
// !important优先于一切
!important 比 内联优先级高
权重计算方法:
// 选择器的特殊性值表述为4个部分,用0,0,0,0表示。
行间样式的特殊性是1,0,0,0
ID选择器的特殊性值,加0,1,0,0。
类选择器、属性选择器或伪类,加0,0,1,0。
元素和伪元素,加0,0,0,1。
通配选择器 * 对特殊性没有贡献,即0,0,0,0。
!important,它没有特殊性值,但它的优先级是最高的。
为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。
more: 详细的优先级计算方法
CSS3新增伪类有哪些?
参考:MDN - CSS新特性
伪类 | 说明 |
---|---|
:last-child |
父元素的最后一个子元素。 |
:nth-child(an+b) |
找到所有当前元素的子元素; 按照位置先后顺序从1开始排序,选择的结果为第 an+b 个元素的集合(n = 0, 1, 2, ...)。 |
:nth-last-child(an+b) |
与:nth-child(an+b) 类似,只是它从结尾处逆序计数,而不是从开头处。↪ MDN |
:only-child |
属于某个父元素的唯一一个子元素,即选择没有同胞的所有元素。 |
:first-of-type |
父元素下,每个元素类型中,最靠前的那个。 |
:last-of-type |
父元素下,每个元素类型中,最靠后的那个。 |
:nth-of-type(an+b) |
父元素下,每个元素类型中,第n个。 找到当前元素下,同元素类型的所有子元素的集合, 对每个集合按照位置先后顺序排序, 选择的结果为第 an+b 个元素的集合。 |
:nth-last-of-type(an+b) |
基本上和 :nth-of-type 一样,只是它从结尾处逆序计数,而不是从开头处。 |
:only-of-type |
选择不同于其他同胞元素的tag类型的元素,就是说,这个元素类型的元素在其父元素下,同一级只有这一个。(类比家庭中的男孩和女孩) |
:enabled |
每个启用的的元素(主要用于表单元素)。 |
:disabled |
禁用的元素(主要用于控制表单控件的禁用状态)。 |
:checked |
单选框或复选框被选中。 |
:indeterminate |
表示不确定状态。 1. <input type="checkbox"> 元素,其 indeterminate 属性被 JavaScript设置为 true; 2. <input type="radio"> 元素, 表单中拥有相同 name值的所有单选按钮都未被选中时; 3.处于不确定状态的 <progress> 元素 |
:target |
<a> 跳转# 锚点,可设置锚点目标的样式。MDN |
:root |
匹配文档树的根元素。 对于 HTML 来说, :root 表示 <html> 元素,除了优先级更高之外,与 html 选择器相同。 |
:empty |
没有子元素的元素。 子元素只可以是元素节点或文本(包括空格)。MDN 注释不算在内,但注释周围有空格就算。 |
:not(X) |
匹配不符合参数选择器X 描述的元素。X 不能包含另外一个否定选择器。:not 伪类的优先级即为它参数选择器的优先级。:not 伪类不像其它伪类,它不会增加选择器的优先级。:not(p) 将匹配任何非p元素,包括html 和body 。(所以用的时候千万小心,如果设置了什么color,可能会出现非自己预料的情况,比如全成一样的颜色。↪ bug demo) |
display有哪些值?说明他们的作用。
display | 说明 |
---|---|
css1 | |
none | 元素不显示,并从文档流中移除。 |
inherit | 从父元素继承 display 属性的值。 |
block | 块类型。默认宽度为父元素宽度,可设置宽高,换行显示。 |
inline | 行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。 |
list-item | 像块类型元素一样显示,并添加样式列表标记。 |
css2 | |
inline-block | 默认宽度为内容宽度,可以设置宽高,同行显示。 |
table | 作为块级表格来显示。 |
flex | 弹性元素如何伸长或缩短以适应flex容器中的可用空间。 |
grid | 网格布局 |
position的值relative和absolute定位原点是?
position | 说明 |
---|---|
static | 默认值。 没有定位,元素出现在正常的流中 (忽略 top, bottom, left, right, z-index 声明)。 |
inherit | 从父元素继承 position 属性的值。 |
absolute | 绝对定位。 不为元素预留空间, 相对于最近的非 static 定位的祖先元素进行定位。 |
fixed (老IE不支持) | 绝对定位。 不为元素预留空间, 相对于浏览器窗口进行定位。 元素的位置在屏幕滚动时不会改变。 |
relative | 相对定位。 相对于其正常位置进行定位。 该关键字下,元素先放置在未添加定位时的位置, 再在不改变页面布局的前提下调整元素位置 (因此会在此元素未添加定位时所在位置留下空白)。 |
相对定位的元素并未脱离文档流,而绝对定位的元素则脱离了文档流。
CSS3有哪些新特性?
-
圆角 (border-radius:8px)
-
新增各种CSS选择器、伪类 (经常用到 :nth-child)
-
文字渲染 (Text-decoration)
转化为简写属性,可设置
text-decoration-color
,text-decoration-style
,text-decoration-line
三个属性,默认值为currentcolor solid none
。 -
透明色 & 透明度(opacity)
-
旋转 (transform)
旋转 rotate,缩放 scale,倾斜 skew,平移 translate
-
动画(animation) & 过渡效果(transition)
-
阴影(box-shadow, text-shadow)
box-shadow: x-offset y-offset blur-radius spread-radius color; text-shadow: x-offset y-offset blur-radius color;
-
新的布局方式,如 多列布局 multi-columns 、 弹性布局 flexible box 与 网格布局 grid layouts
-
线性渐变(gradient)
-
多背景(background-image可以设置多个url或linear-gradient)
-
边框可以设置图片(border-image)
请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
什么是flexbox
CSS3新增布局。
Flexbox可以把列表放在同一个方向(从上到下排列,从左到右),并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器(flex container)来实现。
-
采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。
-
它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。
常规布局是基于块和内联流方向,而Flex布局是基于flex-flow流可以很方便的用来做局中,能对不同屏幕大小自适应。
在布局上有了比以前更加灵活的空间。
具体:www.w3cplus.com/css3/flexbo…
应用场景
-
水平垂直居中
-
一边定宽,一边自适应
-
多列等分布局
-
圣杯布局
-
sticky footer
我在项目中的应用
-
sticky footer (demo)
如果页面内容不够长的时候,footer固定在视窗底部;如果内容足够长时,footer会被内容向下推。
<div class="detail-flex"> <div class="detail-content">detail-content</div> <div class="detail-footer">detail-footer</div> </div>
.detail-flex display: flex flex-direction: column position: fixed z-index: 100 top: 0 left: 0 width: 100% height: 100% overflow: auto .detail-content flex: 1 0 auto .detail-footer flex: 0 0 auto
用纯CSS创建一个三角形的原理是什么?
不同宽高下的border:详情请戳demo
基础
把上、左、右三条边隐藏掉(颜色设为 transparent)。
div {
width: 0;
height: 0; /* div里没内容,可不写 */
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
/* 或者这样写 */
div {
width: 0;
border: 100px solid transparent;
border-bottom-color: #343434;
}
等边三角形
显示部分的宽度 = transparent部分的宽度 * √3
√3 ≈ 1.732
div {
width: 0;
border: 100px solid transparent;
border-bottom: 173px solid #343434;
}
直角三角形
设置两边的宽度为0。
/* 填充右下角的三角形 */
div {
width: 0
border: 0 solid transparent
border-left: 100px solid transparent
border-bottom: 100px solid #343434
}
带边框的三角形
两个重叠。(但是不够智能)
<div id="col1"></div>
<div id="col2"></div>
body, html
margin: 0
background-color: #333
#col1, #col2
width: 0
border: 100px solid transparent
border-bottom: 173px solid #fff
#col2
position: absolute
left: 0
top: 2px
border-bottom-color: #222
transform: scale(0.98)
css多列等高如何实现?
参考:八种创建等高列布局
1. 背景图
-
优点:
实现方法简单,兼容性强,不需要太多的css样式就可以轻松实现。
-
缺点:
使用这种方法不适合流体布局等高列的布局;
需要更换背景色或实现其他列数的等高列时,都需要重新制作过背景图。
2. div嵌套+position
原理图:
-
优点:
不需要借助其他东西(javascript,背景图等),而是纯CSS和HTML实现的等高列布局;
兼容所有浏览器(包括IE6),并且可以很容易创建任意列数。
-
缺点:
不像其他方法一样简单明了,给你理解会带来一定难度;
复杂的div嵌套,html语义不清晰(你有多少列就需要多少个容器)。
3. 正padding和负margin正负值相抵
-
原理:
利用padding-bottom|margin-bottom正负值相抵;
设置父容器设置超出隐藏(overflow:hidden),这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度, 当它里面的任一列高度增加了,则父容器的高度被撑到里面最高那列的高度, 其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
-
优点:
可实现多列等高布局;
能实现列与列之间分隔线效果;
结构简单;
兼容所有浏览器。
-
缺点:
若希望每列四周有边框,则底部(或顶部)边框无法显示。
-
缺点解决办法:
-
用和边框一致的背景图(我不喜欢这种类型的方法,后续更改很麻烦)
-
使用div来模仿列的边框
每列中添加一个div(可以直接用::after伪元素代替),设置定位为absolute;
在列的上一级的wrapper中,定位relative;
这样,就能让absolute根据wrapper的大小和位置进行定位了。
-
4. 边框 + 绝对定位/float “模拟”
感觉思路上其实与“2. div嵌套+position”类似,都是在底部设置背景层,再在上面铺文字层。(我自己改了以下,这样也行 ↪ demo)
-
优点:
结构简单,兼容各浏览器,容易掌握。
-
缺点:
受限于边框+内容最多三栏,所以无法实现三栏以上的效果。
5. 模拟表格布局
-
优点:
这是一种非常简单,易于实现的方法。
-
缺点:
兼容性不好,在ie6-7无法正常运行。
6. flex布局
-
优点:
简单易用,适用于移动端。
-
缺点:
CSS3新功能,不兼容老的浏览器。