HTML和CSS ---- 中

1- CSS 常用属性

1. 背景样式

属性名	作用	属性值
background-color	设置背景颜色	颜色
background-image	设置背景图片地址	url(图片文件路径)
background-repeat	设置背景图片重复方式	repeat：重复，默认值。 repeat-x：水平方向重复。 repeat-y：垂直方向重复。 no-repeat：不重复。
background-position	设置背景图片在元素上的位置	关键字、坐标、百分比
background-attachment	设置背景图片固定	scroll：不固定，默认值。 fixed：固定
background	复合属性	多个子属性的值

1) 设置背景图像的位置 background-position

使用关键字设置属性值：

/* 设置两个值 */ 
/* 
  水平方向： left right center
  垂直方向： top bottom center
*/
background-position: left top;
background-position: right bottom;
background-position: right center;
background-position: bottom left;

/* 设置一个值  另一个默认 center*/
background-position: left;
background-position: bottom;
background-position: center;

使用长度指定的坐标设置属性值：

/*
  元素左上角为坐标原点
  x 轴线方向从左到右，y 轴从上到下
  使用两个长度表示图片左上角的坐标位置
*/
background-position: 20px 40px;
background-position: 100px -40px;

/* 长度和关键字混合使用 */
background-position: 50px bottom;
background-position: center 100px;

/* 只设置一个长度被认为是 x 坐标，垂直方向默认 center */
background-position: 50px;

使用百分比设置图像属性值：

/*
  找出元素上的位置与图片上的位置，两点重合
*/
background-position: 50% 50%;
background-position: 100% 100%;

/* 只设置一个值被认为是水平位置，垂直位置默认 center */
background-position: 100%;

background-position 的两个子属性：

background-position-x	水平位置
background-position-y	垂直位置

2) 背景图像固定 background-attachment

1. 实现背景图片固定的效果， 背景图片不随元素滚动，元素滚动的时候能够显示背景图像的不同部分
2. 当设置了 background-attachment:fixed，背景图片定位的坐标系不再是元素，而是视口

2. 鼠标光标样式

属性名	作用	属性值
cursor	设置鼠标悬停在元素上之后的光标样式	default：默认值。 pointer：小手。 move：移动图标。 url(图片地址)：自定义光标图片

 自定义光标图片：

cursor: url(../images/arrow.ico),pointer;

3. 列表样式

属性名	作用	属性值
list-style-type	设置列表项图标类型	disc：实心圆。 circle：空心圆。 none：没有图标（常用）
list-style-position	设置列表项图标位置	outside：在li的外面，默认值。 indside：在li的里面。
list-style-image	自定义列表项图标	url(图片地址)
list-style	复合属性	没有顺序和数量要求

注意： 列表相关的样式只能设置给 ol、ul、li 才能生效。

4.表格样式

属性名	作用	属性值
table-layout	设置列宽固定	auto：自动，默认值。 fixed：固定。
border-collapse	设置合并单元格边框	separate：不合并，默认值。 collapse：合并。
border-spacing	设置单元格之间的距离	长度
caption-side	设置表格标题位置	top：在表格上面，默认值。 bottom：在表格下面。
empty-cells	设置是否显示没有内容的单元格	show：显示，默认值。 hide：隐藏。

总结：

1. 以上 5 个表格样式相关的 CSS 属性只能设置给 table 元素
2. 设置单元格之间的距离 border-spacing，生效的前提：单元格边框不能合并
3. 设置 empty-cells,生效前提：单元格边框不能合并

2- CSS选择器

 1. 基本选择器

ID选择器、类选择器、标签名选择器、全局选择器

2. 组合选择器

1）后代选择器：

选择器1 选择器2 {
    
}

2） 子元素选择器

选择器1 > 选择器2 {
    
}

3）交集选择器

 选择器1选择器2 {
    
}

4）并集选择器

 选择器1,选择器2 {

}

3. 伪类选择器

 :link            未访问过的超链接
:visited        已访问过的超链接
:hover            悬停在元素上
:active            悬停在元素且鼠标按键按下

如果写多个伪类选择器，要求按照顺序： :link :visited :hover :active
love - hate   

4. 选择器权重

1. 基本选择器之间的权重

 ID选择器 > 类选择器、伪类选择器 > 标签名选择器 > 全局选择器

2. 组合选择器优先级比较规则

1. 规则：
   ① 先比较ID选择器的数量，数量多该选择器权重高
   ② 如果ID选择器无法分胜负，比较类选择器以及伪类选择器的数量，数量多该选择器权重高。
   ③ 依然无法分胜负，比较标签名选择器的数量，数量多该选择器权重高。
   
2. 该规则适用于后代元素选择器、子元素选择器、交集选择器
   并集选择器逗号隔开的选择器各自论各自的 

3-  盒子模型的深入理解

1. 盒子模型的组成

1）概念

1. 每个元素都可以比作一个盒子，页面布局就是盒子的排列和堆砌
2. 盒子模型涉及的概念： 内容、内边距、边框、外边距

 内容（content）： 内容区域是元素最主要的区域，元素中的文本内容以及后代元素都显示在内容区域。

内边距（padding）： 是内容区域与元素边界（边框）之间的距离。

边框（border）： 在元素的边界上。

外边距（margin）： 是元素与父元素或其他元素的距离。

 2）影响大小的因素

1. 元素总的宽高 = 内容宽高 + 内边距 + 边框宽度
2. 外边距主要影响盒子的位置

 2. 盒子中的内容区域

1）设置内容区域的宽高的 CSS 属性

CSS 属性名	功能	属性值
width	设置内容区域宽度	长度
max-width	设置内容区域最大宽度	长度
min-width	设置内容区域最小宽度	长度
height	设置内容区域高度	长度
max-height	设置内容区域最大高度	长度
min-height	设置内容区域最小高度	长度

2）设置内容宽高的值规则

1. 设置最小最大宽高更多的是用于限制默认算出来的宽高
2. 最小最大宽高一般不与固定宽高一起设置
3. 行内块、行内元素默认宽高都里面的文本内容或后代元素撑开
4. 块级元素默认高度被里面文本内容或后代元素撑开

3） 块级元素的默认内容宽度的计算规则

元素的默认总宽度 = 父元素内容宽度 - 元素的左右外边距
元素的默认内容宽度 = 父元素内容宽度 - 元素的左右外边距 - 元素的左右边框宽度 - 元素的左右内边距宽度

 3. 盒子的内边距 padding

1）相关CSS属性

CSS 属性名	功能	属性值
padding-left	左内边距	长度
padding-right	右内边距	长度
padding-top	上内边距	长度
padding-bottom	下内边距	长度
padding	复合属性	1~4个长度

2）padding 设置规则

padding 复合属性的设置规则：

/* 1个值： 所有方向的内边距 */
padding: 15px; 

/* 2个值: 上下 左右 */
padding: 10px 20px;

/* 3个值： 上 左右 下 */
padding: 10px 15px 30px;

/* 4个值： 上 右 下 左 */
padding: 10px 20px 15px 40px;

 padding 值设置的规则：

1. 内边距的值不能是负值
2. 使用百分比设置内边距，不论任何方向都参考父元素内容的宽度。

 不同显示模式的元素设置内边距：

1. 块级元素、行内块元素可以完美设置各个方向内边距。
2. 行内元素可以完美设置左右内边距，上下内边距设置不完美。

 4. 边框 border

CSS 属性名	功能	属性值
border-style	设置边框风格	none：无风格。 solid：实线。 dashed：虚线。 dotted：点线。 double：双实线。
border-color	设置边框颜色	颜色
border-width	设置边框宽度	长度
border-left-style border-left-color border-left-width border-left border-right-style border-right-color border-right-width border-right border-top-style border-top-color border-top-width border-top border-bottom-style border-bottom-color border-bottom-width border-bottom
border	复合属性

5. 外边距margin

 1）相关CSS属性

CSS 属性名	功能	属性值
margin-left	左外边距	长度
margin-right	右外边距	长度
margin-top	上外边距	长度
margin-bottom	下外边距	长度
margin	复合属性	1~4个长度

 2）margin 设置规则

margin 复合属性的设置规则：

1个值： 4个方向一起设置
2个值： 上下 左右
3个值： 上 左右 下
4个值： 上 右 下 左

 margin 值设置的规则：

1. 外边距可以设置为负值
2. 使用百分比设置外边距，不论任何方向都参考父元素内容的宽度。
3. 块级元素左右外边距都设置为 auto，元素在父元素中水平居中。

不同显示模式的元素设置外边距：  

1. 块级元素、行内块元素可以完美设置各个方向外边距。
2. 行内元素只能设置左右外边距，上下外边距无法设置。
3. 只有块级元素才可以把左右外边距设置为 auto,行内和行内块不可以。 

3）maigin 塌陷 

什么是 margin 塌陷？

1. 第一个子元素的上外边距和最后一个子元素的下外边距，塌陷到父元素上
2. 只有块级元素的上下外边距才会塌陷！

 如何解决 margin 塌陷？

- 方案一：  给父元素设置边框
- 方案二：  给父元素设置上下的内边距
- 方案三：  给父元素设置 overflow:hidden;

6. 内容溢出 

CSS 属性名	功能	属性值
overflow	设置溢出内容的显示方式	visible：显示，默认值。 hidden：隐藏。 auto：自动，如果溢出显示滚动条。 scroll：显示滚动条。
overflow-x	水平方向内容溢出显示方式	同上
overflow-y	垂直方向内容溢出显示方式	同上

 auto 与 scroll 的区别：

 1. 设置为 auto，如果内容不溢出没有滚动条，如果内容溢出就有滚动条
2. 设置为 scroll，不论内容是否溢出都有滚动条。

 7. 隐藏元素

display 属性：

display: none;彻底隐藏元素，不占据任何位置！

visibility 属性：

visibility: hidden;仍然占据位置！

4- 浮动

1. 浮动的简介

1. 浮动最初实现文字环绕效果。
2. 现在浮动是主流的布局方式之一。

2. 元素浮动之后的特点

1. 元素浮动之后会脱离文档流，如果与文档流中的元素位置发生重叠，浮动元素显示在上层
2. 多个兄弟元素全部设置浮动，会水平排列，父元素宽度不够，自动换行
3. 不论元素原来是行内的、块级的、行内块的，设置为浮动，就是浮动元素，按照浮动元素的特点进行显示
4. 浮动元素的显示特点：
   ① 可以完美设置宽高、内外边距
   ② 没有外边距的合并和塌陷问题
   ③ 不会被父元素当做文本处理

 3. 浮动元素产生的影响

1）对后面兄弟元素的影响

影响：

浮动元素后面的兄弟元素会占据浮动元素原来的位置，会显示在浮动元素的下层

 解决：

给紧邻在浮动元素后面的那一个兄弟元素设置 clear:both;

 2）对父元素的影响

影响：

如果父元素没有设置固定高度，高度会塌陷，浮动的子元素无法撑起父元素的高度！

 解决：

1. 方案一： 父元素设置固定高度（不推荐）
2. 方案二： 给父元素也设置浮动（不推荐，会带来新的问题）
3. 方案三： 给父元素设置 overflow:hidden
4. 方案四： 在浮动元素的最后面添加一个兄弟块级元素，设置高度为0，设置 clear:both
5. 方案五： 原理同方案四，利用伪元素选择器动态给父元素创建最后一个子元素，再设置 clear:both

.wrapper::after {
    content: "";
    dispaly: block;
    clear:both;
}     

4. 浮动相关的 CSS 属性

CSS 属性	功能	属性值
float	设置浮动	none：默认值，不浮动。 left：相左浮动。 right：向右浮动
clear	清除浮动	left：清除前面元素左浮动影响。 right：清除前面元素右浮动影响。 both：清除前面元素浮动的影响。

 5- 定位

1. 相对定位

1）如何设置相对定位

position: relative;

2）相对定位元素定位的参考点

相对于原来的位置进行定位

3）相对定位元素的特点

1. 不脱离文档流
2. 不改变显示模式，仍然保持原显示模式的特点
3. 可以使用 left、right、top、bottom 调整元素的位置
   使用百分比作为长度，left和right参照父元素内容宽度，top和bottom参照父元素高度

2. 绝对定位

1）如何设置绝对定位

position: absolute;

2）绝对定位元素定位的参考点

1. 根据包含块进行定位
2. 普通元素包含块是父元素
   绝对定位元素包含块是第一个定位的祖先元素，如果祖先元素都不定位，包含块就是整个页面。

3）绝对定位元素的特点

1. 脱离文档流，与其他元素位置重叠显示在上面
2. 不论元素原来的限时模式是行内、块级、行内块或者是浮动元素，设置为绝对定位就是绝对定位元素，拥有自己的显示特点
3. 绝对定位元素显示特点：
   ① 可以设置宽高、内外边距
   ② 不存在外边距的塌陷和合并
   ③ 不会被父元素作为文本处理
4. 可以使用 left、right、top、bottom 调整元素的位置
   使用百分比作为长度，left和right参照包含块宽度，top和bottom参照包含块高度

3. 固定定位

1）如何设置绝对定位

position: fixed;

2）绝对定位元素定位的参考点

参照包含块进行定位，固定定位元素的包含块是视口

3）绝对定位元素的特点

1. 脱离文档流，与其他元素位置重叠显示在上面
2. 不论元素原来的限时模式是行内、块级、行内块或者是浮动元素，设置为绝对定位就是固定定位元素，拥有自己的显示特点
3. 固定定位元素显示特点：
   ① 可以设置宽高、内外边距
   ② 不存在外边距的塌陷和合并
   ③ 不会被父元素作为文本处理
4. 可以使用 left、right、top、bottom 调整元素的位置
   使用百分比作为长度，left和right参照包含块宽度，top和bottom参照包含块高度

4.定位层级z-index

1. 定位元素的显示层级高于不定位的元素
2. 绝对定位、固定定位、相对定位显示层级是一样的，后面元素会显示在前面元素的上面
3. 使用 z-index 设置元素的显示层级，使用纯数字，数字越大显示层级越高，可以是负值
4. 只有定位的元素设置 z-index 才可以生效

5. 定位相关CSS属性

CSS 属性名	功能	属性值
position	设置定位	static：不定位，默认值。 relative：相对定位。 absolute：绝对定位。 fixed：固定定位
left	设置位置	长度
right	设置位置	长度
top	设置位置	长度
bottom	设置位置	长度
z-index	设置显示层级	纯数字

6. 定位的应用

1）定位元素（绝对和固定）的默认宽高计算

1. 定位的元素（绝对定位和固定定位）如果不设置宽高，默认被内容撑开
2. 定位元素如果没有设置固定的宽度，可以同时设置 left 和 right，并对宽度产生影响
   定位元素如果没有设置固定的高度，可以同时设置 top 和 bottom，并对高度产生影响

2）设置定位元素（绝对和固定）在包含块中水平垂直都居中

方案一：

position: absolute;
left: 50%;
top: 50%;
margin-left: -元素宽度/2;
margin-top: -元素高度/2;

方案二：

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

6-  HTML5 新增语义化标签

1. 新增页面结构标签（最重要）

标签名	语义和功能
header	页头
footer	页脚
nav	导航
section	页面或文章中的一部分
article	文章
aside	侧边栏
main	主要内容

2. 新增状态标签（了解）

标签名	语义和功能	属性
meter	表示静态的度量	max、min、value、low、high、optinum
progress	表示动态的进度	max、value

meter 和 progress 什么区别？   

1. meter 表示静态的度量，如电量、磁盘容量、温度等
2. progress 表示动态的进度，如进度条 

3. 新增注释标签（注音标签）

标签名	语义和功能
ruby	注音包裹标签
rt	注音

<ruby>
    魑魅魍魉
    <rt>chi mei wang liang</rt>
</ruby>

4.新增文本标签

标签名	语义和功能
mark	标记

可以用于标记搜索结果中的关键字 

7- HTML5 表单新增功能

1. 表单控件新增属性

placeholder            设置提示文字，用于输入框类、文本域
required            设置为必填或必选
autofocus            设置自动获取焦点
autocomplete        设置是否开启浏览器对输入框的输入记录   值：on(默认值)/off
pattern                使用正则表达式对表单输入框的内容进行验证

2.input 标签的 type 属性新增的值

1）输入框类（5个）

<!-- 邮箱 提交表单的时候会验证 如果不填写就不验证-->
<input type="email">

<!-- URL 提交表单的时候会验证 如果不填写就不验证-->
<input type="url">

<!-- 数字 -->
<input type="number">  <br>
<input type="number" min="100" max="999">
<input type="number" min="0" max="10" step="0.1">

<!-- 电话号码 不会验证，移动端会弹出数字键盘-->
<input type="tel">

<!-- 搜索框 -->
<input type="search">

2）范围选择框（1个），

<input type="range">
<input type="range" min="10" max="50">
<input type="range" min="0" max="10" step="5">

3）颜色选择框（1个）

<input type="color">

4）日期时间选择框类（5个）

<!-- 年月 -->
<input type="month"> <br>
<!-- 哪一年的第几周 -->
<input type="week"> <br>
<!-- 年月日 -->
<input type="date"> <br>
<!-- 时间 -->
<input type="time"> <br>
<!-- 日期和时间 -->
<input type="datetime-local">

3.form 标签新增属性

novaildate        不进行验证，该属性不需要设置值

8- HTML5 音视频

1. 音视频标签

标签名	功能和语义	属性
video	视频	src：设置视频文件地址。 width：设置宽度。 height：设置高度。 controls：显示控制条，无需值。 muted：设置静音，无需值。 autoplay：设置自动播放，无需值。 loop：设置循环播放，无需值。 preload：设置预先加载，无需值。 poster：设置封面图片的地址。
audio	音频	src：设置音频文件地址。 controls：显示控制条，无需值。 muted：设置静音，无需值。 autoplay：设置自动播放，无需值。 loop：设置循环播放，无需值。 preload：设置预先加载，无需值。
source	加载视频或音频	src：音频或视频文件的地址。 type：文件的类型

1. 视频只有在静音的前提下设置 autoplay 才可以生效
2. 音频无论是否静音，设置 autoplay 都不会生效

2. 浏览器支持的音视频格式

1）视频格式

mp4
webm
ogg

2）音频格式

mp3
wav
ogg