2018.12.12

一复习(!important)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>复习预习</title>
</head>
<body>
    <!-- 1.盒子的显隐 -->
    <!-- display: none  => display: block -->
    <!-- 盒子在页面中隐藏后,不在页面中占位, 显示出来后,占位 -->

    <!-- opacity: 0 => opacity: 1 -->
    <!-- 盒子在页面中隐藏后,在页面中占位, 显示出来后,占位位置不变 -->

    <!-- 2.定位布局 -->
    <!-- 相对定位: 
        参考自身原有位置
        上下取上(左右取左)
        left=-right(top=-bottom)
        不脱离文档流
    -->
    <!-- 绝对定位:
        参考最近的定位父级
        上下取上(左右取左)
        完全脱离文档流 => 父级一定要设置自身高度(宽度一般也需要设置)
    -->
    <!-- 固定定位:
        参考页面窗口 => 公告, 相对页面静止的导航栏/工具栏等等
    -->
    <!-- z-index: 改变显示的层级, 正整数, 值越大显示层级越高 -->

    <!-- 3.流式布局思想 -->
    <!-- 百分比 | auto | inherit | vw(vh) | em(rem) | max-width(min-width) -->
    <style type="text/css">
        /*inline相关盒子的一些文本属性默认值为inherit(继承)*/
        span {
            font-size: inherit;
        }
    </style>


    <!-- 今日 -->
    <!-- 知识点复习与案例书写 -->
</body>
</html>

<!--------------------------------------------------------------------------------------------!>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>html基础复习</title>
</head>
<body>
    <!-- 前端: 用户可见的所有界面均是前端(PC端/移动端) -->
    <!-- html: 页面架构搭建 | css: 页面布局样式 | js: 页面交互渲染 -->
    <!-- 编辑器: webstrom | sublime | atom | pycharm  -->
    
    <!-- 标签: <字母开头 + 合法字符(数字|-)> => (标签具有作用域,有头有尾)  <abc> | <num1> | <nav-title> -->
    <!-- 指令: <!doctype html> 注释 -->
    <!-- 转移字符: &gl; &nbsp; -->

    <!-- 基本标签: div | span | hn | p | ul>li | hr | br | form>input | table>tr>th(td) | a | img | b | i | meta | link | script | style -->
    
    <!-- 分类: 单双 | dispaly -->
    <!-- inline: span | b | i | a -->
    <!-- inline-block: img | input -->
    <!-- block: div | hn | p | ul | hr | br -->
</body>
</html>

<!--------------------------------------------------------------------------------------------!>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css复习</title>
</head>
<body>
    <!-- 1.css三种引入: 行间式 | 内联式 | 外联式 -->
    <!-- 选择器 作用域 样式块 -->


    <!-- 2.长度单位: px | em | rem | cm | mm | vw | vh | in -->

    <!-- 3.颜色: rgb(0, 255, 189) | rgba(0,0,0, 0~1) | red | #000000~#FFFFFF -->

    <!-- 4.文本样式 -->
    <style>
        span {
            font: 900 normal 30px/100px '首选字体', '备用字体1', '备用字体2';
            text-align: center;
            color: red;
            text-decoration: underline;
            letter-spacing: 3px;
            word-spacing: 10px;
            text-indent: 2em;
        }
    </style>

    <!-- 5.选择器 -->
    <style type="text/css">
        /*选择器： css连接html标签的桥梁，建立连接后就可以控制标签样式*/
        /*标签 类 id*/
        /*组合选择器*/
        /*伪类选择器*/

        /*优先级：*/
        /*基础选择器： !important > id > 类[属性] > 标签 > 通配*/
        /*组合选择器: 权重(同类型个数比较)*/
        .b > .s {}
        .b .s {}
        .b + .s {}
        .b.s {}
        .b[class] {}
        
        #ss { font-size: 50px; }
        span.s2 { font-size: 40px; }
        [class] { font-size: 35px; }
.s1 { font-size: 30px; }
span { font-size: 20px!important; }

/* 标签名 | . | # */
/*后代"空格"(子代) | 兄弟"~"(相邻) | 群组"," | 交集"紧挨着"*/
/* [属性名="属性值"] */

    </style>

    <span class="s1 s2" id="ss" style="font-size: 60px;">12345</span>

    <style type="text/css">
/* 伪类选择器 */
/* :link :hover(鼠标悬浮) :active(鼠标点击中) :visited */
/* :nth-child() 先位置后类型 :nth-of-type() 先类型后位置 */
/* :not() */
/* :before(盒子渲染前) :after(盒子渲染后) :focus(表单标签获取焦点) */
p:nth-child(3) { font-size: 100px }
p:nth-of-type(2n) { font-size: 50px }
    </style>
    <div class="box">
    <span>span</span>
    <p>pp1</p>
    <p>pp2</p>
    </div>

    <!-- 6.精灵图 -->
    <style type="text/css">
.pg {
width: 200px;
height: 200px;
border: 1px solid black;
position: absolute;
top: 10px;
left: calc(50vw - 100px);
    }
.pg {
background: url('img/bg.png') no-repeat;
/*将背景图片的具体位置移至显示区域*/
background-position: -300px -350px;
    }
    </style>
    <div class="pg"></div>
</body>
</html>


<!--------------------------------------------------------------------------------------------!>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒模型复习</title>
    <style type="text/css">
abc {
display: inline-block;
    }

.box {
background: orange;

/*文本类型的样式具有继承关系*/
font-size: 30px;
font-weight: 900;
/*inline-block不会继承*/
text-decoration: underline;
text-indent: 2em;
line-height: 60px;
    }
    </style>
</head>
<body>
    <!-- 文本属性通过拥有继承关系: 子标签没有设置文本属性时,值会从父级中获取(父级如果没有设置,会找到html) -->

    <div class="box">
    <span>inline</span>
    <div>block</div>
    <abc>inline-block</abc>
    </div>

    <!-- 1.盒子的四个组成部分 -->
    <!-- content | padding | border | margin -->
    <!-- display: inline | inline-block | block -->

    <!-- content: 提高给内容(文本,图片,子标签整个盒子)的显示区域 -->

    <!-- padding: 介于border与content之间的距离, 可以撑开border与content之间的距离, 没有自身颜色(透出背景颜色),只有区域 -->
    <!-- 注: padding-top可以将自身与自身第一个子级分离 -->
    <style type="text/css">
.p {
width: 20px;
height: 20px;
background: red;
    }
.b {
width: 100px;
padding-bottom: 100px;
border-bottom: 1px solid black;
    }
.c {
background: pink;
/*border: 1px solid black;*/
border-style: solid;
padding-left: 32px;
padding-bottom: 32px;
margin-left: 32px;
/*text-indent: 2em;*/
    }
    </style>
    <div class="b">
    <div class="p"></div>
    </div>
    <div class="c">123</div>

    <!-- border: 边框, 有宽度颜色样式, 如果给颜色设置透明也可以透出背景颜色 -->

    <!-- margin: 控制盒子位置 => 盒模型布局 -->

    <!-- 2.边界圆角 -->
    <style type="text/css">
.bj {
width: 100px;
height: 100px;
background: pink;
    }
.bj {
/*border-radius: 20px;*/
/*border-radius: 40%;*/
/*border-radius: 10px 30px 50px;*/
border-radius: 10px / 50px;
    }
    </style>
    <div class="bj"></div>

    <!-- 3.display -->

    <!-- 4.margin布局 -->
    <!-- i) margin-top | margin-left 完成自身布局, 右下两个方向影响兄弟 -->
    <style type="text/css">
.hh {
width: 30px;
height: 30px;
background: black;
/*display: inline-block;*/
float: left;
/*自身动,控制自身布局*/
/*margin-top: 30px;*/
/*margin-left: 30px;*/

/*右兄弟动,辅助兄弟布局*/
margin-right: 100px;
/*下兄弟动,辅助兄弟布局*/
/*margin-bottom: 30px;*/
    }
.xx {
width: 30px;
height: 30px;
background: red;
/*display: inline-block;*/
float: left;
    }
    </style>
    <div class="hh"></div>
    <div class="xx"></div>

    <!-- ii) 上下间距会重叠取大值, 左右间距会叠加 -->
    <!-- 坑1: 父子联动 坑2: 上兄弟下margin和下兄弟上margin重叠取大值 -->
    <style type="text/css">
.x, .z {
width: 50px;
height: 50px;
background: blue;
    }
.x {
/*margin-bottom: 40px;*/
    }
.z {
margin-top: 10px;
background: yellow;
    }
.y {
width: 10px;
height: 10px;
background: red;
/*margin-top: 10px;*/
    }
/*坑1解决方案*/
.y {
/*方案1*/
/*float: left;
    margin-top: 10px;*/

/*方案2*/
/*position: relative;*/
position: absolute;
/*top: auto;*/
/*top: 20px;*/
margin-top: 20px;
    }
.z {
/*position: relative;*/
    }
    </style>
    <div class="x"></div>
    <div class="z">
    <div class="y"></div>
    </div>
</body>
</html>
posted @ 2018-12-12 19:21 涛仔·· 阅读(126) 评论(0) 编辑收藏举报
刷新页面返回顶部