Position relative: 相对于目前的位置做位移 absolute:相对于上一个有 relative 标签的父元素移动 浮动 当块状属性加了 float 属性时,相当于跳出了原来的那一层,跑到了表面。类似于河流,未加 float 属性时,相当于是河底的石头,加了 float 属性,则变为表面上的木头。 cl ..

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 初步实现放置鼠标实现图片滚动

  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    130 引用 • 374 回帖 • 1 关注
  • 笔记

    好记性不如烂笔头。

    179 引用 • 425 回帖 • 1 关注
回帖   
请输入回帖内容...