一复习(!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> 注释 --> <!-- 转移字符: ≷ -->? <!-- 基本标签: 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>
原文地址：https://www.cnblogs.com/jutao/p/10110523.html
时间： 2024-10-21 06:51:06