引言
文章目录
- 欢迎学习完第一期的猛男来和快活呀，讨论讨论、切磋切磋，来啊，豪横起来！！！
- 喜欢的猛男，记得对我关注，点赞，评论讨论沃！
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 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
- 用途：页面吸顶效果
7.未完待续
