CSS

link 和 @import的区别

1)从属关系的区别:link属于XHTML标签,而@import是CSS提供的语法规则,link除了加载CSS,还可以定义RSS,定义rel连接属性等,@import就只能加载CSS。 2)加载顺序的区别:页面加载时,link会同时被加载,而@import引用的CSS会等页面被加载完后再加载。 3)兼容性的区别:@import只有IE5以上才能被识别,而link是XHTML标签,无兼容问题。 4)DOM可控性区别:通过js操作DOM,可以插入link标签来改变样式;由于DOM方法是基于文档的,无法使用@import方式插入样式 5)权重区别(争议):可参考:https://www.cnblogs.com/my--sunshine/p/6872224.html

圣杯布局 与 双飞翼布局

圣杯布局和双飞翼布局都是为了实现 两侧固定宽度 中间自适应的 三栏式布局方式。这种布局方式比较老,在不考虑兼容的情况下,我们现在使用flex更多一些
圣杯布局:三栏利用 float 和 负 margin 并列,利用父容器设置 padding 给两侧栏腾出空间 双飞翼布局: 三栏利用 float 和负 margin 并列,中间栏加一层容器,利用 margin 给两栏腾出空间
圣杯布局实现:
1
<div class="wrapper1">
2
<div class="main">
3
<p>bilibili</p>
4
</div>
5
<div class="left"></div>
6
<div class="right"></div>
7
</div>
Copied!
1
* { padding: 0; margin: 0; }
2
.wrapper1 { padding: 0 60px 0 30px; }
3
.wrapper1 .main {
4
float: left;
5
width: 100%;
6
height: 300px;
7
background: red;
8
}
9
.wrapper1 .left {
10
float: left;
11
width: 30px;
12
margin-left: -100%;
13
background: blue;
14
height: 100px;
15
position: relative;
16
right: 30px;
17
}
18
.wrapper1 .right {
19
float: left;
20
width: 60px;
21
margin-left: -60px;
22
background: yellow;
23
height: 200px;
24
position: relative;
25
left: 60px;
26
}
Copied!
双飞翼布局实现:
1
<div class="wrapper2">
2
<div class="container">
3
<div class="main">
4
<p>bilibili</p>
5
</div>
6
</div>
7
<div class="left"></div>
8
<div class="right"></div>
9
</div>
Copied!
1
* { padding: 0; margin: 0; }
2
.wrapper2 { min-width: 630px; }
3
.wrapper2 .container { float: left; width: 100%; }
4
.wrapper2 .container .main { height: 300px; background: red; margin: 0 600px 0 30px; }
5
.wrapper2 .left {
6
float: left;
7
width: 30px;
8
background: blue;
9
height: 100px;
10
margin-left: -100%;
11
}
12
.wrapper2 .right {
13
float: left;
14
width: 600px;
15
background: yellow;
16
height: 200px;
17
margin-left: -600px;
18
}
Copied!

页面三栏布局

假设高度已知,请写出三栏布局,其中左右栏宽度各为300px,中间自适应
1
<html>
2
<head>
3
<style>
4
html * {
5
padding: 0;
6
margin: 0;
7
}
8
9
.layout article div {
10
min-height: 100px;
11
}
12
13
.layout.float .left {
14
15
float: left;
16
width: 300px;
17
background: red;
18
}
19
20
.layout.float .right {
21
22
float: right;
23
width: 300px;
24
background: red;
25
}
26
</style>
27
</head>
28
<body>
29
<div class="layout float">
30
<div class="left"></div>
31
<div class="right"></div>
32
33
<div class="center">
34
<p>浮动解决方案</p>
35
36
</div>
37
</div>
38
39
<div class="layout table">
40
<style>
41
.layout.table .left {
42
width: 100%;
43
display: table;
44
height: 100px;
45
}
46
47
.layout.table .div {
48
display: table-cell;
49
}
50
</style>
51
<div class="left"></div>
52
<div class="right"></div>
53
54
<div class="center">
55
<p>浮动解决方案</p>
56
57
</div>
58
</div>
59
</body>
60
</html>
Copied!

实现方式

  • 浮动:需要清除浮动
  • 绝对定位:脱离文档流
  • flexbox
  • tablecell
  • 网格布局

页面布局小结

  • 语义化掌握到位
  • 页面布局理解深刻
  • CSS基础知识扎实
  • 思维灵活并且积极
  • 代码书写规范

CSS3 有哪些新增特性

边框
  • border-radius
  • box-shadow
  • border-image 边框图像
背景
  • background-size
  • background-origin 背景图片的定位区域
  • background-clip 背景图片的绘制区域
渐变
  • linear-gradient 线性渐变
  • radial-gradient 径向渐变
文本效果
  • word-break
  • word-wrap
  • text-overview
  • text-shadow
  • text-wrap
  • text-outline
  • text-justify
转换
  • 2D转换属性
    • transform 2D/3D转换
      • rotate()
      • scale()
      • skew()
      • maxtrix()
      • translate()
      • translateX()
      • translateY()
      • scale()
      • scaleX()
      • scaleY()
    • transform-origin
3D转换:
  • 3D转换属性:
    • transform
    • transform-origin
    • transform-style
  • 3D转换方法
    • translate3d(x,y,z)
    • translateX(x)
    • translateY(y)
    • translateZ(z)
    • scale3d(x,y,z)
    • scaleX(x)
    • scaleY(y)
    • scaleZ(z)
    • rotate3d(x,y,z,angle)
    • rotateX(x)
    • rotateY(y)
    • rotateZ(z)
    • perspective(n)
      过渡
  • transition
动画
  • @Keyframes规则
  • animation
弹性盒子(flexbox) 多媒体查询@media

页面上隐藏元素的方法有哪些

占位
  • opacity: 0 看不见,但是会占据空间。只会引起重绘
  • visibility: hidden 页面会渲染只是不显示
  • margin-left: -100%
  • transform: scale(0)
不占位
  • display: none 页面不会渲染,可以减少首屏渲染的时间,但是会引起回流和重绘。
  • width: 0; height: 0; overflow: hidden
  • z-index: -9999999
  • position: relative; left: -100%;

CSS3 新增伪类

  • :first-child :last-child 表示子元素结构关系
  • :nth-child() :nth-last-child() 用来控制奇数、偶数行的
  • :first-of-type :last-of-type 表示一组兄弟元素中其类型的第一个元素
  • :nth-of-type :nth-last-of-type 匹配那些在相同兄弟节点中的位置与模式
  • root html跟元素
  • :not() 否定选择器
  • :only-child 只有一个子元素才会生效 
  • :empty 选择连空格都没有的元素 

CSS 选择器有哪些, 哪些属性可以继承

  • id 选择器 #header
  • class 选择器 .header
  • 标签 选择器 header
  • 伪类选择器 ::after ::before
  • 兄弟选择器 +header
  • 后代选择器 > header
  • 通配符 *
可以继承的属性
  • font-size
  • font-weight
  • font-style
  • font-family
  • color
inherit属性

四种定位的区别

  • static 是默认值
  • relative 相对定位 相对于自身原有位置进行偏移,仍处于标准文档流中
  • absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指 position 不是 static 的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了标准文档流。
  • fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

脱离文档流

元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
  • float
  • absolute
  • fixed

BFC (Block Formatting Context BFC)

Web页面的可视化 CSS渲染的 一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

如何理解rem布局

我们用js很容易动态的设置html的font-size恒等屏幕的1/10;我们可以在页面dom ready、resize和屏幕旋转中设置:
1
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
Copied!
如何把设计稿的像素单位换成以 rem 为单位呢?可以用一个比例来计算:如设计稿宽度为 750px,某个元素量得 75px,那么:
75px/750px = 计算所得 rem/10rem, 所以计算所得 rem=75px; 所以我们在样式中写 width:1rem;实际宽度是 75px;同理,如果设计稿总宽度是 640px, 则 1rem=64px。

CSS实现正方形div

要求:宽度随页面拓展
  1. 1.
    vw 单位
1vw = 1% viewport width
1
<div class="vw">hello</div>
2
<style>.vw { width: 50%; height: 50vw; background: #ccc; } </style>
Copied!
  1. 1.
    padding-bottom
padding 百分比相对于父元素宽度计算
1
<div class="placeholder"></div>
2
<style>.placeholder { width: 100%; padding-bottom: 100%; height: 0; }</style>
Copied!
  1. 1.
    padding-bottom :after absolute
1
<div class="square">
2
<div class="content">
3
Hello!
4
</div>
5
</div>
6
7
<style>
8
.square { width: 50% background: #ccc; }
9
.square:after { content: ""; display: block; padding-bottom: 100%; }
10
.content { position: absolute; width: 100%; height: 100%; }
11
</style>
Copied!

谈谈对CSS盒模型的认识

Could not load image
image
  • margin
  • border
  • padding
  • content

标准模型和IE模型的区别

其中,标准模型 和 IE模型的区别就在于 width 和 height 的计算方式不同。
  • 标准模型为 content 的宽度、高度。
  • IE模型是计算 border 和 padding 的宽度、高度。
Could not load image
image

CSS如何设置这两种模型

1
box-sizing: content-box; // 标准模型(默认)
2
box-sizing: border-box; // IE模型
Copied!

JS如何设置盒模型的宽高

  1. 1.
    dom.style.width/height 只能取内联样式的宽高
  2. 2.
    dom.currentStyle.width/height 渲染后的宽高(只有IE支持)
  3. 3.
    window.getComputedStyle(dom).width/height 所有浏览器都支持的获取渲染后的宽高
  4. 4.
    dom.getBoundingClientRect() 主要用于获取元素的绝对位置

解释什么是CSS盒模型的边距重叠

1
<div class="parent">
2
<div class="child"></div>
3
</div>
4
5
<style>
6
.child {
7
margin-top: 10px;
8
height: 100%;
9
}
10
</style>
Copied!
以上代码可以看到,parent 的高度为100px,child的 margin-top 和 parent 发生了重叠,parent 的上边距是 10px。

BFC 边距重叠解决方案

给父级元素添加 overflow: hidden; 后,我们发现父级元素的高度变成了 110,边距重叠的问题没有了。overflow: hidden 是一种 BFC (块级格式化上下文)。

BFC原理和渲染规则

  • BFC 这个元素的垂直方向的边距会发生重叠
  • BFC 的区域不会与浮动元素的 box 重叠
  • BFC在页面上是一个独立的容器,外面和里面的元素都不会影响他
  • 计算BFC高度的时候,浮动元素也会参与计算
IFC 内联元素格式化上下文

如何创建BFC

  • float 为 none
  • position 不是默认的 static,而是 relative 或者其他的
  • display table
  • overflow hidden

BFC的应用

  • 解决边距重叠
  • 清除浮动(BFC子元素即使是float 也会参与高度计算)
  • 防止占据浮动空间

怎么理解Flex 布局,flex 布局与普通布局有什么区别,什么情况下我们用flex 什么情况下用普通布局

  • 传统布局以基于盒子模型,依赖 display、position、float 等属性。对于那些特殊布局非常不方便,比如垂直居中
  • Flex 是 FlexBox 的缩写,意为弹性布局,用来为 盒子模型提供最大的灵活性。任意一个容器都可以被指定为 flex 布局。
    • just-content 定义了项目在主轴上的对其方式
      • flex-end 右对齐;
      • center 居中;
      • space-between 两端对其;
      • space-around 两个项目中间间隔相等
    • align-items 定义项目如何在交叉轴 纵轴对齐
      • baseline 项目第一行文字基线对齐
      • stretch 如果项目未设置高度 或者为 auto,将占满整个容器的高度
    • flex-direction 决定主轴的对齐方向
    • flex-wrap
      • nowrap 不换行
      • wrap 换行
      • wrap-reverse 换行,第一行在下方

CSS布局方式都有那些

  • 传统布局
    • 文档流布局 display 属性
    • 定位布局 position属性
    • 浮动布局 float属性
  • flex 布局
  • grid 布局

FlexBox 和 CSS Grid

  • FlexBox: 一维布局系统,支持创建 行/列 轴布局。
创建 Flexbox 布局需要首先创建 flex 容器display:flex;。每一个在flex容器中的元素都是 flex元素
  • CSS Grid:二维布局系统,可以同时处理 行/列。
创建 grid 容器首先创建 grid 容器display:grid; 使用 grid-template-rows 创建行元素
1
grid-template-rows: 200px 200px;
Copied!
使用 grid-template-columns 创建行元素
1
grid-template-columns: 200px 200px;
Copied!
不同
  • CSS Grid: Layout
  • FlexBox: Alignment

Less 和 Sass 的比较

  • Less环境较Sass简单
  • Less使用较Sass简单
  • 从功能出发,Sass较Less强大
    • sass有变量和作用域。
    • sass有函数的概念;
    • @if @else;@for @each @while @extend @import
    • 数据结构:
      -$list类型 = 数组;
      -$map类型 = object;
  • Less 与 Sass 处理机制不一样.前者是通过客户端处理的,后者是通过服务端编译,相比较之下前者解析会比后者慢一点
  • 关于变量在Less和Sass中的唯一区别就是Less用@,Sass用$。
Last modified 1yr ago