css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性

day1

01-标题

    <h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6>

02-段落标签

<hr>  //分割线
<br>  //换行
<p></p>  //文章内容

03-文本格式

    <b>加粗</b><strong>加粗</strong><u>这是下划线</u><ins>这是下划线</ins><i>倾斜</i><em>倾斜</em><s>删除线</s><del>删除线</del>

04-图片标签

<!-- alt ：替换文本，当图片不显示的时候显示文字 --><!-- width和height属性只需要给出一个值，另一个等比例缩放，好处就是图片不变型 -->
<img src="cat.gif" alt="这是一只猫" title="这是title文字，鼠标悬停的时候显示" width="200" height="800">

05-音频标签

<audio src="./images/music.mp3" controls autoplay loop></audio>
//控制按钮  自动播放  循环

06-视频标签

<!-- 谷歌浏览器可以让视频自动播放，但不能播放声音 -->
<video src="./images/video.mp4" controls autoplay muted loop></video>

07-链接标签

 <!-- href : 跳转地址 --><a href="https://www.baidu.com/" target="_blank">跳转到百度</a><br><a href="file:///C:/Users/SBZ/Desktop/code/01-%E6%A0%87%E9%A2%98%E6%A0%87%E9%A2%98.html">点了就去01</a><br><a href="#">空链接</a><!-- 开发网站初期我们还不知道跳转地址，href的值写#（空链接） -->

day2

01-列表-无序

    <ul><li>榴莲</li><li>香蕉</li><li>苹果</li> </ul>

02-列表-有序

    <ol><li>张三</li><li>李四</li><li>王五</li></ol>

03-列表-自定义

    <dl><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd>   </dl>

04-列表基本使用

    <table border="1" width="600" height="400">//border代表边框线宽度<tr>   //一行<td>姓名</td><td>成绩</td><td>评语</td></tr><tr><td>小哥哥</td><td>100分</td><td>小哥哥真帅气</td></tr><tr><td>小姐姐</td><td>100分</td><td>小姐姐真漂亮</td></tr></table>

05-表格标题和表头

    <table border="1"><caption><strong>学生成绩单</strong></caption><tr><th>姓名</th>   <th>成绩</th>//每一列的标题<th>评语</th></tr><tr><td>张三</td><td>100分</td><td>第一</td></tr><tr><td>李四</td><td>99分</td><td>第二</td></tr></table>

06-表格-结构标签

    <table border="1" width="500" height="300"><caption><strong>学生成绩单</strong></caption><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><tbody>        <tr><td>张三</td><td> 100分</td><td>第一</td></tr><tr><td>李四</td><td>99分</td><td>第二</td></tr></tbody><tfoot><tr><td>总结</td><td>郎才女貌</td><td>相亲成功</td></tr></tfoot></table>

07-合并单元格

 <table border="1" width="500" height="300"><caption><strong>学生成绩单</strong></caption><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><tbody>        <tr><td>张三</td><td rowspan="2">100分</td><td>第一</td></tr><tr><td>李四</td><td>第二</td></tr></tbody><tfoot><tr><td>总结</td><td colspan="2">郎才女貌</td></tr></tfoot></table>

08-input的基本使用

    <!-- 文本框 -->文本框：<input type="text"><!-- 书写的内容以圆点显示 --><br>密码框：<input type="password"><br>单选框：<input type="radio"><br><br>多选框：<input type="checkbox"><br><br>上传文件：<input type="file" multiple>   //multiple上传多个文件

09-占位符

    <input type="text" placeholder="请输入用户名"><br><input type="password" placeholder="请输入密码">

10-单选框

    性别：<input type="radio" name="sex">男<input type="radio" name="sex" checked>女<br>您的爱好:  <input type="checkbox" name="x" checked> rap <input type="checkbox" name="x"> 打篮球

11-按钮input

    <form action="">用户名：<input type="text" placeholder="请输入用户名"><br><br>密码：<input type="password" placeholder="请输入密码"><br><br><input type="submit" value="登录注册"><input type="reset" value="重置您的所有选择"><input type="button" value="普通按钮"></form>

12-按钮button

    <form action=""><input type="text" placeholder="请输入用户名"><br><button>我是按钮</button><button type="submit">提交按钮</button><button type="reset">重置按钮</button><button type="button">普通按钮，没有任何功能</button></form>

13-下拉菜单

    <select><option>上海</option><option>北京</option><option>深圳</option><option selected>广州</option></select>

14-文本域

<textarea  cols="60" rows="30"></textarea>

15-label

    性别：<label> <input type="radio" name="gender"> 男 </label><label> <input type="radio" name="gender"> 女</label>

16-没有语义的标签

    <div>这是div标签</div><div>这是div标签</div><div>这是div标签</div><span>这是span标签</span><span>这是span标签</span>

17-字符实体

    <!-- 网页不认识多个空格，只认识一个 -->这是HTML文档,现在要学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;习字符实体

day3

01-文字粗细

    <style>div{font-weight: 700;}h1{font-weight: 400;}</style><div>这是div</div><h1>一级标题</h1>

02-文字倾斜

    <style>div{font-style: italic;}em{font-style: normal;}</style><div>div文字大鹏</div><em>正常的文字</em>

03-字体

    <style>div{/* font-family: 宋体; *//* 如果用户电脑没有安装微软雅黑字体，按黑体显示 *//* 如果没有黑体，按任意一种非衬线字体系列显示     如黑体*/font-family: 微软雅黑, 黑体, sans-serif;}</style>

04-font属性

    <style>/* font: style weight size 字体 */p{font: italic 700 66px 宋体;}/* 一个冒号后面书写多个值的写法 --复合属性 */</style>

05-文本缩进

    <style>p{/* text-indent: 40px; */text-indent:2em;font-size: 20px;}</style>

06-水平对齐方式

    <style>h1{/* text-align: left; *//* text-align: right; */text-align: center;}body{text-align: center;}</style>

07-文本修饰

    <style>div{text-decoration: underline;}p{text-decoration: line-through;}h2{text-decoration: overline;}a{color: black;text-decoration: none;}</style><div>div</div><p>ppp</p><h2>h2</h2><a href="#">我是超链接</a>

08-行高

    <style>p{/* line-height: 50px; *//* 自己字号的1.5倍 *//* line-height: 1.5; *//* style width size family */font: italic 700 20px/2 宋体;}</style>

09-内容垂直居中

    <style>div{width: 400px;height: 400px;background-color: pink;text-align: center;/* 文字是单行的 *//* 垂直居中技巧：设置行高属性值 = 自身高度属性值 */line-height: 400px;font-size: 40px;}</style>

10-标签垂直居中

    <style>div{width: 300px;height: 300px;background-color: rgb(215, 9, 9);margin: 0 auto;}</style>

day4

01-选择器-交集

    <style>p.box{color: red;}</style><!-- 找到第一个p带box类的，设置文字颜色是红色 --><p class="box">这是p标签</p><p>ppppppp</p><div>这是div标签</div>

02-选择器-伪类

    <style>/* 悬停时文字颜色是红色 */a:hover{color: black;background-color: red;}a{text-decoration: none;}</style><a href="#">这是超链接</a>

03-背景色

    <style>div{width: 400px;height: 400px;/* background-color: pink; *//* background-color: #ccc; *//* 红绿蓝三原色、a是透明度0-1 *//* background-color: rgba(0, 0, 0, 1); */background-color: rgba(0, 0, 0, .5);}</style>

04-背景图

    <style>div{width: 400px;height: 400px;background-image: url(./images/1.jpg);}</style><div>w400+h400+bgi</div>

05-背景平铺

    <style>div{width: 400px;height: 400px;//背景图默认平铺background-image: url(./images/1.jpg);background-color: pink;/* background-repeat: repeat; *//* 不平铺，图片只显示一个 *//* background-repeat: no-repeat; *//* background-repeat: repeat-x; */background-repeat: repeat-y;}</style>

06-背景图位置

    <style>div{width: 400px;height: 400px;background-image: url(./images/1.jpg);background-color: pink;/* background-repeat: repeat; *//* 不平铺，图片只显示一个 *//* bottom(下)  */background-repeat: no-repeat;/* background-position: center center; *//* background-position: center; *//* background-position: 50px 0; *//* background-position: 50px 50px; */background-position: -50px -100px;/* 正数：向右向下移动；负数：向左向上移动 *//* 注意：背景色和背景图只表示在盒子里面 */}</style>

07-背景图复合属性

<style>div{width: 400px;height: 400px;/* 不分先后顺序 背景色 背景图 背景图平铺 背景图位置 *//* background: pink url(./images/1.jpg) no-repeat center bottom; *//* 背景图如果是英文单词可以颠倒数据 */background: pink url(./images/1.jpg) no-repeat bottom center ;/* 数值：先水平后垂直 */}
</style>

08-显示模式

    <style>/* 块：独占一行；宽度默认是父级；添加宽度都生效 */div{width: 300px;height: 300px;background-color: pink;/* 行内块:一行显示多个，加宽高生效*//* display: inline-block; *//* 行内:不换行；设置宽高不生效，尺寸和内容的大小相同 */display: inline;/*块:独占一行；宽度默认是父级；添加宽度都生效*//*display: block;*/}</style><div>111</div><div>222</div>

09-标签嵌套

    <!-- p和h不能相互嵌套 --><p><h1>一级标题</h1></p><!-- p里面不能包含div --><p><div>divdiv</div></p><!-- p里面不能嵌套p --><!-- a标签里不能嵌套a -->

10-继承

    <style>/* 所有控制文字的属性都能继承，不是控制文字的属性都不能继承 */div{color: red;font-size: 30px;height: 300px;}</style><div>这是div里面的文字<span>这是div里面的span</span></div>

11-继承性注意事项

    <style>/* 无法继承 */div{color: red;font-size: 12px;}/* 单独设置 */a{color: red;}</style><div><a href="#">超链接</a><h1>一级标题</h1></div>

12-层叠性

    <style>div{color: red;color: green;}.box{/* color:red; */font-size: 30px;}</style><div class="box">文字</div>

day5

01-优先级

    <style>body{color: red;}div{color:green !important;}.box{color: blue;}#box{color: orange;}/* ！important不要给继承的添加，自己有样式无法继承父级样式 */</style><!-- 当一个标签使用了多个选择器，样式冲突的时候，到底谁生效 --><div class="box" id="box" style="color: pink;">测试优先级</div>

02-权重叠加计算

  <style>/* #one {color: red;}.son {color: blue;}p {color: green;} *//* (行内, id, 类, 标签) *//* (0, 1, 0, 1) */div #one {color: orange;}/* (0, 0, 2, 0) */.father .son {color: skyblue;}/* 0, 0, 1, 1 */.father p {color: purple;}/* 0, 0, 0, 2 */div p {color: pink;} </style><div class="father"><p class="son" id="one">我是一个标签</p></div>

03-盒子体验模型

    <style>/* 纸盒子，填充泡沫 */div{width: 300px;height: 300px;background-color: pink;/* 边框线 == 纸箱子 */border: 10px solid #000;/* 内边距 == 填充泡沫：出现在内容与盒子边缘之间 */padding: 20px black;/* 外边距：出现在两个盒子之间，出现在盒子的外面 */margin: 30px;}</style>

04-盒子模型

    <style>div{width: 200px;height: 200px;background-color: pink;/* solid：实线 *//* border: 1px solid #000; *//* dashed:虚线 *//* border: 5px dashed #000; *//* dotted:点线 *//* border: 5px dotted #000; */border-bottom: 5px dotted #000;border-top: 5px dotted #000;}</style>

05-盒子模型

   <style>div{width: 300px;height: 300px;background-color: pink;/* 添加了4个方向的内边距 *//* padding属性可以当作复合属性使用，表示单独设置某个方向的内边距 *//* padding最多取四个值 *//* 四值：上 右 下 左 *//* padding：10px 20px 30px 40px *//* 三值：上 左右 下 *//* padding: 10px 40px 80px *//* 两值：上下 左右 */padding: 10px 80px;/*从上开始，顺时针：没有看对面 */}</style>

06-盒子模型-c3(内减模式)

    <style>div{width: 100px;height: 100px;background-color: pink;border: 10px solid #000;padding: 20px;/* 内减 模式 *//* 变成css3的盒子模型，好处：加了boder和padding不需要手动减法 */box-sizing: border-box;}</style>

07-外边距问题

    <style>div{width: 100px;height: 100px;background-color: pink;}/* 两者之间取最大值 */.one{margin-bottom: 60px;}.two{margin-top: 50px;}</style><div class="one">11</div><div class="two">22</div>

08-外边距问题-塌陷

    <style>.father{width: 300px;height: 300px;background-color: pink;/* 1、padding-top: 50px; *//* 2、border: 1px solid #000; *//* overflow: hidden; */}.son{width: 100px;height: 100px;background-color: skyblue;margin-top: 50px;/*4、 display: inline-block; */}</style><div class="father"><div class="son">son</div></div>

09-行内元素的内外边距问题

    <style>span{/* margin: 100px; *//* padding:100px; */line-height: 100px;}</style><!-- 行内元素   内外边距  margin padding--><!-- 如果想要通过margin或padding改变行内标签的位置，无法生效 --><!-- 行内标签的margin-top和bottom不生效 --><!-- 行内标签的padding-top和bottom不生效 --><span>span</span><span>span</span>

day6

01-结构伪类(选择器)

    <style>/* 选中第一个 *//* li:first-child{background-color: pink;} *//* 选中最后一个 *//* li:last-child{background-color: pink;} *//* 选中任意一个 *//* li:nth-child(4){background-color: pink;} *//* 倒数第xx个 */li:nth-last-child(1){background-color: pink;}</style><ul><li>这是第1个li</li><li>这是第2个li</li><li>这是第3个li</li><li>这是第4个li</li><li>这是第5个li</li><li>这是第6个li</li><li>这是第7个li</li><li>这是第8个li</li></ul>

02-结构伪类（公式）

    <style>/* n:0 1 2 3 4 ...... *//* 偶数 *//* li:nth-child(2n){background-color: pink;} *//* 奇数 *//* li:nth-child(2n+1){background-color: pink; } *//* 找到前4个 */li:nth-child(-n+4){background-color: pink;}</style>

03-选择器-伪元素

    <style>.father{width: 300px;height: 300px;background-color: pink;}.father::before{/* content属性必须添加，否则为元素不生效 *//* content: ''; */content: '老鼠';color: green;width: 100px;height: 100px;background-color: blue;/* 默认是行内元素，宽高不生效 */display: block;}.father::after{content:'大米';}</style><div class="father">爱</div>

04-浮动

    <style>div{/* 浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离 */display: inline-block;width: 100px;height: 100px;}.one{background-color: pink;}.two{background-color: skyblue;}</style><!-- <div class="one">one</div><div class="two">two</div> --><div class="one">one</div><div class="two">two</div>

05-体验浮动

    <style>/* img{float: left;} */div{width: 100px;height: 100px;}.one{background-color: pink;float: left;}.two{background-color: skyblue;/* flr */float: left;}</style><!-- 1、图文环绕 --><!-- <img src="./1.jpg" alt=""> --><!-- 大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到大家思考的时刻到了上课看到路上看到了深刻 看到路上看到 --><!-- 2、网页布局 --><div class="one">one</div><div class="two">two</div>

06-浮动的特点

    <style>/* 浮动的标签  顶对齐 *//* 浮动：在一行排列，可以设置宽高 */.one{width: 100px;height: 100px;background-color: pink;float: left;margin-top: 50px;}.two{width: 200px;height: 200px;background-color: skyblue;float: left;/* 因为有浮动，不能生效-盒子无法水平居中 *//* margin: 0 auto; */}.three{width: 300px;height: 300px;background-color: orange;}</style><div class="one">one</div><div class="two">two</div><div class="three">three</div>

07-受浮动影响的情况

    <style>.top{margin: 0 auto;width: 1000px;/* height: 300px; */background-color: pink;}.bottom{height: 100px;background-color: green;}.left{float: left;width: 200px;height: 300px;background-color: #ccc;}.right{float: right;width: 790px;height: 300px;background-color: skyblue;}</style><div class="top"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>

08-清除浮动-额外标签法

    <style>.top{margin: 0 auto;width: 1000px;/* height: 300px; */background-color: pink;}.bottom{height: 100px;background-color: green;}.left{float: left;width: 200px;height: 300px;background-color: #ccc;}.right{float: right;width: 790px;height: 300px;background-color: skyblue;}.clearfix{clear:both}</style><div class="top"><div class="left"></div><div class="right"></div><div class="clearfix"></div></div><div class="bottom"></div>

09-清除浮动-单伪元素

    <style>.top{margin: 0 auto;width: 1000px;/* height: 300px; */background-color: pink;}.bottom{height: 100px;background-color: green;}.left{float: left;width: 200px;height: 300px;background-color: #ccc;}.right{float: right;width: 790px;height: 300px;background-color: skyblue;}.clearfix::after{content: '';/* 伪元素是行内， 要求块*/display: block;clear: both;/* 为了兼容性 */height: 0;visibility: hidden;}</style><div class="top clearfix"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>

10-清除浮动-双伪元素

    <style>.top{margin: 0 auto;width: 1000px;/* height: 300px; */background-color: pink;}.bottom{height: 100px;background-color: green;}.left{float: left;width: 200px;height: 300px;background-color: #ccc;}.right{float: right;width: 790px;height: 300px;background-color: skyblue;}/* .clearfix::before 作用：解决外边距塌陷问题外边距塌陷：父子标签，都是块级，子级加margin会影响父级的位置*//* 清除浮动 */.clearfix::before,.clearfix::after{content: '';display: table;}/* 真正清除浮动的标签 */.clearfix::after{clear: both;}</style><div class="top clearfix"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>

11-清除浮动-overflower

    <style>.top{margin: 0 auto;width: 1000px;/* height: 300px; */background-color: pink;overflow: hidden;}.bottom{height: 100px;background-color: green;}.left{float: left;width: 200px;height: 300px;background-color: #ccc;}.right{float: right;width: 790px;height: 300px;background-color: skyblue;}     </style><div class="top"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>

day7

01-定位-静态

表示块保留在原本应该在的位置，不会重新定位。<style>/* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */.box {/* 静态定位, 默认值, 标准流 */position: static;left: 100px;top: 200px;width: 200px;height: 200px;background-color: pink;}</style><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><div class="box">box</div><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

02-相对定位

   <style>/* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */.box {/* 静态定位, 默认值, 标准流 */position: relative;left: 100px;top: 200px;/* 如果left与right都有，以left为准，如果top和bottom都有以top为准 */right: 200px;bottom: 400px;/* 1、占有原有的位置-没有脱标2、仍然具有标签原本显示模式的特点3、改变位置参照自己原有的位置*/width: 200px;height: 200px; background-color: pink;}</style><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><div class="box">box</div><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

03-绝对定位

    <style>/* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */.box {/* 绝对定位：先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位有父级，但父级没有进行定位，以浏览器窗口为参照物进行定位*/position: absolute;left: 0;top: 0;/* 1、脱标，不占位2、改变标签的显示模式特点，具体行内块特点（在一行共存，宽高生效）*/width: 200px;height: 200px; background-color: pink;}</style><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><div class="box">box</div><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

04-子绝父相

    <style>.father{width: 400px;height: 400px;background-color: pink;}.son{/* 父级相对定位，子级绝对定位 --子绝父相 */position: relative;width: 300px;height: 300px;background-color: skyblue;}.sun{position: absolute;right: 20px;bottom: 50px;width: 200px;height: 200px;background-color: green;  /* 绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照对象进行定位 */}</style><div class="father"><div class="son"><div class="sun"></div></div></div>

05-绝对定位居中

    <style>.box{/* 1、绝对定位的盒子不能使用左右margin auto居中 */position: absolute;/* margin: 0 auto; *//* left:50%,整个盒子移动到浏览器中间偏右的位置 */left: 50%;/* 把盒子向左侧移动：自己宽度的一半 *//* margin-left: -150px; */top:50%;/* margin-top: -150px; */transform: translate(-50%, -50%);width: 400px;height: 300px;background-color: pink;}</style><div class="box"></div>

06-banner定位

    <style>.banner{position: relative;margin: 0 auto;width: 1226px;height: 600px;}.mask{position: absolute;left: 0;bottom: 0;/* 绝对定位的盒子显示模式具备行内块特点，加宽高生效，如果没有宽度也没有内容，盒子尺寸就是0 *//* width: 1226px; *//* 如果子级和父级的宽度相同 */width: 100%;height: 150px;background-color: rgba(0,0,0, .5);}</style><div class="banner"><img src="./images/bg.jpg" alt=""><!-- 遮罩 --><div class="mask"></div></div>

07-定位-固定

    <style>/* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */.box {/* 脱标-不占位置，改变位置参考浏览器窗口，具备行内块特点 */position: fixed;left: 0;top: 0;width: 200px;height: 200px;background-color: pink;}</style><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><div class="box">box</div><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

08-定位-层级关系

    <style>div{width: 200px;height: 200px;}.one{position: absolute;left: 20px;top: 50px;z-index: 1;background-color: pink;}.two{position: absolute;left: 50px;top: 100px;background-color: skyblue;}/* 默认情况下，定位的盒子  后来者居上z-index;整数，取值越大，显示顺序越靠上， 默认值是零z-index必须配合定位才生效*/</style><div class="two"></div><div class="one"></div>

09-光标类型

    <style>div{width: 200px;height: 200px;background-color: pink;/* 手型 *//* cursor: pointer; *//* 工字,表示可以复制 *//* cursor: text; *//* 十字，表示可移动 */cursor: move;}</style>

10-圆角边框

    <style>.box{margin: 50px auto;width: 200px;height: 200px;background-color: pink;/* 一个值表示四个角是相同的 *//* border-radius: 10px; *//* 四个值：从左上顺时针 *//* border-radius: 10px 20px 40px 80px ; *//* border-radius: 10px 40px 80px; */border-radius: 10px 80px;}.one{width: 200px;height: 200px;background-color: pink;/* border-radius: 100px; *//* 50%盒子尺寸的一半 */border-radius: 50%;}/* 胶囊 长方形，border-radius是高度的一般*/.two{width: 300px;height: 200px;background-color: skyblue;border-radius: 100px;}</style><div class="box"></div><div class="two"></div><div class="one"></div>

11-overflow

    <style>.box{width: 300px;height: 300px;background-color: pink;/* 溢出隐藏 *//* overflow: hidden; *//* 滚动 *//* overflow: scroll; *//* 更人性化，根据内容是否溢出来判断是否显示滚动条 */overflow: auto;}</style><div class="box">我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>

12-隐藏标签

    <style>div{width: 200px;height: 200px;}.one{/* 占位隐藏 *//* visibility: hidden; *//* 不占位隐藏 */display: none;background-color: pink;}.two{background-color: green;}</style><div class="one"></div><div class="two"></div>

13-opacity

    <style>div{width: 400px;height: 400px;background-color: pink;opacity: 0.5;}</style><div><img src="./images/product.png" alt=""></div>

day8

01-css精灵图

    <style>span{/* 行内标签加宽高不生效，转为行内块/块 */display: inline-block;width: 18px;height: 24px;background-color: pink;background-image: url(./images/taobao.png);/* 背景图位置属性：改变背景图的位置 *//* 水平方向位置，垂直方向的位置 *//* 想要向左侧移动图片，位置取负数  往上移动, 位置取负数*/background-position: -3px 0;}b{display: block;width: 25px;height: 21px;background-color: green;background-image: url(./images/taobao.png);background-position: 0 -90px;}</style><!-- <img src="./images/taobao.png" alt=""> --><!-- 精灵图一般用行内标签 --><span></span><b></b>

02-背景图缩放

    <style>.box{/* width: 400px;height: 300px; */width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.jpg);background-repeat: no-repeat;/* background-size: 300px; *//* background-size: 50%; *//* 等比例缩放 *//* 图片的宽或高与盒子的尺寸相同了，另一个方向停止缩放--导致盒子可能有留白 */background-size: contain;/* 如果宽或高和盒子尺寸完全相同，导致图片显示不全 *//* background-size: cover; *//* 工作中，图的比例和盒子的比例都是相同的， contain和cover效果完全相同*/}</style>

03-盒子阴影

    <style>.box{width: 200px;height: 200px;background-color: pink;/* box-shadow: 5px 10px 20px 10px green inset; *//* 注意：外阴影，不能添加outset，添加了会导致属性报错 *//* box-shadow: 5px 10px 20px 10px green outset; */}</style>

04-过渡

    <style>/* 过渡配合hover使用,谁变化谁添加过渡属性 */.box{width: 200px;height: 200px;background-color: pink;/* 宽度200，悬停宽度600 花费一秒的时长*//* transition: width 1s, background-color 2s; *//* all表示所有的属性 */transition: all 1s;}.box:hover{width: 600px;background-color: red;}</style>

05-html骨架

<!DOCTYPE html>
<!-- 中文网站 -->
<html lang="zh-CN">
<head><!-- 规定网页的字符编码 --><meta charset="UTF-8"><!-- 解决ie（兼容性差）浏览器的兼容性 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 宽度=设备宽度：移动端网页的时候要用 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

06-SEO三大标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>sjgdjsk</title><!-- meta:desc --><meta name="description" content="sdsadsda"><!-- meta:kw --><meta name="keywords" content="dasdada"><!-- ico：浏览器标题图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body></body>
</html>

html5+css3笔记整理相关推荐

1. 最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了

   基于黑马前端视频学习的CSS3笔记,每一天的知识点都放在一起,方便学习查阅 ==CSS第一天== 一.css简介 二.css语法规范 三.css代码风格 四.css选择器的作用 五.css基础选择器 ...

2. HTML5+CSS3笔记(二)

   一.css基础 派生选择器 ul li <ul> <li></li> </ul> id选择器 #main <div id="main&q ...

3. HTML5+CSS3笔记

   文章目录 HTML5新增特性: CSS3新增特性: **属性选择器** **结构伪类选择器** 伪元素选择器 2.盒子模型: CSS3 弹性盒子(flex box) **flex-direction: ...

4. html5 css 笔记,HTML5+CSS3笔记

   8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? emmet语法? IE 9 + H5新增的语义化标签 除了ie,这些标签默认是块元素header :定义页面头部 nav ...

5. HTML5/CSS3笔记

   前言: 前端无非就是围绕标签.属性.属性值这三个词展开的. (标签也可以叫做元素, 元素的内容是开始标签与结束标签之间的内容) *常规标签 <标签 属性1="属性值1" 属性 ...

6. 尚硅谷web前端HTML5+CSS3笔记

   目录 1尚硅谷-课程简介 2尚硅谷-网页简史 3尚硅谷-HTML简史 4尚硅谷-编写你的第一个网页 5尚硅谷-安装notepad++ 6尚硅谷-自结束标签和注释 7尚硅谷-标签中的属性 8尚硅谷-文档 ...

7. HTML5+CSS3笔记01（标签）

   文章目录 初识web 第一章初识HTML5 1 标签 1.1标签概述 1.2标签的关系 1.3标签属性 1.4HTML5 文档头部相关标签 2 文本控制标签 2.1段落标签 2.2水平线标签 2.3换 ...

8. 2022最新html5+css3笔记

   VsCode快捷键 Chrome调试工具 思维导图 Html 渲染引擎 渲染引擎:浏览器中,专门用来对代码进行解析渲染的部分. Can I use 注意:渲染引擎不同,导致解析相同的代码,速度,效果也 ...

9. 【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记

   文章目录 页面展示 技术要点 代码实现 html代码 CSS代码 用到的图片 页面展示 本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...

最新文章

1. echarts 点亮中国插件研究
2. [编程题] 迷路的牛牛
3. 旧金山字体_旧金山建筑业的兴衰。 施工趋势与历史
4. rsync算法原理及使用
5. ReportViewer教程(10)-给报表分组合计
6. IE8 默认以Web Standards模式显示网页 全面遵循Web标准
7. java雪花算法实现
8. cdrx7拼版工具在哪里_Coreldraw x7/x8/2017/2018高版本保存为CDR 8.0低版本插件
9. 【FPGA教程案例13】基于vivado核的CIC滤波器设计与实现
10. 基于国密算法SM2非证书标识公钥密码技术（IPK）
11. 电子计算机出现的背景,世界第一台电子计算机产生的背景是什么
12. ftp服务器软件 性能对比,常用ftp服务器软件介绍
13. 系统技巧：电脑系统盘实用清理方案介绍
14. 网页禁止鼠标右键复制的解决办法
15. 【Python】html格式转md格式
16. 最好云计算机,教你怎么挑选最合适自己的云电脑
17. html图片的边框属性,css3图片边框border-image的用法
18. Python下载MP4视频
19. 全网唯一，不忽悠的ChatGPT
20. 收支科目不为零_期间损益结转余额为零能结账吗

热门文章

1. 软件配置---重装系统---品牌电脑重启快捷键表
2. 理解 Serenity，Part-1：深度抽象
3. 【Rust日报】2022-09-11 Shuttle 创建和部署带有ShuttleSerenity的 Discord 机器人！
4. Pytorch 损失函数 Mean Squared Error
5. RabbitMQ优化消息阻塞系列（一）解决方案梳理
6. 1.3寸OLED SH1106 IIC驱动显示错误解决方法
7. acm 比赛 专业术语
8. 大一ACM比赛观摩感悟（比赛）
9. BLUP育种值如何计算准确性
10. 服装标准中纰裂试验方法的比较与探讨