20190401学习复盘

注意

本博文仅供学术研究和交流参考，严禁将其用于商业用途。如因违规使用产生的任何法律问题，使用者需自行负责。

移动端

1.必须有<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
2.宽度 尽量都是百分比
3.rem的使用
4.宽度跟padding-bottom相等百分比的时候为正方形1080*1020 750*1334 
5、移动端根本像素自己换算成百分比 

position 定位

position:relative absolute    

练习做一个书的小demo

<style>
    .box-relative{
        position: relative;
        left: 100px;
        width: 1000px;
        height: 180px;
        background: grey;
    }
    .point-box{
        position: absolute;
        left: 50%;
        height: 100%;
        width: 12px;
    }
    .point-box>span{
        position: absolute;
        height: 100%;
        width: 1px;
        background: #0f0f0f;
        left: 6px;
    }
    .point-box>i{
        position: absolute;
        width: 12px;
        height: 12px;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        margin-top: -6px;
        margin-left:-6px;
        background: #1e90ff;
        z-index: 2;
    }
    .box-con{
        width: 45%;
        padding:23px;
    }
    .f_l{
        float: left;
        text-align: right;
    }
    .f_r{
        float: right;
        text-align: left;
    }
</style>
<div class="box-relative">
    <div class="point-box">
        <i class="point"></i>
        <span class="line"></span>
    </div>
    <div class="box-con f_r">
        Lorem ipsum dolor sit amet,
        consectetur adipisicing elit.
        Asperiores aspernatur autem doloremque
        minima molestiae nisi pariatur quasi ratione.
        Accusantium amet blanditiis corporis magnam
        modi non possimus repellat similique velit! Harum!
    </div>
</div>
<div class="box-relative">
    <div class="point-box">
        <i class="point"></i>
        <span class="line"></span>
    </div>
    <div class="box-con f_l">
        Lorem ipsum dolor sit amet,
        consectetur adipisicing elit.
        Asperiores aspernatur autem doloremque
        minima molestiae nisi pariatur quasi ratione.
        Accusantium amet blanditiis corporis magnam
        modi non possimus repellat similique velit! Harum!
    </div>
</div>
<div class="box-relative">
    <div class="point-box">
        <i class="point"></i>
        <span class="line"></span>
    </div>
    <div class="box-con f_r">
        Lorem ipsum dolor sit amet,
        consectetur adipisicing elit.
        Asperiores aspernatur autem doloremque
        minima molestiae nisi pariatur quasi ratione.
        Accusantium amet blanditiis corporis magnam
        modi non possimus repellat similique velit! Harum!
    </div>
</div>
<div class="box-relative">
    <div class="point-box">
        <i class="point"></i>
        <span class="line"></span>
    </div>
    <div class="box-con f_l">
        Lorem ipsum dolor sit amet,
        consectetur adipisicing elit.
        Asperiores aspernatur autem doloremque
        minima molestiae nisi pariatur quasi ratione.
        Accusantium amet blanditiis corporis magnam
        modi non possimus repellat similique velit! Harum!
    </div>
</div>

效果如下:

精灵图片

1.图片要比较小
2.修饰图片
3.三个以上

css基础

1 围绕盒子
width height display border margin padding background float position
vertical-align overflow
2.围绕文本
font-family font-size font-style color font-weight white-space word-break
word-spacing letter-spacing text-decation text-indent text-overflow
3.伪类
a:link a:visited a:hover a:active :first-line 第一行 :first-letter首字母
:before{conter:""} :after{conter:""}

H5新标签

header footer nav section aside article audio video figure figcaption 
embed 引入媒体 格式更丰富一些 用法跟video一样

• 属性

hidden contenteditable spellcheck

CSS3

.选择器
.圆角
.阴影 盒子投影 字投影
.开放的字体 
.颜色-新的表达方式 rgb
.背景图 多个背景图
.边框  图片边框
.新的布局方式 弹性布局
.媒体查询     

IE9开始支持CSS3
部分支持
10以上支持比较好 
box-shadow：水平方向 垂直方向 发光的尺寸向外延伸的尺寸  
颜色 inset内阴影/外阴影（默认)
text-shadow 

---

分割线

---

相关信息

以上就是我关于 20190401学习复盘 知识点的整理与总结的全部内容，希望对你有帮助。。。。。。。