[前端基础]HTML+CSS入门(三)

内容溢出的解决方法

overflow

外边距问题：合并和塌陷

定位

• 相对定位

position：relative，不脱标，占位(原来的位置)，配合top/right/bottom/left 移动位置，相对自身原位置移动，显示模式不变(display属性)

• 绝对定位

position：absolute 脱标，不占位，配合top/right/bottom/left 移动位置，相对有position：relative修饰的最近祖先元素移动，显示模式变为行内块特点

• 固定定位

position：fixed，脱标，不占位，配合top/right/bottom/left 移动位置，相对浏览器窗口移动，显示模式变为行内块特点

z-index(堆叠顺序)：默认为0，取值为整数，谁大谁在上面

浮动

语法：float：right/left

特点：具备行内块特点，顶对齐，脱离标准文档流

浮动问题：

浮动会脱标，如果父级没有高度，子级无法撑开父级高度，则会出现页面布局错乱

需要清除浮动(清除浮动影响)

flex布局

比浮动好用，推荐使用。给父级设置flex，子元素就可以自动挤压或拉伸(弹性盒子)，flex有主轴(默认水平方向)，侧轴。flex不会脱标，沿着主轴方向排序。

display：flex

 

 修改主轴方向

 flex-direction：常用：row(默认)/column，基本不用：row-reverse/column-reverse

弹性伸缩比

属性名 flex：属性值 整数，表示占用父级剩余尺寸的份数

换行

默认情况下，弹性盒子会在一行显示

flex-warp：warp(换行)/nowarp(不换行，默认)

行对齐方式

调整一行对齐方式，对单行弹性盒子不生效

垂直对齐方式

字体图标

css精灵：

 一些常见图标

网址：https://www.iconfont.cn/

过渡属性、透明度与光标类型

过渡属性：元素在不同状态切换时添加过渡效果

属性名：transitior，属性值：过渡属性 时间(单位:s)

过渡属性可以是具体的css属性(例如宽高)，也可以是all(两个状态属性值不同的所有属性)

过渡属性作用于元素本身，而不是状态

透明度

属性名：opacity 属性值：取值范围[0，1]，0完全透明，1不透明。

光标类型

属性名：cursor，属性值：default(默认值，箭头)，pointer(小手)，text(工字形，输入文字时用)，move：十字型

平面转换

也叫2D转换，为元素添加动态效果，一般配合过渡属性使用。transform属性变化样式：旋转(rotate)；缩放(scale)；移动(translate)；倾斜(skew)；

平移：transform：translat(x轴移动距离，y轴移动距离)，取值：px/百分比(参照盒子自身尺寸计算结果)/正负均可。只写一个值表示沿x轴移动，单独设置x轴，y轴：translateX()/translateY()。

旋转：transform：rotate(旋转角度)，单位deg，取值：正负均可，正：顺时针/负：逆时针。默认情况，旋转原点是盒子中心点。改变旋转原点：transform-origin：水平原点位置  垂直原点位置。

取值：方位词(top，right...)/px/百分比

缩放：transform：scale(x轴缩放倍数，y轴缩放倍数)，一般只写一个，表示同比例缩放。

倾斜：transform：skew(角度)，单位deg，正负均可，正：向右/负：向左

多重转换：多种转换效果叠加，先平移再旋转：transform：translate() rotate()。旋转会改变轴向，多重转换以第一个转换样式的坐标轴为准。

空间转换

也叫3D转换

平移：transform：translate3d(X，Y，Z)/translateX()/translateY()/translateZ()，一般看不到Z轴的变化效果。

视距：perspective：值(800~1200)，视距属性要写在直接父级上，效果：近大远小。

旋转：transform：rotateX/rotateY/rotateXZ/rotate3d(x，y，z，角度)，xyz取值范围0~1，自定义一个旋转轴。

缩放：transform：scale3d(x,y,z)/scaleX//scaleY/scaleZ

animation属性

加强版过渡，实现多个状态的变化过程，过程可控(过渡实现两个状态，过程不可控)

1.定义动画

格式：@keyframes 名称{from {} to{} } 或 @keyframes 名称{ 0%{} 10%{} ...100%{} } 百分比是占时长的百分比。

2.使用动画

animation：动画名称 花费时长(单位：秒)

 

 

rem简介

可以实现移动端适配效果

rem是相对单位，相对于标签的字号计算的，1 rem=1 html字号大小(font-size)

vw与vh的简介与使用

相对单位，相对视口的尺寸计算结果

vw：viewport width vh：viewport height

1vw = 1/100 视口宽度 1vh = 1/100 视口高度

vw和vh不能混用，会导致盒子变形