CSS学习（2）

目录

脱离文档流特点

BFC块级格式化上下文

浮动

经典高度塌陷问题

解决高度塌陷和外边距重叠问题

定位

相对定位relative

绝对定位absolute

固定定位fixed

粘滞定位sticky

转换2d

平移

缩放

旋转

倾斜

less函数包装

转换3d

平移

缩放

旋转

---

---

脱离文档流特点

• 不再占据文档流中的位置
• 块元素将不再独占一行、宽高被内容撑开
• 行内元素变块元素，脱离文档流后不需要区分行内和块元素

---

BFC块级格式化上下文

什么是BFC？

        具有BFC特性的元素我们可以将其看作隔离的独立容器，容器内的元素不会在布局上影响到容器外的元素。

特点：

• 元素不被浮动元素覆盖
• 元素子元素和父元素外边距不会重叠
• 元素可以包含浮动的元素

开启BFC方式：

• 设置元素浮动
• display:line-block /table-cell /table-caption等
• display:flex /line-flex或display:grid /line-grid;
• 将元素的overflow设置为一个非visible的值 常用 如hidden
• 设置绝对定位position：absolute/fixed

---

浮动

设置浮动：float:left/right;

浮动的特点：

• 脱离文档流，并具备脱离文档流特性
• 左浮向父元素左侧移动，右浮相反
• 默认不会从父元素移出
• 不会超过前边的浮动元素
• 紧贴上一个浮动元素，父元素宽度不够会换行
• 浮动元素不会盖住文字，文字会自动环绕浮动元素的周围

清楚浮动：

不希望某个元素因为其他元素浮动影响而改变位置时，要清楚浮动

clear

经典高度塌陷问题

父元素若是高度被子元素撑开，子元素浮动，父元素高度就为0

解决办法1，overflow: hidden;

解决办法2，浮动元素后放空div，设置clear: both;

解决办法3，父元素::after{contant: "";display: block;clear: both;}

解决高度塌陷和外边距重叠问题

.clearfix::before,.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

定位

层级：开启定位后才有层级，通过z-index修改，必须是整数

相对定位relative

特点：不会脱离文档流，提升元素层级

绝对定位absolute

特点：脱离文档流

        相对包含块(开启定位的最近祖先元素)定位，提升元素层级

        改变元素性质，块变行内，行内变块

固定定位fixed

特点：与绝对定位一致

            永远参照浏览器视口进行定位

粘滞定位sticky

特点：与相对定位一致

           达到某个位置时将其固定

转换2d

修改转换原点：transform-orgin:;

平移

transform:translate(X,Y);/*右，下*/

缩放

transform:scale(W,H);/*宽，高，大小与1做对比*/

旋转

transform:rotate(30deg);/*顺时针*/

倾斜

transform:skew(30deg,45deg);/*沿X轴顺时针倾斜30°，沿Y轴顺时针倾斜45°*/

less函数包装

.tsfm (@tx:0,@ty:0,@w:1,@h:1,@rotate:0,@sx:0,sy:0){
    transform:translate(@tx,@ty) scale(@w,@h) rotate(@rotate) skew(@sx,@sy)
}

转换3d

首先

父元素设置视距：perspective: 800px;

父元素控制子元素是否保持3d空间：transform-style: preserve-3d;

平移

transform: translate3d(X,Y,Z);

缩放

transform: scale3d(x,y,z);

旋转

transform: rotate3d(xdeg,ydeg,zdeg)

同样可以写成函数

/*先给父元素设置perspective和transform-style后使用*/
.tsfm3d(@tx:0,@ty:0,@tz:0,@sx:1,@sy:1,@sz:1,@rx:0,@ry:0,@rz:0) {
    transform: translate3d(@tx,@ty,@tz) scale3d(@sx,@sy,@sz) rotate3d(@rx,@ry,@rz);
}