第二周学习总结
图片元素
img元素
image缩写，空元素
src属性：source（资源）
<img src="https://inews.gtimg.com/newsapp_bt/0/12785954079/1000" alt="海沃德">
alt属性：当图片资源失效时，将使用该属性的文字替代图片
和a元素联用(外面套一个a元素即可)
<a href="https://www.bilibili.com/">bilibili
<img src="https://inews.gtimg.com/newsapp_bt/0/12785954079/1000" alt="海沃德">
</a>
和map元素
map：地图
map的子元素
<map name="solarMap">
<area shape="" coords="" href="" alt="">
</map>
点击图片前往太阳系百度百科，点击土星的位置，前往土星百度百科；
<a target="_blank" href="https://baike.so.com/doc/288229-305135.html">
<img usemap="#solarMap" src="https://p1.ssl.qhimg.com/t015089681d4ef1f4b4.jpg" alt="太阳系">
</a>
<map name="solarMap">
<area shape="circle" coords="110,84,13" href="https://baike.so.com/doc/5383974-5620379.html" alt="土星">
</map>
和figure元素
指代，定义，通常用于把图片，图片标题，描述包裹起来
子元素：figcaption(表示指代的是标题)
<figure>
直接包起来就行
</figure>
多媒体元素
video 视频
audio 音频
video
controls属性：控制控件的显示；赋值只能为controls（布尔属性）
某些属性只有两种状态：1.不写 2.取值为属性名，这种属性叫做布尔属性
autoplay：布尔属性，自动播放。
muted：布尔属性，静音播放
loop：布尔属性，循环播放。
audio
和视频完全一致
兼容性
- 旧版本的浏览器不支持这两个元素
- 不同的浏览器支持的音视频格式可能不一致
source
<source src=".mp4">
<source src=".webm">
列表元素
有序列表
ol：ordered list
li：list item
<ol type="i">
<li>吃</li>
<li>喝</li>
<li>玩</li>
</ol>
无序列表
ul：unordered list
li；
无序列表常用于制作菜单 或 新闻列表。
定义列表
通常用于一些术语的定义
dl：definiti list（定义列表）
dt：definiti title（定义标题）
dd：definiti description（定义描述）
容器元素
容器元素：该元素代表一个块区域，内部用于放置其他元素。
div元素
没有语义
语义化容器元素
header：通常用于表示页头，也可以用于表示文章的头部
footer：通常用于表示页脚，也可以用于表示文章的尾部
article：通常用于表示整篇文章
section：通常用于表示文章的章节
aside：通常用于表示侧边栏
元素包含关系
以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外
元素的包含关系由元素的内容类别决定。
例如，查看h1元素中是否可以包含p元素
总结：
- 容器元素中可以包含任何元素
- a元素几乎可以包含任何元素
- 某些元素有固定的子元素（ul>li, ol>li, dl>dt+dd）
- 标题元素和段落元素不能相互嵌套，并且不能包含容器元素
为网页添加样式
术语解释
h1{
color: crimson;
background-color: cyan;
text-align: center;
}
css规则+选择器 + 声明块
h1
选择器
选择器：选中元素
- ID选择器：选择的是对应ID值的元素（#）
- 元素选择器：选择的是所有的该元素
- 类选择器:选择定义的元素（.）
<style>
p{
color: cyan;
background-color: darkgrey;
text-align: center;
}
.big{
font-size: 5em;
}
.rad{
color: red;
font-size: 2em;
}
.color{
color: yellow;
}
.size{
font-size: smaller;
}
</style>
</head>
<body>
<p class="big">jbxabxhsab</p>
<h>
<div class="rad"> Lorem ipsum doloae, corrupti magni!</div>
<div class="color size"> Sapiente nesmre.</div>
</h>
</body>
</html>
声明块
出现在大括号中
声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式
css代码书写位置
- 内部样式表[适合代码少时]
书写在style元素中
- 内联样式表
直接书写在元素的style属性中
<div style="color: blueviolet; background-color: chartreuse;"> 内容</div>
- 外部样式表[推荐]
将样式书写到独立的css文件中
外部样式可以解决多页面样式重复的问题
有利于浏览器缓存，从而提高页面响应速度
有利于代码分离（html和css）利于阅读和维护
常见样式声明
- color
元素内部的文字颜色
预设值：定义好的单词
三原色，色值：光学三原色（红，绿，蓝）每个颜色可以使用0-255之间的数字来表达
rgb表示法：
rgb(0,255,0)
hex表示法(16进制)：
#红绿蓝(一个颜色两位数字)
淘宝红：#ff4400 = #f40
黑色：#000000 = #000
白色：#ffffff = #fff
红色：#ff0000 = #f00
紫色：#f0f
青色：#0ff
黄色：#ff0
灰色：#ccc
- background-color
元素背景颜色
- font-size
元素内部文字的尺寸大小
一些单位：
(1).px:像素，绝对单位，简单的理解为文字的高占多少个像素
(2).em:相对单位，相对于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素，则使用基准字号
(3).
- font-weight
文字粗细程度，可以取值数字，可以取值为预设值
strong元素：默认加粗。
- font-family
文字类型
必须用户计算机中存在的字体才会有效。
所以使用多个字体，以匹配不同环境。
sans-serif：非衬线字体，最后一种“保底”字体
- font-style
字体样式，通常用它设置斜体:italic
i元素，em元素:默认样式是italic(倾斜字体)实际使用中，通常用它表示一个图标(icon)
- text-decoration
文本修饰：给文本加线
a元素:会自动加下划线
del元素：错误的内容
s元素：过期的内容
- text-indent
首行文本缩进
- line-height
每行文本的高度，该值越大，每行文本的距离越大。
设置行高为容器的高度，可以让单行文本垂直居中
行高可以设置为纯数字，表示相对于当前元素的字体大小
-
width
宽度 -
height
高度 -
letter-space
文字间隙
- text-align
元素内部文字的水平排列方式
选择器
作用： 帮助你精准的选中想要的元素
简单选择器
- ID选择器
- 元素选择器
- 类选择器
- 通配符选择器
*, 选中所有元素
- 属性选择器
根据属性名和属性值选中元素
- 伪类选择器
选中某些元素的某种状态
(1)link：超链接未访问的状态
(2)visited：超链接访问过的状态
(3)hover：
(4)active：
必须是以上这种书写顺序：爱恨法制
- 伪元素选择器
生成并选中某个元素内部的第一个元素或最后一个元素
before
after
选择器的组合
-
并且
-
后代元素 —— 空格
-
子元素 —— >
-
相邻兄弟元素 —— +
-
后面出现的所有兄弟元素 —— ~
选择器的并列
多个选择器，用逗号分隔
层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理（权重计算）
1， 比较重要性
重要性从高到低：
作者样式表：开发者书写的样式
（1）作者样式表中的"!important"样式
（2）作者样式表中的普通样式
（3）浏览器默认样式表中的样式
2. 比较特殊性
看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数
- 千位：如果是内联样式记作1，否则记0
- 百位：等于选择器中所有ID选择器的数量
- 十位：等于选择器中所有类选择器，属性选择器，伪类选择器的数量
- 个位：等于选择器中所有元素选择器，伪元素选择器
3， 比较源次序
代码书写靠后的胜出；
应用
- 重置样式表
书写一些作者样式表，覆盖浏览器的默认样式
重置样式表->浏览器的默认样式表
常见的重置样式表：normalize.css; reset.css; meyer.css
- 爱恨法则
link> visited> hover>active
继承
子元素会继承父元素的某些css属性
通常跟文字内容相关的属性都能被继承
(背景颜色不可以继承)
属性值的计算过程
浏览器一个一个元素依次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件：该元素的所有css属性必须有值
属性计算过程：一个元素，从所有属性都没有，到所有的属性都有值，这个计算过程，叫做属性值计算过程
特殊的两个css取值：
- inherit：手动(强制)继承，将父元素的值取出应用到该元素
- initial：初始值，将该属性设置为默认值
盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域(盒子)
盒子类型：
- 行盒：display等于inline的元素(不换行)
- 块盒：display等于block的元素(独占一行)
display默认值为inline
浏览器默认样式表设置的块盒：容器元素、h1-h6、p
常见的行盒：span、a、img、video、audio
盒子的组成部分
无论是行盒还是块盒，都有下面几个部分组成，从内到外分别是：
- 内容 content
widht height,设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
- 填充 padding
盒子边框距离内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding：简写属性
padding：上 右 下 左
padding：上下 左右（上下、左右相同）
padding：只写一个值（全相同）
填充区+内容区=填充盒 padding box
- 边框 border(简写属性)
边框宽度：border-width
边框样式：border-style
边框颜色：border-color
边框+填充区+内容区=边框盒 border box
- 外边框 margin(简写属性)
边框到其他盒子的距离
margin-top margin-left margin-right margin-bottom
盒模型应用
改变宽高范围
默认情况下，width 和 height 设置的是内容盒宽高
页面重构师：将psd文件（设计稿）制作为静态页面
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则使用的是内容盒
- 精确计算（相加相减）
- CSS3的一种属性: box-sizing
改变背景覆盖范围
默认情况下，背景覆盖边框盒
可以通过background-clip进行修改
溢出处理
overflow：控制内容溢出边框后的处理方式
断词规则
word-break，会影响文字在什么位置被截断
normal：普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）
break-all:截断所有。所有字符都在文字处截断（单词会从中间被截断）
keep-all:保持所有。所有文字都在单词之间截断
空白处理
white-space：nowrap
行盒的盒模型
常见的行盒：包含具体内容的元素
span、strong、em、i、img、video、audio、
显著特点
- 盒子沿着内容延申
- 行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型、间接调整。
-
内边框（填充区）
水平方向有效，垂直方向不会占据空间。 -
边框
水平方向有效，垂直方向不会实际占据空间。
- 外边距
水平方向有效，垂直方向不会实际占据空间。
行块盒
display：inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
空白折叠
空白折叠，发生在行盒（行块盒）内部 或 行盒之间
可替换元素 和 非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
div、p、span、a元素
少部分元素：页面上显示的结果，取决于元三年属性，称为可替换元素
img、video、audio、
- 绝大部分可替换元素是行盒
- 可替换元素类似于行快盒，盒模型中所有尺寸都有效。
常规流
盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
常规流布局
常规流，文档流，普通文档流，常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域
绝大部分情况下，盒子的包含块，为其父元素的内容盒
块盒
- 每个块盒的总宽度，必须刚好等于包含块的宽度
宽度的默认值的auto
margin的取值也可以是auto，默认值是0；
width吸收能力强于margin
若宽度、边框、内外边距计算后、仍有剩余空间，该剩余空间被margin-right全部吸收完
在常规流中，块盒在其包含块中居中，可以定宽、然后左右margin设置为auto。
auto：将剩余空间吸收掉
- 每个块盒垂直方向上的auto值
heigtt：auto 表示适应内容的高度；
margin：auto 表示0；
- 百分比取值
padding、宽margin可以取值为百分比。
以上的所有百分比相对于包含块的宽度。
高度的百分比：
1）. 包含块的高度是否取决于子元素的高度，设置百分比无效（父元素未设置高度）
2.） 包含块的高度不取决于子元素的高度，百分比相对于父元素高度（父元素设置了高度）
- 上下外边距的合并
两个常规流块盒，上下外边距只要相邻，就会进行合并。
两个外边距取最大值。
浮动
应用场景
- 文字环绕
- 横向排列
浮动的基本特点
修改float属性为：
- left：左浮动，元素靠上靠左
- right：右浮动，元素靠上靠右
默认值为none
- 当一个元素浮动后元素必定为块盒（更改display属性为block）
- 浮动元素的包含块，和常规流一样，为父元素的内容盒
盒子尺寸
- 宽度为auto时，适应内容宽度
- 高度为auto时，与常规流一致，适应内容的高度
- margin为auto时，为0；
- 边框，内边框，，百分比设置与常规流一样
盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子靠上靠右排列
- 浮动盒子在包含块中排列时，会避开常规流块盒
- 常规流块盒在排列时，无视浮动盒子
- 行盒在排列时，会避开浮动盒子
- 外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒
高度坍塌
高度坍塌：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
解决方案：清除浮动，涉及css属性：clear
- 默认值：none
- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方
定位：
手动控制元素在包含块中的精准位置
涉及的css属性：position
positon属性
- 默认值：static，静态定位（不定位）
- relative：相对定位
- absolute：绝对定位
- fixed：固态定位
一个元素，只要position的取值不是static，认为该元素时一个定位元素
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
- 文档流中的元素拜放时，会忽略脱离了文档流的元素
- 文档流中元素计算自动高度时，会忽略脱离了文档流的元素
相对定位
不会导致元素脱离文档流，只是让元素在原来的位置上进行偏移
可以通过4个css属性对设置其位置：
- left
- right
- top
- bottom
盒子的偏移不会对其它盒子造成任何影响。
绝对定位
- 宽高为auto，适应内容
- 包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）
固定定位
其他情况和绝对定位完全一样。
包含块不同：固定为视口（浏览器的可视窗口）
定位下的居中：
- 定宽（高）
- 将左右（上下）距离设置为0
- 将左右（上下）margin设置为auto
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文
设置z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，则遇到常规流，浮动元素，则会被其覆盖
补充
- 绝对定位，固定定位元素一定是块盒
- 绝对定位，固定定位元素一定不是浮动
- 没有外边距合并
扫一扫
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
