HTML+CSS 学习心得

Position

relative: 相对于目前的位置做位移
absolute: 相对于上一个有 relative 标签的父元素移动

浮动

当块状属性加了 float 属性时，相当于跳出了原来的那一层，跑到了表面。类似于河流，未加 float 属性时，相当于是河底的石头，加了 float 属性，则变为表面上的木头。
clear:both：清除浮动，主要用于对齐

渐变色

-webkit-linear-gradient(1,2,3) 线性渐变
1:颜色渐变方向
2:渐变颜色起点颜色
3:终点颜色
-webkit-radial-gradient(1,2) 径向渐变
1:外圈颜色
2:内圈颜色

阴影

box-shadow:1 2 3 4 5:盒子阴影
1:横向位移 px
2:纵向位移 px
3:模糊程度 px
4:放大 px
5:颜色

transition 淡入淡出

transition: ① ② ③ ④
①：选择变换元件
②：变换所需时间
③：变换类型（ease linear）
④：变换延迟

transform 变换属性

rotate(deg): 旋转 param 为旋转角度
translate(px): 位移 param 为位移长度
scale(): 缩放扩大

弹性盒子

display 元素属性：
block: 将元素转化为块状元素
inline: 将元素转化为行内元素
flex: 将元素转化为弹性盒子

flex

flex-direction: 弹性盒子横向纵向排列

justify-content

flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐
space-around:平均分布

align-items

flex-start:上对齐
flex-end:下对齐
center:垂直居中
stretch:若子元素无高度，则将子元素拉申到和父元素同高

页面易出 bug

3px bug: 图片本身占的位置会比图片大 3px
margin bug: 如果外面的 div 只有宽高背景属性值，里面的 div 设置 margin 的话，则会使外部的 div 移动而内部不移动，解决方法，给外部 div 加 overflow 属性

轮播图

    <div class="ppt">
        <div class="outer">
            <div class="inner"><img src="1.jpg"></div>
            <div class="inner"><img src="2.jpg"></div>
            <div class="inner"><img src="3.jpg"></div>
            <div class="inner"><img src="4.jpg"></div>
        </div>
    </div>

三层嵌套结构：
第一层用于显示轮播图
第二层用于将图片拼接到一块
第三层放置图片
再在 css 中添加 transition 和 transform 初步实现放置鼠标实现图片滚动