黑马前端H5+CSS基础笔记整理(自用)
一、HTML初识
(一)基础认知
1.基础概念铺垫
(1)认识网页
组成部分-文字、图片、音频、视频、超链接
本质 - 代码
转换 - 浏览器(解析+渲染)
(2)浏览器
网页显示、运行的平台(必备)
五大:IE、火狐Firefox、谷歌Chrome、Safari、欧朋
渲染引擎(浏览器内核)不同,解析代码时的速度、性能、效果也不同
(3)Web标准
使不同的浏览器展示效果统一
结构 - HTML - 页面元素和内容
表现 - CSS - 网页元素的外观和位置等页面样式
行为 - JavaScript - 网页模型的定义与页面交互
Web标准要求页面实现:结构、表现、行为三层分离
2.HTML初体验
HTML(Hyper Text Markup Language)超文本标记语言
- 专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
标签标记:成对<><>
HTML页面固定结构:整体html
、头部head
、标题title
、主体body
- 通过特定的HTML标签进行描述
开发工具使用:VSCode
- 添加骨架:英文状态 ->
shift+!
- 运行:右键 -> open in default browsers
3.语法规范
HTML注释
- 快捷键:ctrl+/
HTML标签结构
- 双标签:开始标签+内容+结束标签
-
单标签
<br>
<hr>
<img>
HTML标签之间的关系
-
父子关系(嵌套关系)
-
兄弟关系(并列关系)
(二)HTML标签学习
1.排版标签
标题标签 h1 - h6
- 特点:自动换行(独占一行)、文字加粗变大、从h1→h6文字逐渐减小
段落标签 p
- 特点:自动换行、段落之间存在间隙
换行标签 br
水平线标签 hr
2.文本格式化标签
加粗 b
/ strong
下划线 u
/ ins
倾斜 i
/ em
删除线 s
/ del
注意:后一种语义突出重要性的强调语境
3.媒体标签
(1)图片标签 img
<img src="地址" alt="替换文本" title="提示文本" width="宽度" height="高度">
src
属性:目标图片的路径
alt
属性:替换文本(加载失败时显示的文本)
title
属性:提示文本(鼠标悬停显示的文字)
width
和height
属性:宽度和高度(数字)
- 只需设置其中一个,另一个自动等比例缩放(图片不会变形)
- 同时设置两个,若设置不当此时图片可能会变形
(*)标签介绍
注意:
-
写在开始标签内部
-
可以同时存在多个属性
-
属性之间以空格隔开
-
标签名与属性之间必须以空格隔开
-
属性之间没有顺序之分
(*)路径
绝对路径:目录下的绝对位置(从盘符开始、完整的网址)
相对路径(常用):从当前文件开始出发找目标文件的过程
-
同级目录 - 当前文件和目标文件在同一目录中
<img src="目标图片"> <img src="./目标图片">
-
下级目录 - 目标文件在下级目录中
<img src="文件夹名/目标图片">
-
上级目录 - 目标文件在上级目录中
- …/返回上一级(…/…/返回上两级)
<img src="../目标图片">
(2)音频标签 audio
<audio src="地址" controls autoplay loop></audio>
src
属性:音频的路径
controls
属性:显示播放的控件
autoplay
属性:自动播放(部分浏览器不支持)
loop
属性:循环播放
注意:支持三种格式-MP3、Wav、Ogg
(3)视频标签 video
<video src="地址" controls autoplay muted loop></video>
src
属性:视频的路径
controls
属性:显示播放的控件
autoplay
属性:自动播放(谷歌浏览器中需配合muted实现静音播放)
loop
属性:循环播放
muted
:视频中音频的默认值(初始为静音)
注意:支持三种格式-MP4 、WebM 、Ogg
4.链接标签 a
<a href="地址" target="_blank">超链接文本</a>
<a href="#">空链接</a>
显示特点
-
默认文字有下划线
-
未点击过时,默认文字显示蓝色
-
点击过后,文字显示紫色(清除浏览器历史记录可恢复蓝色)
属性
-
href
跳转地址(网址或本地)- 若还不知道跳转地址,
href
书写为#
(空链接),此时点击后返回网页顶部
- 若还不知道跳转地址,
-
target
目标网页的打开形式_self
:默认值,在当前窗口中跳转(覆盖原网页)__blank
:在新窗口中跳转(保留原网页)
二、HTML基础
(一)列表标签
1.应用场景
在网页中按照行展示关联性的内容
无序列表最常用,有序列表偶尔用,自定义列表底部导航用
2.无序列表 ul
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
标签组成
ul
表示无序列表的整体,用于包裹li
标签li
表示无序列表的每一项,用于包含每一行的内容
显示特点:每一项前默认显示圆点标识
注意:ul
标签只允许包含li
标签,li
标签可以包含任意内容
3.有序列表 ol
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
标签组成
ol
表示有序列表的整体,用于包裹li
标签li
表示有序列表的每一项,用于包含每一行的内容
显示特点:每一项前默认显示序号标识
注意:ol
标签同样只允许包含li
标签,li
标签可以包含任意内容
4.自定义列表 dl
<dl>
<dt>主题一</dt>
<dd>主题一项目1</dd>
</dl>
标签组成
dl
表示自定义列表的整体,用于包裹dt/dd标签dt
表示自定义列表的主题dd
表示自定义列表的针对主题的每一项内容
显示特点:dd
前会默认显示缩进效果
注意:dl
标签只允许包含dt
/dd
标签,dt
/dd
标签可以包含任意内容
(二)表格标签 table
1.标签组成
table
表格整体,可用于包裹多个tr
border
= “数字” --> 边框宽度width
= 数字 --> 表格宽度height
= 数字 --> 边框高度- 注意:实际开发时针对样式效果推荐用CSS设置
caption
表格标题,默认在表格整体顶部居中显示
tr
表格每行,可用于包裹td
th
表头单元格,通常用于表格第一行,默认内部文字加粗并居中显示
td
表格单元格,可用于包裹内容
标签的嵌套关系:table > caption + tr > th + td
2.结构标签
thead
表格头部
tbody
表格主体
tfoot
表格底部
注意:表格结构标签用于包裹tr标签,可省略
标签的嵌套关系:table > thead/tbody/tfoot > tr > th/td
3.合并单元格
rowspan
= “合并单元格的个数” 跨行合并,将多行的单元格垂直合并
colspan
= “合并单元格的个数” 跨列合并,将多列的单元格水平合并
注意:
- 通过左上原则,上下合并保留最上,左右合并保留最左
- 同一个结构标签中的单元格才能合并,不能跨结构合并
- 写在保留的
td
/th
标签中
(三)表单标签 form
1.input系列标签
<input type=" +++ ">
(1)基本介绍
场景:在网页中显示收集用户信息的表单效果
通过type
属性值的不同,展示不同的效果,默认无自动换行
(2)表单域 form
(3)文本框 text
场景:用于输入单行文本(默认值)
<input type="text" placeholder="占位符">
常用属性:
value
= “” 用户输入的内容,代码中设置好相当于默认值(提交之后会发送给后端服务器)name
= “” 当前控件的含义placeholder
= “” 占位符,提醒用户输入内容的文本
注意:后端接收到数据的格式是 name的属性值 = value的属性
(4)密码框 password
场景:用于输入密码
<input type="password" placeholder="占位符">
常用属性(同文本框)
(5)单选框 radio
场景:用于多选一
<input type="radio" name="分组名" id="" checked>
常用属性:
value
= “” 用户选择的数据name
= “” 分组,拥有相同name属性的单选框为一组,一组中只选其一checked
默认选中,一组只能设置一个
(6)复选框 checkbox
场景:用于多选多
<input type="checkbox" name="" checked>
常用属性:
value
用户选择的数据name
= “” 当前控件的含义checked
默认选中
(7)文件选择 file
场景:用于之后上传文件
<input type="file" multiple>
常用属性:
multiple
多文件选择
(8)按钮
提交按钮 submit
用于提交,点击之后提交数据给后端服务器
重置按钮 reset
用于重置,点击之后恢复表单默认值
普通按钮 button
默认无功能,之后配合js添加功能
value
= " " 按钮显示文字
注意:需要与form
配合才能使用功能,具体为将提交或重置的表单标签放入表单域标签
<form action="">
<input type="text" placeholder="占位符">
<input type="submit" value="提交按钮">
<input type="reset">
<input type="button" value="普通按钮">
</form>
2.按钮标签 button
<button type="reset">重置按钮</button>
type
= " submit / reset / button "
注意:谷歌浏览器中button
默认是提交按钮
3.下拉列表 select
<select>
<option>北京</option>
<option selected>深圳</option>
</select>
标签组成
select
标签:下拉菜单的整体option
标签:下拉菜单的每一项
属性:selected
下拉菜单的默认选中
4.文本域标签 textarea
<textarea cols="60" rows="30"></textarea>
属性:
cols
= “数字” 文本域的可见宽度rows
= “数字” 文本域的可见行数
注意:
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果推荐使用CSS设置
5.标签 lable
场景:常用于绑定内容与表单标签的关系
使用方法1:
-
使用
label
标签将内容包裹 -
在表单上添加
id
属性 -
label
标签for
属性的属性值设置与表单id
的属性值相同<input type="radio" name="sex" id="man"> <label for="man">男</label>
使用方法2:
-
使用
label
标签将内容与表单标签一起包裹 -
删除
label
标签的for
属性<label><input type="radio" name="sex">女</label>
(四)语义化标签
没有语义的网页布局标签div
和span
-
div
标签:独占一行、宽度默认占满一行,高度默认由内容撑开 -
span
标签:一行可显示多个、宽度和高度都默认由内容撑开
有语义的布局标签(了解)
-
header
:网页头部 -
nav
:网页导航 -
footer
:网页底部 -
aside
:网页侧边栏 -
section
:网页区块 -
article
:网页文章 -
注意:
- HTML5推出,手机端网页使用
- 标签显示特点与
div
相同
(五)字符实体
在网页中展示特殊符号效果时,使用字符实体替代
结构:&英文;
常见字符实体:
- 空格
- 大于
>
- 小于
<
注意:多个空格网页只认识一个(HTML空格合并现象),需字符实体表示
三、CSS基础
(一)CSS引入方式
CSS:层叠样式表
1.内嵌式
<style>
选择器{
属性名:属性值;
}
</style>
CSS写在style
标签中
位置:head
标签中的title
标签下边
注意:选择器-查找标签
作用范围:当前页面
使用场景:小案例
2.外联式
<link rel="stylesheet" href="my.css" />
CSS写在一个单独的.css文件中
位置:head
标签中的title
标签下边,通过link
标签在网页中引入
作用范围:多个页面
使用场景:项目中
rel
属性 - 关系,stylesheet
样式表href
属性 -.css
文件地址
3.行内式
<标签名 style="属性名:属性值;">内容</标签名>
CSS写在标签的style
属性中
作用范围:当前标签
使用场景:配合js使用
(二)基础选择器
选择器的作用:选择页面中对应的标签,方便后续设置样式
1.标签选择器
标签名 {CSS属性名:属性值;}
作用:通过标签名,找到页面中所有这类标签,设置样式
注意:无论嵌套关系多深,都能找到对应的标签
2.类选择器
.类名 {CSS属性名:属性值;}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
注意:
- 所有标签上都有
class
属性,其属性值称为类名 - 类名可以由数字、字母、下划线、中划线组成,不能以数字或中划线开头
- 一个标签可以同时有多个类名,类名之间以空格隔开
- 类名可以重复,一个类选择器可以同时选中多个标签
- 实际开发中会遇到冗余代码的抽取 (可以将一些公共的代码抽取到一个公共的类中去)
3.id选择器
#id属性值 {CSS属性名:属性值;}
作用:通过id
属性值,找到页面中带有这个id
属性值的标签,设置样式
注意:
- 所有标签上都有
id
属性 id
属性值在页面中唯一不可重复- 一个标签上只能有一个
id
属性 - 一个
id
选择器只能选中一个标签 - 配合js一起使用(获取DOM方法getElementById,页面出现多个id则获取不到)
4.通配符选择器
* {CSS属性名:属性值;}
作用:找到页面中所有的标签,设置样式
注意:
- 极少使用
- 小页面中常用于除去标签默认的内外边距
margin:0;
padding:0;
(三)字体和文本样式
1.字体样式
(1)字体大小 font-size
取值:数字+px
注意:
- 谷歌浏览器默认文字大小是16px
- 单位需设置,否则无效
(2)字体粗细 font-weight
取值:
- 关键字:
- 正常
normal
- 加粗
bold
- 正常
- 纯数字:100~900的整百数(400正常700加粗)
注意: 不是所有字体都提供了九种粗细,部分取值页面中无变化
(3)字体样式 font-style
取值:
- 正常(默认值)
normal
- 倾斜
italic
(4)字体系列 font-family
常用取值:具体字体1,具体字体2,具体字体3,…,字体系列名;
常见字体系列:
- 无衬线字体
sans-serif
- 衬线字体
serif
- 等宽字体
monospance
渲染规则:
- 从左往右按照顺序查找,若电脑中未安装该字体,则显示下一个
- 如果都不支持,会根据操作系统,显示最后字体系列的默认字体
注意:
- 如果字体名称中存在多个单词,推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示
(*)样式层叠问题
若同一标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效。
(5)字体font复合属性
font : style weight size family;
速记:稍微舒服swsf
省略要求:只能省略前两个,若省略相当于设置了默认值
单独和连写形式同时设置方法:
- 单独样式写在连写的下面
- 单独样式写在连写的里面
2.文本样式
(1)文本缩进 text-indent
取值:
- 数字+px
- 数字+em(推荐)
- 1em = 当前标签的
font-size
的大小
(2)文本水平对齐方式 text-align
取值:
- 左对齐
left
- 右对齐
right
- 居中对齐
center
注意:
- 内容对齐,可用于文本、
span
标签/a
标签、input
标签/img
标签 - 以上元素的对齐方式需在其父元素中设置
(3)文本修饰 text-decoration
取值:
- 下划线
underline
- 删除线
line-through
- 上划线
overline
- 无装饰线
none
注意:开发中常用 text-decoration:none
清除a
标签默认的下划线
(4)行高 line-height
取值:数字+px 或 倍数(当前标签font-size的倍数)
应用:
- 让单行文本垂直居中,可以设置
line-height:文字父元素高度
- 网页精准布局时,会设置
line-height:1
,用来取消上下间距
行高与font复合属性:
-
注意覆盖
font:style weight size/line-height family;
(四)Chrome调试工具
1.打开方式
右击 --> 检查
elements
:显示当前页面的html结构
styles
:显示当前标签的样式
2.元素
方法一:在左侧elements
中点击需要调试的元素
方法二:点击左上角按钮后,直接在网页中点击需要调试的元素
3.功能
控制样式
- 修改属性值:直接点击属性值修改
- 添加属性:在上一个属性的分号后点击一下,直接添加
- 控制样式生效:点击属性前的小框即可
- 注意:调试工具仅仅只是当前的调试效果,需要在代码中修改才能永久保留
4.特殊情况
styles中没有设置的选择器
- 含义:选择器写错
- 原因:
- 选择器单词拼错
- 选择器结构写错
样式上有删除线
- 含义:样式失效
- 原因:
- 样式被注释了
- 样式被覆盖了
样式前有小三角
- 含义:样式报错
- 原因:
- 属性值后没写分号
- 出现中文标点
- 属性名或属性值单词拼错
拓展-颜色
属性名:
- 文字颜色
color
- 背景颜色
background-color
属性值:
- 关键词:预定义的颜色名
- 例:red green blue yellow
- rgb表示法:红绿蓝三原色,每项取值范围0~255
- 例:rgb(0,0,0) rgb(255,0,0)
- rgba表示法:红绿蓝三原色,加上a表示透明度,取值范围0~1
- 例:rgba(0,0,0,0.3) rgba(255,0,0,0.6)
- 十六进制表示法:#开头,将数字转换成十六进制表示
- 例:#000000 #ff0000 #e92322
拓展-标签水平居中
margin:0 auto
实现div
、p
、h
(大盒子)水平居中
直接给当前元素本身设置
一般用于固定宽度的盒子,若大盒子没有设置宽度,默认占满父元素的宽度
四、CSS进阶
(一)选择器进阶
复合选择器
1.后代选择器
父选择器 后代选择器{CSS}
作用:根据HTML标签的嵌套关系,选择父元素 后代中 满足条件的元素
结果:在父选择器所找到标签的后代(儿子、孙子、重孙子…)中,找到满足后代选择器的标签,设置样式
注意:
- 选择器可以用任意一种基础选择器
- 后代包括儿子、孙子、重孙子…
- 后代选择器中,选择器与选择器之间以
空格
隔开
2.子代选择器
父选择器 > 子代选择器{CSS}
作用:根据HTML标签的嵌套关系,选择父元素 子代中 满足条件的元素
结果:在父选择器所找到标签的子代(儿子)中,找到满足子代选择器的标签,设置样式
注意:
- 子代只包括儿子
- 子代选择器中,选择器与选择器之间以
>
隔开
3.并集选择器
选择器1,选择器2{CSS}
作用:同时选择多组标签,设置相同的样式
结果:找到选择器1和选择器2选择的标签,设置样式
注意:
- 每组选择器以
,
分隔 - 每组选择器既可以是基础选择器也可以是复合选择器
- 每组选择器通常一行写一个,提高代码的可读性
4.交集选择器
选择器1选择器2{CSS}
作用:选中页面当中 同时满足 多个选择器的标签
结果:(既又原则)找到页面中,既能被选择器1选中,又能被选择器2选中的标签,设置样式
注意:
- 选择器之间紧挨着,没有分隔
- 选择器中的标签选择器必须写在最前面
5.hover伪类选择器
选择器:hover{CSS}
作用:选中鼠标悬停在元素上的状态,设置样式
注意:
- 伪类选择器选中元素的某种状态
- 任何标签都可以添加
6.Emmet语法
作用:简写,快速生成代码
语法:
-
标签名
div
<div></div>
-
类选择器
.red
<div class="red"></div>
-
id选择器
#one
<div id="one"></div>
-
交集选择器
p.red#one
<p class="red" id="one"></p>
-
子代选择器
ul>li
<ul> <li></li> </ul>
-
内部文本
ul>li{li的内容}
<ul> <li>li的内容</li> </ul>
-
创建多个
-
ul>li*3
<ul> <li></li> <li></li> <li></li> </ul>
-
ul>li{$}*3
<ul> <li>1</li> <li>2</li> <li>3</li> </ul>
-
(二)背景相关属性
1.背景颜色 background-color(bgc)
属性值:颜色取值-关键字、rgb表示法、rgba表示法、十六进制…
注意:
- 背景颜色默认是透明:rgb(0,0,0,0)/transparent
- 背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景色
2.背景图片 background-image(bgi)
属性值:url('图片地址')
注意:
- url中的引号可省略
- 背景图片默认在水平和垂直方向平铺
- 背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开图片的
3.背景平铺 background-repeat(bgr)
属性值:
repeat
(默认值)水平和垂直方向都平铺no-repeat
不平铺x-repeat
沿着水平方向(x轴)平铺y-repeat
沿着垂直方向(y轴)平铺
4.背景位置 background-position(bgp)
background-position:水平方向位置 垂直方向位置
属性值:
- 方位名词(最多只能表示9个位置)
- 水平方向:
left
center
right
- 垂直方向:
top
center
bottom
- 水平方向:
- 数字+px(坐标)
- 坐标系:原点(0,0)-盒子的左上角,x轴-水平向右,y轴-垂直向下
- 作用:图片左上角与坐标点重合
注意:
- 方位名词与坐标取值可以混合使用
- 背景图与背景色只显示在盒子内部
5.背景图片大小 background-size(bgs)
background-size:宽度 高度;
作用:设置背景图片的大小
取值:
- 数字+px
- 百分比
contain
包含,将背景图片等比例缩放,直到不会超出盒子的最大(盒子可能有留白)cover
覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白(图片可能显示不全)
6.背景的复合属性 background
background:color image repeat position/size(不分先后顺序)
省略问题:
- 可以按需求省略
- 在pc端,若盒子大下与背景图片大小相同,可以直接写
background:url()
单独和连写形式同时设置方法:
- 单独样式写在连写的下面
- 单独样式写在连写的里面
拓展-在网页中展示图片
方法一:img标签
- 不设置宽高会默认原尺寸
方法二:div+背景图片
- 背景图片属于装饰,不能撑开div标签,需要设置div的宽高
(三)元素显示模式
1.块级元素 block
显示特点:
- 独占一行
- 宽度默认是父元素的宽度。高度默认由内容撑开
- 可以设置宽高
代表标签:
div
、p
、h
系列、ul
、li
、dl
、dt
、dd
、form
、header
、nav
、footer
…
2.行内元素 inline
显示特点:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签:
a
、span
、b
、u
、i
、s
、strong
、ins
、em
、del
…
3.行内块元素 inline-block
显示特点:
- 一行可以显示多个
- 可以设置宽高
代表标签:
input
、textarea
、button
、select
…
注意:img
标签有行内块元素特点,但是在Chrome调试工具中显示结果是inline
4.元素显示模式转换
目的:改变元素默认的显示特点,让元素符合布局要求
语法:
dispaly:block
转换成块级元素 使用较多dispaly:inline-block
转换成行内块元素 使用较多dispaly:inline
转换成行内元素 使用较少
拓展-HTML嵌套规范
块级元素一般作为大容器,可以嵌套文本、块级元素、行内元素、行内块元素等等
- 注意:
p
标签中不要嵌套div
、p
、h
等块级元素
a
标签内部可以嵌套任意元素,但不能嵌套a
标签
拓展-居中方法总结
水平居中
text-align : center;
文本
行内元素,如span
/a
行内块元素,如img
/input
注意:如果需要让以上元素水平居中,需在元素的父级中设置
margin : 0 auto;
块级元素
注意:直接给当前元素设置
垂直居中
line-height
单行文本
(四)CSS特性
1.继承性
特性:子元素有默认继承父元素样式的特点(子承父业)
常见可继承的属性(文字控制属性均可以继承):
- color
- font-style/weight/size/family
- text-indent/align
- line-height
- …
注意:
- 可以通过调试工具判断样式是否可以继承
继承失效情况:
- 原因:元素有浏览器默认样式,此时继承性依然存在,但优先显示浏览器的默认样式
a
标签的color
会继承失效h
系列标签的font-size
会继承失败div
的高度不能继承,但是宽度有继承的效果(因为div
有独占一行的特性)
应用:
-
去除列表默认的样式(小圆点)
ul {list-style :none;}
-
统一不同浏览器默认文字大小
- 谷歌浏览器默认文字大小:16px
- 不同浏览器可能显示的默认字体大小不一致,开发的时候通常会给body标签设置统一的font-size保证不同浏览器效果一致
2.层叠性
特性:
- 同一标签设置不同样式 --> 样式层层叠加 --> 共同作用在标签上
- 同一标签设置相样式 --> 样式层层覆盖 --> 最后写的样式生效
注意:当样式冲突时,只有选择器优先级相同时,才能够通过层叠性判断
3.优先级
特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式:
- 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 <
!important
注意:
!important
写在属性后面,分号前面!important
不能提升继承的优先级- 实际开发时不建议使用
!important
- 越精准地找到标签,优先级越高
权重叠加计算:
-
场景:复合选择器通过权重叠加计算方法判断最终哪个选择器优先级最高
-
权重叠加计算公式(每一级之间不存在进位):
- (一:行内样式个数 , 二:id选择器个数 , 三:类选择器个数 , 四:标签选择器个数)
-
比较规则:
- 先比较第一个数字,比较出结果不必看后边的
- 再比较第二个数字,比较出结果不必看后边的
- …
- 若所有数字都相同,表示优先级相同,此时比较层叠(写在下边的起作用)
- 除了继承,
!important
权重最高
五、CSS布局-盒子模型
1.盒子模型的介绍
盒子:
- 页面的每一个标签都可以看作一个盒子,以盒子的视角更方便布局
- 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,称之为盒子
盒子模型:
- CSS规定每个盒子分别由内容区域
content
、内边距区域padding
、边框区域border
、外边距区域margin
构成
记忆:联想现实中的包装盒
2.内容区域的宽度和高度
作用:利用width
和height
属性默认设置是盒子内容区域的大小
属性:width
/height
取值:数字+px
3.边框 border(bd)
单个属性:
- 边框粗细
border-width
- 边框样式
border-style
- 实线
solid
虚线dashed
点线dotted
- 实线
- 边框颜色
border-color
属性值(复合属性):单个取值的连写,取值之间以空格隔开
border:粗细 线条种类 颜色(不分先后顺序)
单方向设置:只给盒子某个方向单独设置边框
border-方位名词:粗细 线条种类 颜色
注意:
- 设置
border
会撑大盒子(width和height是内容的宽高)
- 实际开发中,从内到外写代码,宽高背景色 --> 放内容并调节位置 --> 控制文字细节
4.内边距 padding
可以当做复合属性使用,表示单独设置某个方向的内边距
属性值:数字+px
简写识别顺序:
- 四个值:上 右 下 左
- 三个值:上 左右 下
- 两个值:上下 左右
- 记忆规则:从上开始顺时针赋值,没有设置赋值的看对面的
单方向设置:
padding-方位名词(left/right/top/buttom): 数字+px
5.外边距 margin
设置方式同内边距
正常情况:水平布局的盒子,左右的margin互不影响,两者距离为左右margin的和
注意:外边距折叠现象
合并问题:垂直布局的块级元素,上下margin
会合并
- 结果:最终距离为
margin
的最大值 - 解决:只设置一个
塌陷现象:互相嵌套的块级元素,子元素的margin-top
会作用在父元素上
- 结果:导致父元素一起往下移动
- 解决:
- 给父元素设置
border-top
或者padding-top
(分隔父子元素的margin-top
) - 给父元素设置
overflow:hidden
- 转换成行内块元素
display: inline-block
- 设置浮动
- 给父元素设置
6.CSS3盒子模型
手动内减:
- 能够撑大盒子的CSS属性:
width
、height
、border
、padding
- 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
- 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
- 特殊情况(块级元素):如果子盒子没有设置宽度,宽度默认是父盒子的宽度,此时给子盒子设置左右的
padding
或者左右的border
,不会撑大子盒子
自动内减:设置固定尺寸的盒子时可以使用自动内减方法避免手动内减
box-sizing: border-box;
7.清除默认内外边距
浏览器会默认给部分标签设置默认的margin
和padding
,但一般在项目开始前需要先清除这些标签默认的margin
和padding
,后续自己设置
* {
margin: 0;
padding: 0;
}
8.版心居中
版心:网页的有效内容
margin:0 auto;
9.行内元素内外边距的问题
margin
和padding
无法改变行内标签的垂直问题
margin-top/bottom
padding-top/bottom
解决:使用line-height
改变行高
六、CSS浮动
(一)结构伪类选择器
1.作用与优势
作用:根据元素在HTML中的结构关系查找元素
优势:减少对于HTML中类的依赖,有利于保持代码的整洁
场景:常用于查找某父级选择器中的子元素
2.选择器
E:first-child{}
匹配父元素中第一个子元素,并且是E元素
E:last-child{}
匹配父元素中最后一个子元素,并且是E元素
E:nth-child(n){}
匹配父元素中第n个子元素,并且是E元素
E:nth-last-child(n){}
匹配父元素中倒数第n个子元素,并且是E元素
E:nth-of-type(n){}
只在父元素的同类型(E)子元素范围中,匹配第n个
注意:n的取值
- 0,1,2,3,4,5,6…(从0开始取值)
- 公式:
- 偶数2n/even 奇数2n+1/2n-1/odd
- 找到前五个-n+5 找到从第五个往后n+5
(二)伪元素
作用:一般用于页面中的非主体内容
区别:元素-HTML设置的标签 伪元素-由CSS模拟出的标签效果
种类:
E::before
在父元素E内容的最前添加一个伪元素E::after
在父元素E内容的最后添加一个伪元素
注意:
-
必须设置
content
属性才能生效content: ''
-
伪元素默认是行内元素(宽高不生效)
(三)标准流
标准流又称文档流,是浏览器在渲染显示页面内容时默认采用的一套排版规则,规定了应该以何种方式排列元素。
常见标准流排版规则:
- 块级元素:从上到下,垂直布局,独占一行
- 行内元素或行内块元素:从左往右,水平布局,空间不够自行折行
(四)浮动
float: left/right
作用:
-
页面布局:让垂直布局的盒子变成水平布局
-
浏览器解析行内块或行内标签时,若标签换行书写会产生一个空格的距离
特点:
- 浮动元素会脱离标准流,在标准流中不占位置(脱标)
- 浮动元素比标准流高半个级别,可以覆盖标准流中的元素
- 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动会受到上面元素边界的影响
- 浮动元素有特殊的显示效果:一行可以显示多个,可以设置宽高(浮动后的标签具备行内块的特点)
注意:
- 浮动后的元素不能通过
text-align:center
或margin:() auto
居中 - 默认状态下,浮动的标签是顶对齐的,可加外边距进行调整
(五)清除浮动
1.介绍
影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素(父子级标签,子级浮动、父级没有高度,后面的标准流盒子会受影响而显示到上面的位置)
原因:子元素浮动后脱标,不占位置
目的:需要父元素有高度,从而不影响其他网页元素的布局
2.方法
(1)直接设置父元素高度
优点:简单粗暴
缺点:有些布局中不能固定父元素的高度
(2)额外标签法
操作:
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置
clear:both/left/right
缺点:会在页面中添加额外的标签,让页面的HTML结构变得复杂
(3)单伪元素清除法
.clearfix::after {
content: "";
/* 伪元素添加的标签是行内, 要求块 */
display: block;
clear: both;
/* 补充代码:在网页中看不到伪元素,解决兼容性 */
height: 0;
visibility: hidden;
}
操作:用伪元素替代了额外标签
优点:项目中使用,直接给标签加类即可清除浮动
(4)双伪元素清除法
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after{
clear: both;
}
优点:项目中使用,直接给标签加类即可清除浮动
注意:.clearfix::before
解决外边距塌陷问题(display: table
转为表格形式)
(5)overflow:hidden
overflow:hidden
操作:直接给父元素设置overflow:hidden
特点:方便
拓展-CSS书写顺序
不同的CSS书写顺序会影响浏览器的渲染性能,推荐前端工程师使用专业的书写顺序习惯
CSS选择器书写顺序
布局属性:display
float
position
clear
visibility
overflow
盒子模型+背景:width
height
margin
border
padding
background
文字内容属性:color
font
text-decoration
text-align
line-height
点缀属性:cursor
border-radius
text-shadow
box-shadow
注意:开发中推荐多用类+后代,但不是层级越多越好,一个选择器中的类选择器的个数推荐不要超过3个
拓展-BFC
概念:块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
创建BFC方式:
- html标签
- 浮动元素
overflow
取值不为visible
特点:BFC是一种块级元素的布局空间,在BFC这个布局空间中存在以下两个特点
- BFC盒子会默认包裹住内部子元素(标准流、浮动)
- 应用:清除浮动
- BFC盒子与子元素之间不存在
margin
的塌陷现象- 应用:解决
margin
的塌陷
- 应用:解决
七、项目
根目录:网站的第一级文件夹(英文名字)
- 图片文件夹:images
- 样式文件夹:CSS --> index.css(美化首页)
- 网站的首页:index.html(固定命名)
注意:
- 布局:从外到内,从上到下,从左到右
- CSS:浮动/
display
,盒子模型,文字样式
八、CSS定位装饰
(一)定位 position
1.网页常见布局方式
标准流
- 块级元素独占一行 --> 垂直布局
- 行内元素/行内块元素一行显示多个 --> 水平布局
浮动
- 让原本垂直布局的块级元素变为水平布局
定位
- 让元素自由地摆放在网页的任意位置
- 一般用于盒子之间的层叠情况
2.定位常见的应用场景
解决盒子与盒子之间的层叠问题
让盒子始终固定在屏幕中的某个位置
3.使用步骤
设置定位方式:
- 属性名:
position
- 属性值:静态定位
static
相对定位relative
绝对定位absolute
固定定位fixed
设置偏移值:
- 原则:就近原则
- 属性名:水平
left
/right
+ 垂直top
/bottom
- 属性值:数字+px/%
- 注意:
left
和right
都有,以left
为准;top
和bottom
都有,以top
为准- 数字+% 按照参照物大小的百分比移动
4.静态定位 static
position: static;
介绍:标准流中的元素默认是静态定位
注意点:不能通过方位属性进行移动
5.相对定位 relative
position: relative;
left/right: 数字+px/%
top/bottom: 数字+px/%
介绍:自恋型定位,相对于自己之前的位置进行移动
特点:
- 需要配合方位属性实现移动
- 相对于自己原来位置进行移动
- 在页面中占位置 --> 没有脱标
- 仍然具有原有的显示模式特点
应用场景:
- 配合绝对定位组CP(子绝父相)
- 用于小范围的移动
6.绝对定位 absolute
position: absolute;
left/right: 数字+px/%
top/bottom: 数字+px/%
介绍:拼爹型定位,相对于非静态定位的父元素进行定位移动
特点:
- 需要配合方位属性实现移动
- 以已经定位的父级为参照物进行定位,若父级没有定位,相对于浏览器可视区域进行移动
- 父级为广义的父级,就近找定位的父级,逐级查找不到则以浏览器为参照
- 父级更常用相对定位
- 在页面中不占位置 --> 已经脱标
- 改变标签的显示模式特点,具备了行内块特点(在一行共存且宽高生效)
- 需要设置宽高,或添加内容撑开盒子
应用场景:配合绝对定位组CP(子绝父相)父级
7.子绝定位应用
position: absolute;
left: 50%;
top: 50%;
/* 方法一-手动调节参数为半个盒子宽高 */
margin-left: -150px;
margin-top: -150px;
/* 方法二-按盒子百分比自动调节移动距离 */
transform: translate(-50%, -50%);
使用子绝父相,让子盒子在父盒子中居中(父子元素任意宽高下都能实现)
注意:标准流盒子使用margin:0 auto
水平居中,但绝对定位的盒子并不适用
操作:
- 参照浏览器大小移动50%,使得整个盒子移动到浏览器中间偏右下
- 再向左移动半个盒子宽度,向上移动半个盒子高度
注意:若发现父元素已经有绝对定位了,此时直接子绝即可
8.固定定位 fixed
position: fixed;
left/right: 数字+px/%
top/bottom: 数字+px/%
介绍:死心眼型定位,相对于浏览器进行定位移动
特点:
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置 --> 已经脱标
应用场景:让盒子固定在屏幕中的某个位置
9.元素的层级关系
不同布局方式元素的层级关系:标准流 < 浮动 < 定位
不同定位之间的层级关系:
- 相对、绝对、固定默认层级相同
- 默认情况下,在HTML中写在下面的元素层级更高,会覆盖上面的元素
自定义定位的层级:
z-index:数字
注意:
- 数字默认为0,取值越大显示顺序越靠上
z-index
必须配合定位才生效
(二)装饰
1.垂直对齐方式 vertical-align
问题:当图片和文字在一行显示时,其底部不对齐
- 浏览器文字类型元素排版中存在用于对齐的基线(baseline)
- 行内标签和行内块标签在浏览器中默认按照文字解析,默认文字是按基线对齐
属性值:
baseline
默认,基线对齐top
顶部对齐middle
中部对齐bottom
底部对齐
注意:
- 还可以将其变为块级元素解析
- 水平居中
text-line: center
- 优先给img标签设置
作用:
-
文本框和表单按钮无法对齐问题
-
input和img无法对齐问题
-
div中的文本框,文本框无法贴顶问题
-
div不设高度由img标签撑开,此时img标签下面会存在额外间隙问题
-
使用line-height让img标签垂直居中问题
2.光标类型 cursor
场景:设置鼠标光标在元素上时显示的样式
属性值:
default
默认值,通常是箭头pointer
小手效果,提示用户可以点击text
工字型,提示用户可以选择文字move
十字光标,提示用户可以移动
3.边框圆角 border-radius
场景:让盒子四个角变得圆润,增加页面细节,提升用户体验
取值:圆角半径数值+px/%
赋值规则:从左上角开始赋值,然后顺时针赋值,没有赋值的看对角
常用圆角:
- 正圆
- 盒子必须为正方形
- 设置边框圆角为盒子宽高的一半
border-radius: 50%
- 胶囊按钮
- 盒子要求为长方形
- 设置
border-radius: 盒子高度的一半
4.溢出部分显示效果 overflow
溢出部分:盒子内容部分超出盒子范围的区域
场景:控制内容溢出部分的显示效果-显示/隐藏/滚动条…
属性值:
visible
默认值,溢出部分可见hidden
溢出部分隐藏scroll
无论是否溢出,都显示滚动条auto
根据是否溢出,自动显示或隐藏滚动条
5.元素本身隐藏
场景:让某元素本身在屏幕中不可见
常见属性:
- 占位隐藏
visibility: hidden
- 不占位隐藏
display: none
6.元素整体透明度 opacity
场景:让某元素整体(包括内容)一起变透明
属性值:0-1之间的数字
- 1:完全不透明
- 0:完全透明
7.边框合并 border-collapse
border-collapse:collapse
场景:让相邻表格边框进行合并,得到细线边框效果
(三)选择器扩展
1.链接伪类选择器
场景:选中标签的不同状态
选择器语法:
E:link{}
选中(a链接) 未访问过 的状态E:visited{}
选中(a链接) 访问之后 的状态E:hover{}
选中 鼠标悬停 的状态E:active{}
选中 鼠标按下 的状态
注意:同时实现以上四种伪类状态效果,需要按照LVHA顺序书写
2.焦点伪类选择器
场景:用于选中元素获取焦点时状态,常用于表单控件
选择器语法:
E:focus{}
效果:表单控件获取焦点时默认会显示外部轮廓线
3.属性选择器
场景:通过元素上的HTML属性来选择元素,常用于选择input标签
选择器语法:
E[attr]
选择具有attr属性的E元素E[attr="val"]
选择具有attr属性并且属性值等于val的E元素
input::placeholder
修改input
的placeholder
样式
九、综合项目
(一)CSS样式补充
1.精灵图
background-image: url(大图地址);
background-position: 水平方向位置 垂直方向的位置;
场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图
优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度
使用步骤:
- 创建一个盒子,设置盒子大小为小图片大小
- 将精灵图设置为盒子的背景图片
- 通过PxCook测量小图片左上角坐标(x,y)(在大图中的位置),分别取负值设置给盒子的背景图位置
background-position:-x -y
注意:精灵图标签一般用行内标签(span
b
i
)
2.文字阴影 text-shadow
作用:给文字添加阴影效果,吸引用户注意
属性名:text-shadow
取值:
h-shadow
必须,水平偏移量,允许负值v-shadow
必须,垂直偏移量,允许负值blur
可选,模糊度color
可选,阴影颜色
拓展:阴影可以叠加设置,每组阴影取值之间以逗号隔开
3.盒子阴影 box-shadow
作用:给盒子添加阴影效果,吸引用户注意,体现页面的制作细节
取值:
h-shadow
必须,水平偏移量,允许负值v-shadow
必须,垂直偏移量,允许负值blur
可选,模糊度color
可选,阴影颜色spread
可选,阴影扩大inset
可选,将阴影改为内部阴影
4.过渡 transition
transition: all/属性名 过度的时长;
作用:让元素的样式慢慢的变化,常配合hover使用,增强网页交互体验
常见取值:
- 过度的属性
all
:所有能过度的都过度- 具体属性名E:只有属性E过度
- 过度的时长 数字+s(秒)
注意:
- 过渡需要:默认状态和
hover
状态样式不同,才能有过渡效果 transition
属性给需要过渡的元素本身加transition
属性设置在不同状态中,效果不同的- 给默认状态设置,鼠标移入移出都有过渡效果
- 给
hover
状态设置,鼠标移入有过渡效果,移出没有过渡效果
(二)项目前置认知
1.网页与网站的关系
网页:网站中的每一“页”
网站:提供特定服务的一组网页集合
2.骨架结构标签
文档说明
<!DOCTYPE html>
文档类型声明,告诉浏览器该网页的HTML版本
注意:DOCTYPE需要写在页面的第一行,不属于HTML标签
网页语言
<html lang="en">
标识网页使用的语言
作用:搜索引擎归类+浏览器翻译
常见语言:zh-CN简体中文 / en英文
字符编码(了解)
<meta charset="UTF-8">
标识网页使用的字符编码
作用:保存和打开的字符编码需要统一设置,否则可能会出现乱码
常见字符编码:
- UTF-8 万国码,国际化的字符编码,收录了全球语言的文字
- GB2312 6000+汉字
- GBK:20000+ 汉字
注意:开发中统一使用UTF-8字符编码即可
其他
<meta http-equiv="X-UA-Compatible" content="IE=edge">
解决兼容性差问题:ie / edge
<meta name="viewport" content="width=device-width, initial-scale=1.0">
移动端网页 宽度 = 设备宽度
3.SEO三大标签
SEO简介
SEO(Search Engine Optimization):搜索引擎优化
作用:让网站在搜索引擎上的排名靠前
提升SEO的常见方法:
- 竞价排名
- 将网页制作成html后缀
- 标签语义化(在合适的地方使用合适的标签)
SEO三大标签
title
:网页标题标签
<title>标题文案</title>
description
:网页描述标签
<meta name="description" content="描述文案">
keywords
:网页关键词标签
<meta name="keywords" content="关键词文案">
4.ico图标设置
<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">
场景:浏览器标题栏图标,显示在标签页标题左侧的小图标,习惯使用.ico格式的图标
注意:.ico图标放入根目录里
5.版心
.container {
width: 1240px;
margin: 0 auto;
}
场景:把页面的主体内容约束在网页中间
作用:让不同大小的屏幕都能看到页面的主体内容
注意:版心类名常用container
、wrapper
、w
等
(三)项目结构搭建
1.文件和目录准备
新建项目文件夹 xtx-pc-client,在开发工具中打开
- 在实际开发中,项目文件夹不建议使用中文
- 所有项目相关文件都保存在 xtx-pc-client 目录中
复制 favicon.ico 到 xtx-pc-client 目录
- 一般习惯将ico图标放在项目根目录
复制 images 和 uploads 目录到 xtx-pc-client 目录中
- images :存放网站固定使用的图片素材,如:logo、样式修饰图片… 等
- uploads:存放网站非固定使用的图片素材,如:商品图片、宣传图片…等
新建 index.html 在根目录
新建 css 文件夹保存网站的样式,并新建以下CSS文件:
- base.css:基础公共样式
- common.css:该网站中多个网页相同模块的重复样式,如:头部、底部
- index.css:首页样式
完成后的目录及文件结构:
- xtx-pc-client 项目目录
- index.html 首页的html文件
- favicon.ico ico图标
- images 固定使用的图片素材
- uploads 非固定使用的图片素材
- css CSS文件夹
- base.css 基础公共样式
- common.css 该网站中多个网页相同模块的重复样式
- index.css 首页样式
2.基础公共样式
场景:一般项目开始前,首先会去除掉浏览器默认样式,设置为当前项目需要的初始化样式
作用:防止不同浏览器中标签默认样式不同的影响,统一不同浏览器的默认显示效果,方便后续项目开发
要求:已经准备好base.css代码,项目中可以直接引入使用