引言
文章目录
- 欢迎学习完第一期的猛男来和快活呀,讨论讨论、切磋切磋,来啊,豪横起来!!!
- 喜欢的猛男,记得对我关注,点赞,评论讨论沃!
1.谈一下为什么要初始化CSS样式?
- 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异
- 初始化样式会对 SEO 有一定的影响,不友好
2.谈一下你对BFC规范的理解
BFC是CSS中的一个渲染机制,BFC就相当于一个盒子,内部的元素与外界的元素互不干扰。它不会影响外部的布局,外部的布局也不会影响到它。
形成条件(任意一条即可)
- 浮动的元素
- 定位元素(绝对定位和固定定位)
- display的值是inline-block,table-cell,flex,table-caption或者inline-flex
- overflow的值为hidden auto scroll
特性
- 内部的盒子会在垂直方向上一个接一个的放置
- 对于同一个BFC的俩个相邻的盒子的margin会发生重叠,与方向无关。
- 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时,浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
应用案例:
浮动后高度塌陷,会影响到外界,开启BFC不会影响到外界
- 已知宽高的元素水平垂直居中
- 不写宽高的margin:auto属性
- 左边固定右边自适应
- 等高布局等
3.谈一下CSS3有哪些新增的特性?
边框(borders):
- border-radius 圆角
- box-shadow 盒阴影
- border-image 边框图像
背景:
- background-size 背景图片的尺寸
- background_origin 背景图片的定位区域
- background-clip 背景图片的绘制区域
渐变:
- linear-gradient 线性渐变
- radial-gradient 径向渐变
文本效果:
- word-break
- word-wrap
- text-overflow
- text-shadow
- text-wrap
- text-outline
- text-justify
过渡:
- transition
动画:
- @Keyframes规则
- animation
弹性盒子(flexbox)
多媒体查询@media
2D转换:
- transform
- translate(移动)
- rotate(旋转)
- skew(扭曲)
- scale(缩放)
3D转换:
- transform
- translate3d(x,y,z)
- scale3d(x,y,z)
- rotate3d(x,y,z,angle)
- perspective(n)(景深)
4.谈一下在页面上隐藏元素的方法有哪些?
占位:
- visibility: hidden;
- margin-left: -100%;
- opacity: 0;
- transform: scale(0);
不占位:
- display: none;
- width: 0; height: 0; overflow: hidden;
仅对块内文本元素:
- text-indent: -9999px;
- font-size: 0;
利用 position (absolute 的情况下):
- left/right/top/bottom: 9999px/-9999px 让元素在视区外
- z-index: -9999 放到最底层,同一位置可以让其他元素把这个给遮掉
性能角度:
- disaplay: none; 页面不会渲染,可以减少首屏渲染的时间,但是会引起回流和重绘。
- visibility: hidden; 页面会渲染只是不限显示。
- opacity: 0; 看不见,但是会占据空间。只会引起重绘
5.说说什么是重绘和重排?
repaint(重绘):
一般改变元素的颜色,文字颜色等等,不影响元素的周围或内部的属性,浏览器就会重绘,重新绘制某一个部分
refolw回流(也叫重排):
我们浏览器要花费时间去渲染,只要某个部分的布局改变了(例如:浮动的margin等元素几何属性都会改变布局,排除决定定位和相对浏览器窗口定位)浏览器需要倒回去重新排列。(改变了整体)
"重绘"不一定会出现"重排","重排"必然会出现"重绘"
为了性能,要减少重绘重排,解决方法如下:
- 不要一条一条的修改样式,可以直接设置一个预先设置好的类名
- 千万不要使用table布局,一般我们稍微操作一下就会重新布局
- 对于动画来说尽量使用绝对定位或相对浏览器定位(因为不会影响到整个页面的布局)
- 浮动叫做不完全脱离页面流,定位完全
6.谈谈你对相对定位、绝对定位、固定定位的理解
position 属性指定了元素的定位类型。
position 属性的五个值:
- static(默认值)
- relative(相对定位)
- fixed(固定定位)
- absolute(绝对定位)
- sticky(粘性定位)
relative 相对定位:相对自身元素的原来进行定位。
- 移动相对定位元素,但它原本所占的空间不会改变。
- 相对定位元素经常被用来作为绝对定位元素的容器块。
- 用途:
- 第一个,为微调元素的位置
- 第二个,做绝对定位的参考(父相子绝)
absolute 绝对定位:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
(初始包含块)
- absolute 定位使元素的位置与文档流无关,因此不占据空间。
- absolute 定位的元素和其他元素重叠。
fixed 固定定位:元素的位置相对于浏览器窗口是固定位置。
- 即使窗口是滚动的它也不会移动
- Fixed定位使元素的位置与文档流无关,因此不占据空间
- Fixed定位的元素和其他元素重叠
- 用途:
- 固定到浏览器窗口固定位置的元素
- 跟随导航
- 回到顶部
sticky 粘性定位:粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
- 它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
- 元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
- 这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
- 用途:页面吸顶效果