基础认知
网页组成
文字 图片 音频 视频 超链接等元素组成
web标准
html:结构 css:表现 javaScript:行为
html骨架
<html> <head> <title>网页的标题</title> </head> <body> 网页的主体, 以后所有的标签 内容都放到body标签里面. </body> </html> html:网页的主体 head:网页的头部 title:网页的标题 body:网页的主体
vscode基本使用
vscode-icons:文件主题 Beautify:格式化HTML css js文件 Chinese:汉化包 open in browser:浏览器的打开方式 vscode快速生成结构骨架 1.1 新建一个以.html结尾的文件 1.2 !+tab键就可以生成(!号必须是英文状态才可以 )(!+enter)(html:5)
html语法规范
html注释
解释说明的作用,给程序员或者其它同事看.
快捷键:ctrl+/
标签分类
双边标签
<p>内容</p>
单边标签
<br>
<hr>
标签关系
父子关系(嵌套关系)
兄弟关系(并列关系)
排版标签
标题标签
<h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> 特点 双边标签 独占一行 文字加粗变大 h1-h6依次递减
段落标签
<p>一段文字</p> 特点: 双边标签 独占一行 段落直接有间隙 会根据浏览器窗口大小自动换行显示
换行标签
<br> 单边标签 强制换行
水平线标签
<hr> 单边标签 显示一条分割线
文本格式化标签
加粗: <b>加粗</b> <strong>加粗</strong> 下划线: <u>下划线</u> <ins>下划线</ins> 倾斜: <i>倾斜</i> <em>倾斜</em> 删除线: <s>删除线</s> <del>删除线</del> 重点掌握 strong em 推荐大家在实际开发中使用单词较长的标签,语义更加强烈.
媒体标签
图像标签
<img src="图片地址/图片路径"> 属性: src:图片的路径(必写属性) alt:替换文本 title:提示文本 width:设置图片宽度 height:设置图片高度 boder:设置边框
文件路径
文件路径
绝对路径:以计算机盘符开始.
<img src="D:\web79\day01\05-素材\baby.jpg" alt="">
<!-- 网址路径 一定要以https://或者以http://才可以出来 -->
<img src="http://www.itheima.com/images/logo.png" alt="">
相对路径:从当前文件开始出发找目标文件的过程,简单的来说相对HTML页面的位置.
同级目录
方法一:目标文件名称
方法二:./目标文件名称(推荐使用vscode提示)
<img src="./dog.gif" alt="">
下级目录
方法一: 目标文件夹/目标文件名称
方法二: ./目标文件夹/目标文件名称(vscode提示)
<img src="./img/cat.gif" alt="">
上级目录
../
<img src="../baby.jpg" alt="">
音频标签
<audio src="./music.mp3" controls autoplay loop></audio> 常见属性: src:音频路径 controls:显示播放控件 autoplay:自动播放 loop:循环播放 音频标签支持3种格式,推荐使用mp3
视频标签
<video src="./video.mp4" controls autoplay loop muted width="300"></video> 常见属性: src:视频的路径 controls:显示播放控件 autoplay:自动播放,但是谷歌需要muted属性才可以实现自动播放 loop:循环播放 width:设置宽度 height:设置高度 视频标签支持3种格式,推荐使用mp4
超链接标签
<a href="链接的地址">跳转的文本</a>
属性:
href:链接跳转地址,必写属性.
target:设置窗口打开方式
取值:
_self:默认值,当前窗口打开页面
_blank:新的窗口打开,保留原始窗口.
示例代码
<a href="https://www.jd.com/">外部链接</a>
<a href="./02-视频标签.html">内部链接</a>
<a href="链接地址"><img src="图片路径">网页元素链接</a>
下载链接 文件的后缀名必须以.exe .zip .rar等后缀名结尾
<a href="./02.zip">下载链接</a>
<a href="#">空链接</a>
列表应用场景
在网页中展示关联性的内容, 例如:新闻列表. 排行榜 网站首页底部导航
三种,无序列表,有序列表,自定义列表
无序列表
应用场景: 新闻列表 网页的导航 网页的侧边栏
<ul> <li>列表的每一项内容</li> <li>列表的每一项内容</li> <li>列表的每一项内容</li> ..... </ul> 无序列表有默认的小圆点后期css处理 ul里面只能包含li标签 li标签里面可以包含任意内容(元素)
有序列表
<ol> <li>列表的每一项内容</li> <li>列表的每一项内容</li> <li>列表的每一项内容</li> ..... </ol> 有序列表有默认的序号,后期css处理 ol里面只能包含li标签 li标签里面可以包含任意内容(元素)
自定义列表
应用场景:网页的底部导航(网页尾部)
<dl> <dt>列表主题</dt> <dd>列表主题的每一项内容</dd> <dd>列表主题的每一项内容</dd> .... </dl> dd前面会有默认的缩进效果 后续css处理 dl标签里面只允许包含dt/dd标签 dt/dd标签里面可以嵌套任意内容(标签) dt/dd是兄弟关系(千万不要写错了哟)
表格标签
表格基本标签
<table>
<tr>
<td></td>
<td></td>
<td></td>
....
</tr>
....
</table>
示例代码:
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>孙以龙</td>
<td>人妖</td>
<td>18</td>
</tr>
<tr>
<td>金波</td>
<td>女</td>
<td>19</td>
</tr>
<tr>
<td>德华</td>
<td>男</td>
<td>16</td>
</tr>
</table>
嵌套关系:
table>tr>td
表格属性
表格属性(table 属性): border:设置边框 width:设置宽度 height:设置高度 align:对齐方式(取值:left(左对齐)|center(居中对齐)|right(右对齐)) rules:细线表格 属性是all(后续使用css修饰) tr属性: align:对齐方式(取值:left(左对齐)|center(居中对齐)|right(右对齐)) bgcolor:背景颜色 示例代码: <table border="1" width="600" height="200" align="center" rules="all"> <tr align="center" bgcolor="red" height="50"> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr align="center" bgcolor="green"> <td>孙以龙</td> <td>人妖</td> <td>18</td> </tr> <tr align="center" bgcolor="pink"> <td>金波</td> <td>女</td> <td>19</td> </tr> <tr align="center" bgcolor="yellow"> <td>德华</td> <td>男</td> <td>16</td> </tr> </table>
表格标题+表头单元格标签
<caption>表格标题</caption>
默认居中加粗显示,位于表格的第一行,td替换th即可.
<th>表头单元格标签</th>
示例代码:
<table border="1" width="600" height="200" align="center" rules="all">
<caption>
<h2>学生信息表</h2>
</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align=" center">
<td>孙以龙</td>
<td>人妖</td>
<td>18</td>
</tr>
<tr align="center">
<td>金波</td>
<td>女</td>
<td>19</td>
</tr>
<tr align="center">
<td>德华</td>
<td>男</td>
<td>16</td>
</tr>
</table>
表格结构标签
表格头部: <thead></thead> 表格主体: <tbody></tbody> 表格尾部: <tfoot></tfoot> 示例代码: <table border="1" width="600" height="200" align="center" rules="all"> <caption> <h2>学生信息表</h2> </caption> <!-- 表格头部 --> <thead> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> </thead> <!-- 表格身体 --> <tbody> <tr> <td>孙以龙</td> <td>人妖</td> <td>18</td> </tr> <tr> <td>金波</td> <td>女</td> <td>19</td> </tr> <tr> <td>德华</td> <td>男</td> <td>16</td> </tr> </tbody> <!-- 表格的底部 --> <tfoot> <tr> <td>总结</td> <td>龙哥真浪</td> <td>龙哥真浪</td> </tr> </tfoot> </table>
表格合并
跨行合并(垂直合并)
rowspan
跨列合并(水平合并)
colspan
合并步骤:
1. 明确合并方式(跨行/跨列)
2. 通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他单元格
• 左右合并→只保留最左的，删除其他单元格
3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
• `rowspan`：跨行合并→垂直方向合并
• `colspan`：跨列合并→水平方向合并
删除的单元格个数= 合并的个数-1
示例代码
<table border="1" width="800" height="200" rules="all" align="center">
<tr>
<td></td>
<td></td>
<!-- 跨行合并 -->
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td></td>
<!-- 跨列合并 -->
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
表单标签
input系列
文本框 <input type="text" placeholder=""> 密码框 <input type="password" placeholder=""> 单选框 <input type="radio" checked name="sex">男 <input type="radio" checked name="sex">女 多选框 <input type="checkbox" checked > 文件上传 multiple:多文件上传 <input type="file" multiple> 提交按钮 <input type="submit" value="提交"> 重置按钮 <input type="reset" value="重置" > 普通按钮 <input type="button"value="普通按钮"> 搜索框 <input type="search"> 图像提交按钮 <input type="image" src="./img/btn.png" alt=""> placeholder:占位符 单选框设置相同的name属性值才可以实现多选一效果 checked 默认被选中
button系列
<button type="submit">提交按钮</button><br> <button type="reset">重置按钮</button><br> <button type="button">普通按钮</button><br>
select下拉系列
select:下拉菜单整体 option:下拉菜单的每一项 selected:默认选中下拉菜单的某一项 示例代码: 所在城市: <select> <option>请选择城市</option> <option selected>上海</option> <option>北京</option> <option>深圳</option> <option>广州</option> <option>武汉</option> </select>
文本域
<textarea placeholder="请您留言"></textarea>
label标签
提高用户体验
使用方法①：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
<label for="nan">男</label>
<input type="radio" name="sex" id="nan">
<label for="nv">女</label>
<input type="radio" name="sex" id="nv">
使用方法②：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
<label>文本框:<input type="text"></label>
语义化标签
无语义化标签
<div>独占一行</div> <span>一行显示多个</span>
有语义化标签
html5新增标签,IE9以上浏览器支持,后续移动端布局经常使用.
<header>网页头部</header> <nav>网页导航</nav> <footer>网页底部</footer> <aside>网页侧边栏</aside> <section>网页区块</section> <article>网页文章</article>
小结
实际项目用地比较多多的标签 <h1>标题标签</h1> <h2>标题标签</h2> <h3>标题标签</h3> <h4>标题标签</h4> <p>段落标签</p> <em>倾斜</em> <strong>加粗</strong> <img src="图像路径" alt="替换文本" title="提示文本"> <a href="链接路径" target=_self>超级链接</a> <a href="链接路径" target=_blank>超级链接</a> <!--无序列表--> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> .... </ul> <!--自定义列表--> <dl> <dt>自定义列表主题</dt> <dd>自定义列表每一项</dd> <dd>自定义列表每一项</dd> <dd>自定义列表每一项</dd> .... </dl> <!--表格基本语法--> <table> <tr> <td></td> <td></td> <td></td> ... </tr> ... <tr> <td></td> <td></td> <td></td> ... </tr> ... </table> <!--表单标签--> 文本框 <input type="text" placeholder=""> 密码框 <input type="password" placeholder=""> 单选按钮(单选按钮需要设置相同的name属性值,才可以实现单选效果) <input type="radio"> 多选框 <input type="checkbox"> 搜索框 <input type="search" placeholder=""> 普通按钮 <button type="button">普通按钮</button> 无语义化标签 <div>独占一行</div> <span>一行显示多个,装不下会自动折行</span>
css体验
css作用:
美化网页,布局页面
选择器{
css属性
}
选择器 {
属性: 值;
属性: 值;
...
}
注意事项:
CSS 标点符号都是英文状态下的
每一个样式键值对写完之后，使用;进行结束
属性名和属性值之间使用:分隔.
<div>抽烟只抽炫赫门,一生只爱一个人</div>
div{
color:red;
font-size:30px;
}
css引入方式
内嵌式
作用于当前页面,后续小项目可以使用.
外链式
作用于多个页面,后续大项目使用
需要使用link标签引入外部的css文件
行内式
作用于当前标签,不建议使用.后续配合js.
基础选择器
标签选择器 类选择器 id选择器 通配符选择器
标签选择器
标签名{
属性:属性值;
属性:属性值;
...
}
例如 div{color:red;}
类选择器
.类名{
属性:属性值;
属性:属性值;
...
/*
一个标签可以有多个类名 但是多个类名之间用空格隔开
一个类名可以多次调用(一个类名可以作用在多个标签身上)
*/
}
例如 .box{color:pink;}
id选择器
#id名{
属性:属性值;
属性:属性值;
...
}
例如 #box{color:green;}
通配符选择器
*{
属性:属性值;
属性:属性值;
...
/*后续使用通配符清除内外边距*/
}
字体属性
字体大小
font-size:20px;
字体粗细
font-weight:400(normal)|700(bold)
字体样式
font-style:normal|italic
字体系列
font-family:字体系列1,字体系列2..;
字体连写
font:style weight size family
font:italic 700 60px 宋体;
字体连写不能随意颠倒顺序,必须遵循;
字体连写必须保留size和family 这2个属性.
文本缩进
段落文本首行缩进 text-indent:2em;
文本对齐方式
text-align:left|center|right; 文本水平居中总结 如果想要 文本 span标签 a标签 img标签 input标签水平居中 对齐,给以上元素的父元素设置text-align即可.
文本装饰属性
下划线
text-decoration: underline;
无装饰线
text-decoration: none;
实际开发应用
取消a标签默认的下划线
a{
text-decoration: none;
}
行高
行高:设置行间距 line-height:50px; 单行文本垂直居中 行高等于当前盒子的高度 font:style weight size/line-height family font:italic 700 30px/40px 微软雅黑 行高与字体连写注意覆盖问题. /* 当前font-size的倍数 */ line-height: 2;
扩展颜色取值(了解)
关键词: background-color: pink; rgb: background-color:rgb(255, 255, 255) rgba: background-color: rgba(0, 0, 0, .5); 十六进制 background-color: #ff6700
选择器进阶
后代选择器 子代选择器 并集选择器 交集选择器 伪类选择器
后代选择器
选择器1 选择器2{
属性:属性值;
...
}
后代选择器可以选中子孙后代
选择器与选择器之间用空格隔开
示例:
.box a{color:red;}
子代选择器
选择器1> 选择器2{
属性:属性值;
...
}
子代选择器只能选中亲儿子
选择器与选择器之间用大于号隔开
示例:
.box>strong{color:pink;}
并集选择器
选择器1, 选择器2{
属性:属性值;
...
}
选择器与选择器之间用逗号隔开;
并集选择器每组选择器之间一行写;
最后一个选择器的后面不要加逗号;
并集选择器可以是任意基础选择器和复合选择器的结合
后续把相同的样式进行书写在一起,减少代码的耦合性.
示例
div,
p,
span,
.box p{color:pink;}
交集选择器
选择器1选择器2{
属性:属性值;
...
}
交集选择器可以理解为既又的原则
选择器与选择器之间不需要任何符号,紧挨着一起.
交集选择器如果有标签,必须把标签写在最前面
示例
div.box{
color:green;
}
伪类选择器
选择器:hover{
属性:属性值;
...
}
鼠标经过时候的样式
a:hover{}
div:hover{}
.box:hover{}
:的前面和后面不能有空格
背景属性
背景颜色 背景图片 背景是否平铺 背景位置 背景颜色 background-color: pink; 背景图片 background-image: url(./img/icon.png); 背景是否平铺 background-repeat: repeat|no-repeat|repeat-x|repeat-y; 背景位置 background-position: x y; 背景位置取值: 方位名词: 水平位置:left|center|right 垂直位置:top|center|bottom background-position:center center； 数字+px: background-position:10px 20px； 方位名词+数字(px): background-position:left 30px；
示例代码:
<h3 class="title">成长守护平台</h3>
.title {
width: 118px;
height: 41px;
/* 背景颜色 */
/* background-color: pink; */
/* 背景图片 */
/* background-image: url(./img/icon.png); */
/* 背景是否平铺 */
/* background-repeat: no-repeat; */
/* 背景位置 */
/* background-position: left center; */
/* 背景简写 */
background: pink url(./img/icon.png) no-repeat left center;
text-indent: 1.5em;
font-size: 14px;
font-weight: 400;
/* 单行文本垂直居中 */
line-height: 41px;
/* 盒子水平居中 */
margin: auto;
}
元素显示模式
根据标签不同的特点，我们可以把标签分成不同的种类。主要分为： 块级元素、行内元素、行内块元素
块级元素
块元素特点: 1 独占一行 2 宽度默认是父元素的宽度,高度由内容撑开. 3 可以设置宽高 代表性的标签 div h系列 p li
行内元素
行内元素特点 1 一行可以显示多个,如果一行装不下自动折行(换行显示) 2 宽度和高度默认由内容撑开 3 设置宽高无效 代表性的标签 a span em strong
行内块元素
行内块元素特点 1 一行显示多个 2 可以设置宽高 代表性标签 input button
元素显示模式转换
转换为块级元素 display: block; 转换为行内块元素 display: inline-block; 转换为行内元素 display: inline
小米侧边栏案例
<div class="box">
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
</div>
/* 1.1 设置大盒子样式 */
.box {
width: 234px;
height: 460px;
background-color: #8c8d91;
}
/* 1.2 转换a标签的显示模式 */
.box a {
/* a标签转换为块级元素 独占一行 */
display: block;
height: 42px;
line-height: 42px;
font-size: 14px;
color: #fff;
/* 取消下划线 */
text-decoration: none;
/* 首行缩进 */
text-indent: 2em;
}
/* 1.3 鼠标经过改变背景颜色 */
.box a:hover {
background-color: #ff6700;
}
(盒子模型)
css三大特性
继承性
特性:子元素可以继承父元素的某些特性(某些样式 子承父业)
控制文字的属性都可以被继承,不是控制文字的属性不能被继承
常见继承的属性如下显示:
color: red; font-style: italic; font-weight: 700; font-size: 30px; font-family: 宋体; text-indent: 2em; text-align: center; line-height: 300px;
继承的特殊情况:
如果浏览器有默认的样式,此时继承依然存在,但是会优先执行浏览器的默认样式
a标签的颜色属性可以被继承,但是被浏览器默认的样式给覆盖.
h系列标签的字体大小被继承,但是被浏览器默认的样式覆盖
高度不能被继承,但是宽度有类似继承的效果
层叠性
相同选择器才会有层叠性
层叠性遵循原则:就近原则.
样式冲突---则层叠(覆盖)
样式不冲突--则叠加(共同作用在一个标签上)
当样式冲突. 只有选择器优先级相同,才会通过层叠性判断.
优先级
不同选择器会有不同的优先级, 优先级高的样式会覆盖优先级低的样式.
判断公式:
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
下面方便大家理解,但是不是很规则.
0 < 0 < 1 < 10 < 100 < 1000 < 无穷大
!important不能提高继承的优先级 只要是继承 优先级最低.
各个选择器的权重:
标签选择器 0 0 0 1 简单记忆 1
类选择器 0 0 1 0 简单记忆10
id选择器 0 1 0 0 简单记忆100
行内样式 1 0 0 0 简单记忆1000
!important如果不是继承,权重最高 天下第一
复合选择器权重会叠加： div p 后代选择器： 0001 + 0001 = 0002
不会有进位的情况，比如 0,0,0, 10
优先级相同,会执行层叠性,写在最后面的会生效.
去除列表标签样式
list-style:none;
盒子模型
盒子模型的组成:内容(content) 内边距(padding) 外边距(margin) 边框(border)
边框(border)
边框属性
边框粗细 边框样式 边框颜色
border-width:5px; border-style:solid|dotted|dashed border-color:red
边框简写
boder:solid 1px red; 无顺序要求
边框单方向设置
上边框 border-top:solid 1px red; 下边框 border-bottom:solid 1px red; 左边框 border-left:solid 1px red; 右边框 border-right:solid 1px red;
盒子实际大小初级计算公式
盒子宽度=左边框+内容的宽度+右边框
盒子高度=上边框+内容的高度+下边框
border可以撑大盒子
如何解决:
1 手动内减
2 测量盒子的时候可以从边框的里面进行量取(不测量边框)
3 自动内减(box-sizing: border-box;)
.box {
width: 400px;
height: 400px;
/* width: 380px;
height: 380px; */
background-color: green;
border: 10px solid #000;
/* css3盒子模型可以解决边框撑大盒子问题(自动内减) */
box-sizing: border-box;
}
内边距(padding)
内容区域到边框的距离
上 右 下 左 padding:10px; 上下 左右 padding:20px 30px; 上 左右 下 padding:20px 30px 40px; 上 右 下 左 padding:20px 30px 40px 50px; 单方向设置 padding-top:30px; padding-bottom:40px; padding-left:50px; padding-right:60px;
盒子终极计算公式
盒子的宽度=左右边框+左右内边距+左右内容
盒子的高度=上下边框+上下内边距+上下内容
边框与padding不会撑大盒子特殊情况
当子元素不给宽度的时候, 子元素默认宽度就是父元素的宽度(父元素的100%)
此时给左右的边框和左右的内边距不会撑大盒子.
css3盒子模型
边框和内边距都会撑大盒子
解决办法
1 .手动内减
2.自动内减(box-sizing: border-box;)
外边距(margin)
盒子到盒子之间的距离
上 右 下 左 margin:10px; 上下 左右 margin:20px 30px; 上 左右 下 margin:20px 30px 40px; 上 右 下 左 margin:20px 30px 40px 50px; 单方向设置 margin-top:30px; margin-bottom:40px; margin-left:50px; margin-right:60px;
margin正常现象
水平布局的盒子,左右的 margin值互不影响
最终的距离为margin左右的和
<div class="box1"></div><div class="box2"></div>
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
margin-right: 20px;
}
.box2 {
background-color: green;
margin-left: 30px;
}
margin合并现象
垂直布局的块级元素 上下 margin会合并.
最终的距离为margin的最大值
解决办法:
开发避免就可以,只设置一个盒子的上下外边距即可.
<div class="box1"></div> <div class="box2"></div>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: green;
/* margin-bottom: 30px; */
}
.box2 {
background-color: pink;
margin-top: 40px;
}
margin塌陷现象
互相嵌套块级元素, 如果给子元素设置margin-top会作用在父元素身上,这种现象就叫嵌套块级元素塌陷
解决办法:
1 给父元素设置 padding-top或 border-top
2 给父元素设置 overflow: hidden;
3 把子元素转换为行内块 display: inline-block;
4 浮动 绝对定位 相对定位的 盒子不会有嵌套块级元素外边距塌陷现象
<div class="father">
<div class="son"></div>
</div>
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
/* padding-top: 1px; */
/* border-top: 1px solid transparent; */
/* overflow: hidden; */
}
.son {
display: inline-block;
/* float: left; */
margin-top: 20px;
width: 200px;
height: 200px;
background-color: purple;
}
行内元素设置内外边距 无效
水平布局设置 padding和margin 有效
垂直布局设置 padding和margin 无效
如果要垂直布局padding和margin生效解决办法
转换为块或行内块
padding和margin 以后如何选择
父子关系 :padding
兄弟关系: margin
(浮动)
结构伪类选择器nth-child || nth-of-type
根据HTML结构选择标签,减少对类名的依赖.
结构伪类选择器的权重是0010.
<ul>
<li>我是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>我是li里的第9个孩子</li>
<li>我是li里的第10个孩子</li>
</ul>
/* 匹配父元素里面的第一个孩子 */
ul li:first-child {
background-color: red;
}
/* 匹配父元素里面的最后一个孩子 */
ul li:last-child {
background-color: skyblue;
}
/* 匹配父元素里面的某一个孩子 */
ul li:nth-child(6){
background-color: purple;
}
/* 匹配父元素里面倒数第几个孩子 */
ul li:nth-last-child(3){
background-color: pink;
}
nth-child(n)
1.n 可以是数字， 数字是几，就选择第几个孩子。
ul li:nth-child(6) { } 选择第6个孩子
n 还可以是 关键字 比如 odd even
/* 选中偶数的孩子 */ ul li:nth-child(even) { background-color: pink; } /* 选中奇数的孩子 */ ul li:nth-child(odd) { background-color: skyblue; }n 还可以是 公式。
n 是从 0开始 012345...
2n 是 偶数
2n + 1 是 奇数
5n 5的倍数
n+5 从第五个开始 包含第五个 一直到最后.
-n+5 选中前5个 包含第五个
/*2n */ ol li:nth-child(2n) { background-color: tomato; } /*2n+1 */ ol li:nth-child(2n+1){ background-color: violet; } /*5n */ ol li:nth-child(5n){ background-color: yellowgreen; } /* n+5 从第五个开始 包含第五个 一直到最后.*/ ol li:nth-child(n+5) { background-color: yellowgreen; } /*-n+5 选中前5个 包含第五个*/ ol li:nth-child(-n+5) { background-color: yellowgreen; }
伪元素
伪元素就是利用css来创建标签.伪元素创建出来的标签属于行内元素.
在父元素内容的最前面添加一个伪元素
E:::before{
content: '';
}
在父元素内容的最后面添加一个伪元素
E::::after{
content: '';
}
使用委员插入必须要指定content属性
标准流
一个完整的网页布局,只有标准流是不能满足需求,打破常规布局,让多个块级元素水平一行显示并且没有间隙.
网页布局: 标准流 + 浮动+ 定位
标准流布局规则
块级元素:
从上往下 垂直布局 独占一行
行内 /行内块元素:
从左往右 水平布局 一行转不下自动换行
浮动
浮动的作用
早期的作用:图文环绕
现在的作用:布局页面,让垂直布局的盒子变成水平布局
浮动的特点
1 浮动元素会脱离标准流(简称脱标),不占位置,被后面的标准流占有.
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
}
.box2 {
/* 右浮动 */
float: right;
background-color: red;
}
.box3 {
background-color: green;
}
2 浮动的元素比标准流高半个级别,可以覆盖标准流的元素.
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
}
.box2 {
/* 左浮动 */
float: left;
background-color: red;
}
.box3 {
padding: 40px;
background-color: green;
}
浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动
* { margin: 0; padding: 0; } div { float: left; width: 200px; height: 200px; } .box1 { background-color: pink; } .box2 { background-color: red; } .box3 { background-color: green; }4 浮动的元素会受到上面元素边界的影响
* { margin: 0; padding: 0; } div { width: 200px; height: 200px; } .box1 { float: left; background-color: pink; } .box2 { /* 右浮动 */ float: right; background-color: red; } .box3 { background-color: green; }5 5 浮动的元素有特殊效果(浮动元素具有行内块元素特性并且顶部对齐.)
一行可以显示多个,可以设置宽高
块级元素浮动之后不设置宽高,默认由内容撑开
行内元素浮动之后设置宽高有效
* { margin: 0; padding: 0; } div { float: left; width: 200px; height: 200px; } .box1 { background-color: pink; } .box2 { background-color: red; } .box3 { background-color: green; } span { float: left; width: 200px; height: 200px; background-color: purple; } p { width: 200px; height: 200px; float: left; background-color: yellow; }<div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <span>设置宽高有效</span> <p>块级元素浮动之后不设置宽高默认由内容撑开</p>浮动注意事项:
1 浮动的盒子搭配标准流的父元素一起使用.(标准流:垂直布局 ;浮动:水平布局)
2 浮动的时候,当父元素装不下浮动的子元素,此时子元素会换行显示.
3 子浮父不浮 兄弟一起浮 一浮全浮
CSS书写顺序
不同的css书写顺序会影响浏览器的渲染性能,推荐大家遵循以下的书写方式.
(定位)
定位的应用场景
为什么需要使用定位?
1 解决盒子之间的层叠(叠加)问题,可以层叠到其它盒子上面
2 页面滚动,盒子固定在页面某个位置不动.
定位的使用步骤:
1 设置定位的方式
2 设置偏移值
定位方式
偏移值
定位的语法
.blue {
/* 定位的使用步骤 */
/* 1 设置定位的方式 绝对定位*/
position: absolute;
/* 2 设置偏移值 */
top: 150px;
left: 150px;
background-color: blue;
}
静态定位
position: static; 特点: 1 静态定位就是普通的标准流 2 静态定位设置偏移值无效.
相对定位
position: relative; 特点: 1 需要配合方位属性来移动位置 2 想对于自身原来的位置进行移动 3 在页面中占位置-没有脱标
绝对定位
position: absolute; 特点 1 需要配合方位属性来移动位置 2 祖先元素如果没有定位,默认相对于浏览器进行移动;祖先元素有定位,相对于最近一级带有定位的祖先元素移动位置. 3 在页面中不占位置-已经脱标
子绝父相
子绝父相:
子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小.
子绝父绝:
实际开发中在子绝父相的时候,发现父元素有绝对定位,此时父元素里面的孩子直接子绝即可.
绝对定位的盒子水平垂直居中
普通做法:
/* 1 让子盒子移动父元素的一半(往右) */left: 50%;
/*让子盒子移动父元素的一半(往下) */
top: 50%;
/* 2 在让子盒子往左移动自身宽度的一半 使用margin负值 */
/* 普通做法 */
margin-left: -150px;
/* 在让子盒子往上移动自身高度的一半 使用margin负值 */
margin-top: -100px;
优化做法:
/* 1 让子盒子移动父元素的一半(往右) */
left: 50%;
/*让子盒子移动父元素的一半(往下) */
top: 50%;
/* 2 在让子盒子往左移动自身宽度的一半 使用margin负值 */
/* 优化做法 就业班第一天课会讲 */
transform: translate(-50%, -50%);
固定定位
position: fixed; 特点 1 需要配合方位属性来移动位置 2 相对于浏览器的可视区域进行移动位置 3 不占位置-脱标
定位的特殊性
行内元素加了绝对/固定定位可以设置宽高
块级元素加了绝对/固定定位,如果不给宽度,宽度由内容撑开
嵌套块级元素加了绝对/固定定位,不会有塌陷问题.
元素层级
不同布局方式元素的层级关系：
标准流 <浮动 <定位
定位元素之间的层级关系相同(相对定位 绝对定位 固定定位)
z-index属性可以修改定位元素之间的层级关系
z-index: 数字(默认值是auto );
z-index属性的属性值千万不要加单位
数字越大,层级越高.只有定位的盒子才有 z-index属性
示例代码:
<div class="blue"></div> <div class="green"></div> <div class="red"></div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 300px;
height: 300px;
}
.red {
/* 相对定位 */
position: relative;
left: 0;
top: 0;
z-index: 2;
background-color: red;
}
.blue {
/* 绝对定位 */
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
background-color: blue;
}
.green {
/* 固定定位 */
position: fixed;
left: 200px;
top: 200px;
z-index: 9999;
background-color: green;
}
垂直对齐方式
场景：解决行内/行内块元素垂直对齐问题 vertical-align属性只对行内或行内块元素有效.
/* 默认值 基线对齐 */
vertical-align: baseline;
/* 底部对齐 */
vertical-align: bottom;
/*中线对齐 */
vertical-align: middle;
/* 顶部对齐 */
vertical-align: top;
滤镜
blur()里面跟数值,数值越大图片越模糊 filter: blur(5px); 国家发生重大事故 网站变灰 filter: grayscale(100%);
圆角边框
border-radius
左上角开始赋值 顺时针
左上角 右上角 右下角 左下角
.box {
width: 300px;
height: 300px;
background-color: #ffa500;
/* 圆形 边框圆角为宽高的一半 */
/* border-radius: 150px; */
border-radius: 50%
}
.box1 {
width: 200px;
height: 60px;
background-color: purple;
/* 胶囊按钮 盒子高度的一半*/
border-radius: 30px;
text-align: center;
line-height: 60px;
font-size: 20px;
color: #fff;
}
.box2 {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 0 50%;
}
overflow
.box {
width: 200px;
height: 300px;
background-color: pink;
/* 默认值 溢出部分可见 */
/* overflow: visible; */
/* 溢出部分隐藏 */
/* overflow: hidden; */
/* 无论是否溢出都会显示滚动条 */
/* overflow: scroll; */
/* 根据是否溢出 自动显示滚动条 */
overflow: auto;
/* 注意定位的盒子慎用overflow: hidden; */
}
扩展:
单行文本溢出显示省略号:
/* 1 文字装不下 让文字强制在一行显示 */
white-space: nowrap;
/* 2 超出部分溢出隐藏 */
overflow: hidden;
/* 3 隐藏的部分显示省略号 */
/* ellipsis 省略号意思 */
text-overflow: ellipsis;
多行文本溢出显示省略号:
overflow: hidden; text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 / display: -webkit-box; / 限制在一个块元素显示的文本的行数 / -webkit-line-clamp: 2; / 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical;
注意:
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端
元素本身隐藏
/* 元素本身隐藏 占位置 */ visibility: hidden; /*元素本身隐藏 不占位置 */ display: none;
重要
元素隐藏
display: none;
元素显示
display: block;
字间距
letter-spacing: 5px; 英文 字母之间的间距 中文 字之间的间距
单词间距
word-spacing: 10px; 英文单词之间的间距 中文无效
元素整体透明度
opacity:0.5; 属性值：0~1之间的数字 1：表示完全不透明 0：表示完全透明 opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
细线边框
border-collapse: collapse;
css画三角形
1 画一个盒子
2 设置不同边框的颜色
3 宽高设置为0 仅保留边框
4 选择其中一个三角形设置颜色 ,其余的三角形设置为透明色
.box{
/*width: 400px;
height: 400px; */
width: 0;
height: 0;
background-color: transparent;
border-top: 50px solid pink;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
链接伪类选择器
/* 未访问时候的状态 */
a:link {
color: pink;
}
/* 鼠标点击后的状态 */
a:visited {
color: purple;
}
/* 鼠标悬停时的状态 */
a:hover {
color: green
}
/* 鼠标按下未弹起时的状态 */
a:active {
color: orange;
}
链接伪类选择器权重是10
书写顺序LHHA
焦点伪类选择器
只对表单元素有效
input:focus {
background-color: orange;
}
属性选择器
通常借助html属性来选择元素,通常用于input标签
选择具有att属性的E元素。
E[att]{}
选择具有att属性且属性值等于val的E元素。
E[att="val"]{}
input[type=text] {
background-color: red;
}
input[type=password] {
background-color: green;
}
精灵图
精灵图:
项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点:
减少服务器发送次数，减轻服务器的压力，提高页面加载速度
使用步骤:
1.创建一个盒子, 设置盒子的尺寸和小图尺寸相同
2.将精灵图设置为盒子的背景图片
3.修改背景图位置
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
.s1 {
display: block;
width: 20px;
height: 20px;
/* background-color: pink; */
background-image: url(./images/sprites.png);
/* 水平位置 垂直位置 */
/* 精灵图位置往左 往上都是负值 */
background-position: -139px -7px;
}
背景图大小
background-size:cover|contain|百分比|数字
.box {
width: 1000px;
height: 300px;
background-color: pink;
background-image: url(./images/jd.jpg);
background-repeat: no-repeat;
/* 关键字 */
/* contain 背景图片等比例缩放 显示宽度 有可能铺不满整个盒子 */
/* background-size: contain; */
/* cover 背景图片等比例缩放 背景图片铺满整个盒子 但是图片有显示不全*/
background-size: cover;
/* 数值 百分比 */
/* 2个数值 第一个表示宽度 第二个表示高度 */
/* background-size:400px 200px; */
/* 1个数值 第一个表示宽度 第二个数值默认值 auto */
/* background-size: 400px auto; */
/* 百分比 参考的是当前盒子自身宽度的百分比 */
/* background-size: 50% 50%;
background-size: 100% 100%; */
}
连写扩展:
background: purple url(./images/dog.gif) 0 0/100px 100px no-repeat;
文字阴影
text-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色; text-shadow: -8px 0px 9px red;
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影面积 阴影颜色 内/外阴影 ; box-shadow: 2px -10px 6px 5px rgba(0, 0, 0, .5) ;
默认是外阴影 但是outset不要书写 否则报错
过渡
transition:过渡属性 过渡时间;
过渡 就是让元素慢慢的发生变化,过渡通常搭配hover一起使用
transition属性给需要过渡的元素本身加
谁做过渡到给谁加
.box {
width: 400px;
height: 200px;
background-color: red;
/* transition: 过渡属性 过渡时间 */
/* 让多个属性发生过渡 中间用逗号隔开 */
/* transition: width 2s, height 2s; */
/* all 所有的属性都发生过渡 */
transition: all 3s;
}
/* 过渡 就是让元素慢慢的发生变化 */
.box:hover {
/* 鼠标移入有效果 移除没有效果 */
/* transition: all 3s; */
width: 600px;
height: 300px;
}