0、前提
80%知识,只有20%的场景可以用到;
20%的知识,有80%的场景可以用到。
1 、HTML & CSS 到底是什么,有什么用?
它们是两门语言。
HTML + CSS + Javascript = 网页
HTML:Hyper Text Markup Language 超文本标记语言;定义网页中有什么。
CSS:Cascading Style Sheets 层叠样式表;定义网页中的东西长什么样子。
1.1 执行HTML CSS
HTML、CSS -> 浏览器内核 -> 页面
浏览器:
- shell:外壳
- core:内核(JS执行引擎、渲染引擎)
IE: Trident
Firfox: Gecko
Chrome: Webkit / Blink
Safari: Webkit
Opera: Presto / Blink
1.2 整体:element (元素)
元素 = 起始标记(begin tag) + 结束标记(end tag) + 元素内容 + 元素属性
属性 = 属性名 + 属性值
1.3 路径的写法
站内资源和站外资源
站内资源:当前网站的资源
站外资源:非当前网站的资源
绝对路径和相对路径
站外资源:绝对路径
站内资源:相对路径
1. 绝对路径
绝对路径的书写格式:
url地址:
协议名://主机名:端口号/路径
schema://host:port/path
当跳转目标和当前页面的协议相同时,可以省略协议
2. 相对路径
以./开头,./表示当前资源所在的目录
可以书写…/表示返回上一级目录
相对路径中:./可以省略
2、语义化
2.1 什么是语义化
- 每一个HTML元素都有具体的含义
a元素:超链接
p元素:段落
h1元素:一级标题
- 所有元素与展示效果无关
元素展示到页面中的效果,应该由CSS决定。
因为浏览器带有默认的CSS样式,所以每个元素有一些默认样式。
重要:选择什么元素,取决于内容的含义,而不是显示出的效果
2.2 为什么需要语义化?
- 为了搜索引擎优化(SEO)
搜索引擎:百度、搜搜、Bing、Google
每隔一段时间,搜索引擎会从整个互联网中,抓取页面源代码
- 为了让浏览器理解网页
阅读模式、语音模式
3、Html标签
3.1 锚点连接
a href=“#chapter1”---->h2 id=“chapter1”
<body>
<!-- 目录 -->
<a href="#chapter1">章节1</a>
<a href="#chapter2">章节2</a>
<a href="#chapter3">章节3</a>
<a href="#chapter4">章节4</a>
<h2 id="chapter1">章节1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem quae deserunt odio, sunt voluptates</p>
<h2 id="chapter2">章节2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem quae deserunt odio, sunt voluptates</p>
<h2 id="chapter3">章节3</h2>
<p>Laboriosam eius, itaque ad enim inventore minus aspernatur ea molestias fuga</p>
<h2 id="chapter4">章节4</h2>
<p>Consequatur ut fugit molestias voluptates. Accusamus autem, ab nisi perspiciatis ex, cupiditate expedita officia </p>
<a href="#">回到顶部</a>
3.2 多媒体元素
video视频
controls: 控制控件的显示,取值只能为controls
某些属性,只有两种状态:1. 不写 2. 取值为属性名,这种属性叫做布尔属性
布尔属性,在HTML5中,可以不用书写属性值
autoplay: 布尔属性,自动播放。
muted: 布尔属性,静音播放。
loop: 布尔属性,循环播放
audio音频
和视频完全一致
<body>
<video controls autoplay muted loop style="width:500px;">
<source src="media/open.mp4">
<source src="media/open.webm">
<p>
对不起,你的浏览器不支持video元素,请点击这里下载最新版本的浏览器
</p>
</video>
</body>
3.3 列表元素
有序列表
ol: ordered list
li:list item
无序列表(ul
)
把ol改成ul
ul:unordered list
无序列表常用于制作菜单 或 新闻列表。
定义列表
通常用于一些术语的定义
dl: definition list
dt: definition title
dd: definition description
3.4 容器元素
容器元素:该元素代表一个块区域,内部用于放置其他元素
div元素
没有语义
语义化容器元素
header: 通常用于表示页头,也可以用于表示文章的头部
footer: 通常用于表示页脚,也可以用于表示文章的尾部
article: 通常用于表示整篇文章
section: 通常用于表示文章的章节
aside: 通常用于表示侧边栏
3. 5 元素包含关系
以前:块级元素可以包含行级元素,行级元素不可以包含块级元素,a元素除外
元素的包含关系由元素的内容类别决定。
例如,查看h1元素中是否可以包含p元素
总结:
- 容器元素中可以包含任何元素
- a元素中几乎可以包含任何元素
- 某些元素有固定的子元素(ul>li,ol>li,dl>dt+dd)
- 标题元素和段落元素不能相互嵌套,并且不能包含容器元素
4 、 css样式
4.1、 CSS代码书写位置
- 内部样式表
书写在style元素中
- 内联样式表,元素样式表
直接书写在元素的style属性中
- 外部样式表[推荐]
将样式书写到独立的css文件中。
1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器缓存,从而提高页面响应速度
3). 有利于代码分离(HTML和CSS),更容易阅读和维护
<link rel="stylesheet" href="css/index.css">
4.2 常见样式声明
- color:元素内部的文字颜色
预设值:定义好的单词
三原色,色值:光学三原色(红、绿、蓝),每个颜色可以使用0-255之间的数字来表达,色值。
rgb表示法:
rgb(0, 255, 0)
hex(16进制)表示法:
#红绿蓝
淘宝红:#ff4400, #f40
黑色:#000000,#000
白色:#ffffff, #fff
红:#ff0000, #f00
绿:#00ff00, #0f0
蓝:#0000ff, #00f
紫:#f0f
青:#0ff
黄:#ff0
灰色:#ccc
-
background-color:元素背景颜色
-
font-size:元素内部文字的尺寸大小
1)px:像素,绝对单位,简单的理解为文字的高度占多少个像素
2)em:相对单位,相对于父元素的字体大小
每个元素必须有字体大小,如果没有声明,则直接使用父元素的字体大小,如果没有父元素(html),则使用基准字号。
- font-weight:文字粗细程度,可以取值数字,可以取值为预设值
strong,默认加粗。
- font-family:文字类型
必须用户计算机中存在的字体才会有效。
使用多个字体,以匹配不同环境
sans-serif,非衬线字体
-
font-style:字体样式,通常用它设置斜体
-
text-decoration:文本修饰,给文本加线。
-
text-indent:首行文本缩进
-
line-height:行高
每行文本的高度,该值越大,每行文本的距离越大。
设置行高为容器的高度,可以让单行文本垂直居中
行高可以设置为纯数字,表示相对于当前元素的字体大小
-
width:宽度
-
height:高度
-
letter-space:文字间隙
-
text-align:元素内部文字的水平排列方式
4.3 选择器
简单选择器
- ID选择器
- 元素选择器
- 类选择器
- 通配符选择器: * 选中所有元素
- 属性选择器: 根据属性名和属性值选中元素
6. 伪类选择器: 选中某些元素的某种状态
1)link: 超链接未访问时的状态
2)visited: 超链接访问过后的状态
3)hover: 鼠标悬停状态
4)active:激活状态,鼠标按下状态
爱恨法则:love hate
<style>
a:link{
color: green;
}
a:visited{
color: red;
}
a:hover{
color: chocolate;
}
a:active {
color: #000;
}
</style>
</head>
<body>
<a href="http://163.com">
网易
</a>
</body>
7. 伪元素选择器
before
after
选择器的组合
- 并且
- 后代元素 : 空格
- 子元素 : >
- 相邻兄弟元素 : +
- 后面出现的所有兄弟元素: ~
选择器的并列
多个选择器, 用逗号分隔
4.4 层叠
声明冲突:同一个样式,多次应用到同一个元素
层叠:解决声明冲突的过程,浏览器自动处理(权重计算)
1. 比较重要性
重要性从高到底:
作者样式表:开发者书写的样式
1)作者样式表中的!important样式
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式
2. 比较特殊性
看选择器
总体规则:选择器选中的范围越窄,越特殊
具体规则:通过选择器,计算出一个4位数(x x x x)
- 千位:如果是内联样式,记1,否则记0
- 百位:等于选择器中所有id选择器的数量
- 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位:等于选择器中所有元素选择器、伪元素选择器的数量
3. 比较源次序
代码书写靠后的胜出
应用
- 重置样式表
书写一些作者样式,覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
常见的重置样式表:normalize.css、reset.css、meyer.css
- 爱恨法则
link > visited > hover > active
4.5 继承
子元素会继承父元素的某些CSS属性
通常,跟文字内容相关的属性都能被继承
5、 盒模型(块盒)
box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)
5.1 盒子类型:
- 行盒,display等于inline的元素
- 块盒,display等于block的元素
行盒在页面中不换行、块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒:容器元素、h1~h6、p
常见的行盒:span、a、img、video、audio
5.2 盒子的组成部分
无论是行盒、还是块盒,都由下面几个部分组成,从内到外分别是:
1. 内容 content
width、height,设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
2. 填充(内边距) padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding: 简写属性
padding: 上 右 下 左
填充区+内容区 = 填充盒 padding-box
3. 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式:border-style
边框宽度:border-width
边框颜色:border-color
边框+填充区+内容区 = 边框盒 border-box
4. 外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin
5、盒模型的运用
5.1 改变宽高范围
默认情况下,width 和 height 设置的是内容盒宽高。
衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height,则设置的是内容盒。
- 精确计算
- CSS3:box-sizing
<style>
div {
width: 236px;
height: 51px;
color: #a7a7a7;
background: #2d2e36;
line-height: 51px;
padding-left: 46px;
border: 3px solid red;
/* content-box:表示的是内容盒 默认
border-box: 边框盒 内容就自行计算
*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
页游中心
</div>
5.2 改变背景覆盖范围
默认情况下,背景覆盖边框盒
可以通过background-clip进行修改
<style>
div{
width:100px;
height: 100px;
background: #008c8c;
border: 2px dashed red;
padding: 30px;
/* border-box 默认背景覆盖边框盒
content-box 背景覆盖内容盒
padding-box 背景覆盖填充盒
*/
background-clip: padding-box;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit.
</div>
</body>
5.3 溢出处理
给定宽,高,内容超过就会溢出。
overflow,控制内容溢出边框盒后的处理方式
<style>
/* visible 默认可见
hidden 影藏
scroll 生成滚动条
overflow-y: scroll / auto(自动);
*/
overflow: scroll;
</style>
5.4 断词规则(一般不用设置)
word-break,会影响文字在什么位置被截断换行
normal:普通。CJK字符(文字位置截断),非CJK字符(单词位置截断)
break-all:截断所有。所有字符都在文字处截断
keep-all:保持所有。所有文字都在单词之间截断(空格,符号)
5.5 单行文本~空白处理(…)
①溢出不换行: white-space: nowrap --》溢出
②溢出隐藏:white-space: nowrap–》显示不完…
③文本溢出 加点 text-overflow: ellipsis
注意:只能控制单行文本,多行用js处理。
<style>
li{
border-bottom: 1px dashed #ccc;
line-height: 2;
border-left: 3px solid #008c8c;
padding-left: 10px;
margin: 1em 0;
width: 300px;
/*① white-space: nowrap 不换行--》溢出
②溢出隐藏:white-space: nowrap--》显示不完...
③文本溢出 加点 text-overflow: ellipsis
----和width有关。
*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Atque animi delectus corporis hic!</li>
<li>Reiciendis quos ratione culpa saepe.</li>
<li>Deserunt voluptas numquam doloremque beatae!</li>
<li>Cum architecto nulla dolorem at.</li>
<li>Repudiandae deserunt temporibus tempora quaerat?</li>
<li>Dolores laborum veritatis fuga commodi!</li>
<li>Velit explicabo dicta doloremque unde!</li>
<li>Sed magnam ratione quaerat ducimus!</li>
<li>Explicabo perspiciatis aspernatur maiores. Accusantium?</li>
</ul>
</body>
6、行盒(可以看作内容)
(内容撑开,没有宽高)
(padding、border、margin 都水平(左右)方向有效)
6.1 行盒的盒模型
常见的行盒:包含具体内容的元素
span、strong、em、i、img、video、audio
6.2 显著特点
1. 盒子沿着内容沿伸(内容撑开,没有宽高)
2. 行盒不能设置宽高
调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整。
- 内边距(填充区)
水平方向有效,垂直方向不会实际占据空间。
- 边框
水平方向有效,垂直方向不会实际占据空间。
- 外边距
水平方向有效,垂直方向不会实际占据空间。
7、行块盒
display:inline-block 的盒子
既有行盒的特点,也有块盒的特点。(不独占一行,所有样式都有效)
有空白折叠(分页)。
1. 不独占一行
2. 盒模型中所有尺寸都有效
7.1 空白折叠
空白折叠,发生在行盒(行块盒)内部 或 行盒(行块盒)之间
7.2 可替换元素 和 非可替换元素(重要)
大部分元素,页面上显示的结果,取决于元素内容(写啥显示啥/百度),称为非可替换元素
少部分元素,页面上显示的结果,取决于元素属性(img、video、audio 类似行内块盒子,可以设置宽高),称为可替换元素。
绝大部分可替换元素均为行盒。可替换元素类似于行块盒,盒模型中所有尺寸都有效。
7.3 行块盒 ——分页应用
<style>
.pager a{
border: 1px solid #e1e2e3;
text-decoration: none;
color: #38f;
display: inline-block;
width: 34px;
height: 34px;
text-align: center;
line-height: 34px;
}
.pager a:hover {
border-color: #38f;
background: #f2f8ff;
}
.pager a.selected{
border: none;
color: #000;
background: initial;
}
</style>
</head>
<body>
<div class="pager">
<a href="">1</a>
<a href="">2</a>
<a href="" class="selected">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">9</a>
<a href="">10</a>
</div>
</body>
8、布局规则(视觉格式化模型)
盒模型:规定单个盒子的规则
视觉格式化模型(布局规则):页面中的多个盒子排列规则
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
1. 常规流
2. 浮动
3. 定位
8.1 常规流
常规流、文档流、普通文档流、常规文档流—>都是一个东西。
所有元素,默认情况下,都属于常规流布局。
总体规则:块盒独占一行,行盒水平依次排列
包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域(活动范围)。绝大部分情况下:盒子的包含块,为其父元素的内容盒。
块盒
1. 每个块盒的总宽度,必须刚好等于包含块的宽度
宽度的默认值是auto
margin的取值也可以是auto,默认值0
auto:将剩余空间吸收掉
width吸收能力强于margin
若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收(布局一般从左到右,可以改)
在常规流中,块盒在其包含快中居中,可以定宽、然后左右margin设置为auto。
<style>
.child{
margin: 0 auto;
}
</style>
2. 每个块盒垂直方向上的auto值
height:auto, 适应内容的高度
margin:auto, 表示0(上下)
3. 百分比取值(重要)
宽、padding、margin可以取值为百分比
以上的所有百分比相对于包含块的宽度!!!!!!
高度的百分比:
1). 包含块的高度是否取决于子元素的高度(父元素没有高度,子元素占50%),设置百分比无效
2). 包含块的高度不取决于子元素的高度(父元素给了高度),百分比相对于父元素高度
4. 上下外边距的合并
两个常规流块盒,上下外边距相邻(第一个的margin-bottom和第二个magin-top重合),会进行合并。两个外边距取最大值(一个100和一个50 最后外边距为100px)。
8.2 浮动(float)
浮动元素必定是块盒。
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
- 常规流
- 浮动
- 定位
应用场景
- 文字环绕
- 横向排列
浮动的基本特点
修改float属性值为:
- left:左浮动,元素靠上靠左
- right:右浮动,元素靠上靠右
默认值为none(默认情况下,就是常规流布局。)
- 当一个元素浮动后,元素必定为块盒(强制更改display属性为block,系统)
- 浮动元素的包含块,和常规流一样,为父元素的内容盒
盒子尺寸
- 宽度为auto时,适应内容宽度
- 高度为auto时,与常规流一致,适应内容的高度
- margin为auto,为0.
- 边框、内边距、百分比设置与常规流一样
盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子考上靠右排列
- 浮动盒子在包含块中排列时,会避开常规流块盒(常规流在前–>浮动盒子在其下面)
- 常规流块盒在排列时,无视浮动盒子(常规流盒子在后,不管浮动盒子,就当不存在覆盖—>浮动盒子压住常规流盒子)
- 行盒在排列时,会避开浮动盒子(文字环绕–图片浮动起来就行-----P元素不知道天上还有东西----修改图片的 margin-right)
- 外边距合并不会发生
如果文字没有在行盒中,浏览器会自动生成一个行盒包裹文字,该行盒叫做匿名行盒。
高度坍塌
高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子
清除浮动。(浮动盒子脱离了常规流,因此常规流盒子在高度计算的时候不考虑浮动盒子)
解决方法:css属性:clear
- 默认值:none
- left:清除左浮动,该元素(clear:left)必须出现在前面所有左浮动盒子的下方
(抬头看看天上的兄弟,排列时参考一下浮动盒子的位置。—以前常规流是看不见天山的兄弟的) - right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方
- both:清除左右浮动,该元素必须出现在前面所有浮动盒子的下方
第一种方法
①最下方加一个div
②clear: both;
<style>
.container {
background: lightblue;
padding: 30px;
}
.item {
width: 200px;
height: 200px;
background: red;
margin: 6px;
float: left;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="container ">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="clearfix"></div>
</div>
</body>
第二种方法(推荐)
①是外面的容器坍塌+div class=“container clearfix”
② ::after 伪元素选择器(给clearfix添加一个最后一个子元素)
.clearfix::after {
content: “”;
display: block;
clear: both;
}
<style>
.container {
background: lightblue;
padding: 30px;
}
.item {
width: 200px;
height: 200px;
background: red;
margin: 6px;
float: left;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
8.3 定位(position)
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
- 常规流
- 浮动:float
- 定位:position
定位:手动控制元素在包含块中的精准位置
涉及的CSS属性:position
position属性
- 默认值:static,静态定位(不定位)
- relative:相对定位
- absolute:绝对定位
- fixed:固定定位
一个元素,只要position的取值不是static,认为该元素是一个定位元素。
定位元素会脱离文档流(相对定位除外—即相对定位不会脱离文档流)
一个脱离了文档流的元素:(absolute 和fixed)
- 文档流中的元素摆放时,会忽略脱离了文档流的元素
- 文档流中元素计算自动高度时,会忽略脱离了文档流的元素
相对定位(relative 特殊,不脱)
不会导致元素脱离文档流,只是让元素在原来位置上进行偏移。(宽度width不变-----margin-left宽度会减小)
相对定位主要用于为绝对定位提供包含块。
可以通过四个CSS属性对设置其位置:
- left
- right
- top
- bottom
(相对定位下)盒子的偏移不会对其他盒子造成任何影响。
绝对定位(absolute)
- 宽高为auto,适应内容
- 包含块变化:(如果一个元素是绝对定位,它的包含块)找祖先中第一个定位元素(只要position的取值不是static),该元素的填充盒为其包含块。若找不到,则它的包含块为整个网页(初始化包含块)
固定定位(fixed)
其他情况和绝对定位完全一样。
包含块不同:固定为视口(浏览器的可视窗口(你能看见的区域【不变】,内容大于视口—滚动条)小广告)
定位下的居中
某个方向居中:
- 定宽(高)
- 将左右(上下)距离设置为0
- 将左右(上下)margin设置为auto
绝对定位和固定定位中(居中),margin为auto时,会自动吸收剩余空间
<div style="width:100px; height:100px; position:fixed; background: red;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
">
</div>
多个定位元素重叠时
堆叠上下文
设置z-index,通常情况下,该值越大,越靠近用户
只有定位元素设置z-index有效
z-index可以是负数,如果是负数,则遇到常规流、浮动元素,则会被其覆盖(五环跑到文字下面)
[奥运五环]
<style>
.item {
position: absolute;
width: 70px;
height: 70px;
border: 5px solid;
box-sizing: border-box;
border-radius: 50%;
}
.circle1{
left: 0;
top: 0;
border-color: blue;
z-index: 6;
}
.circle2{
left: 70px;
top: 0;
border-color: #000;
z-index: 2;
}
.circle3{
left: 140px;
top: 0;
border-color: red;
z-index: 3;
}
.circle4{
left: 35px;
top: 40px;
border-color: yellow;
z-index: 4;
}
.circle5{
left: 105px;
top: 40px;
border-color:green;
z-index: 5;
}
</style>
</head>
<body>
<div class="item circle1"></div>
<div class="item circle2"></div>
<div class="item circle3"></div>
<div class="item circle4"></div>
<div class="item circle5"></div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores vel ullam quam quisquam magni eaque officiis
</body>
补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
- 没有外边距合并