web前端——html+css知识点总结(中)

背景

background-color: 背景颜色
background-image: url(img/pic.gif); 背景图片
background-repeat:  背景是否平铺
no-repeat; 不平铺
repeat-x; 沿x轴平铺
repeat-y; 沿y轴平铺

background-position:x y ；背景图片的位置
单位 px % left right top bottom center
两个值的时候：x轴的位置 y轴的位置
一个值的时候：第二个值默认是center

复合写法：
background：背景颜色 背景图片 是否平铺 背景位置
都可以省略不写，但是背景颜色和图片至少留一个

background-attachment:背景图片是否跟随页面其他部分滚动而滚动
fixed; 不滚动 固定在指定位置
scroll 滚动

边框

1. border-top-width: 10px; 上边框的宽度
   border-top-style: ; 上边框的样式
   solid 实线、dotted 点状、dashed 虚线、double 双线
   border-top-color: 上边框的颜色

2. 组合方式
   border-top:10px solid red;
   设置上边框：10px 实线 颜色
   border:10px solid red;
   所有边框的样式一样

3. 其他样式
   border-width: 10px 20px 30px 40px; 边框的宽度
border-style: solid dashed dotted double;边框的样式
border-color: red yellow skyblue green; 边框的颜色
   一个值：四个边框
   两个值：上下 左右
   三个值：上 左右 下
   四个值：上 右 下 左（从上边框开始，顺时针一圈）

内边距 padding

内容和边框之间的距离
padding-left: 左边的内边距
padding-top: 上边的内边距
padding-right: 右边的内边距
padding-bottom: 下边的内边距
复合写法：
padding：
一个值：四个方向的内边距
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左

外边距margin

边框以外的距离
margin-top: 上边的外边距
margin-bottom: 下边的外边距
margin-left: 左边的外边距
margin-right: 右边的外边距
复合写法：
margin：
一个值：四个方向的外边距
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左

盒子居中margin: 0 auto;

使用margin时会遇到两个问题
margin的两个问题

1. 问题一:margin-top和margin-bottom相遇的时候，会出现重叠的情况，谁的值大取谁的值，两个值相等的时候，取其中一个
   解决办法：给其中一个加margin值

2. 问题二、给大盒子里的小盒子加margin-top 会出现带着大盒子向下移动的情况（如果大盒子有边框，有padding-top, 小盒子不是大盒子的第一个子元素，都不会出现这个情况）
   解决办法：给大盒子加padding-top

3. margin和padding使用需注意:
   内联元素可设置margin和padding , 左右margin和左右padding可以设置 , 上下margin没有作用
   上下padding不会把上下的内容挤走，但是背景可以延伸出去，padding-top会把上面的内容覆盖住，padding-bottom会在下面内容的后面 , 可以给内联块标签设置margin和padding值 , 但是设置margin：0 auto没有作用

盒模型（盒子模型）

本质就是一个盒子，用来封装周围的html标签
包含：内容（width，height），padding，border，margin
标准盒模型
盒模型的宽度=内容的宽度+左右的padding+左右border+左右margin
盒模型的高度=内容的高度+上下的padding+上下的border+上下margin

怪异盒模型
width包含了内容，左右padding，左右border
height包含内容，上下padding，上下border
宽度=width+左右margin
高度=height+上下margin

---

块标签，内联标签，内联块标签 互相转换

块标签

1. 单独占一行
2. 不设置宽度的时候，宽度是一整行
3. 可以设置宽度高度padding margin等样式
4. 块元素里面可以放块元素，内联元素，内联块元素，但是p标签除外，p标签里面不能放块元素

内联标签

1. 在同一行里显示
2. 宽度和高度有内容决定
3. 不能设置宽高上下margin padding等样式
4. 内联标签里不要放块标签，但是a标签特殊，a标签里面还不能放表单的提交按钮等有交互功能的标签，a标签里也不能放a标签

内联块标签

1. 在同一行显示
2. 可以设置宽度高度padding margin等样式

display: block; 把元素转换成块
display: inline;把元素转换成内联
display: inline-block;把元素转换成内联块
display: none; 隐藏元素 元素不占位
visibility: hidden;隐藏元素 占位

浮动

float：left
float:right

标准流（文档流）：文档中可显示对象，在排列时所占的位置

特点:

1. 浮动元素脱离文档流不占位，不脱离文本流
2. 浮动会让元素按照指定的方向浮动
3. 浮动元素碰到父元素的边缘就换行
4. 内联元素设置浮动，就可以支持宽高了
5. 块元素不设置宽度的话，设置浮动，宽度就变成由内容撑开

使用浮动时会出现的问题
浮动产生的问题：子元素脱离文档流不占位，父元素的高度撑不起来，下面的元素往上移动

解决办法：

1. 给浮动元素的父元素设置高度
2. 给浮动元素的父元素设置overflow：hidden/scroll/auto
3. 在浮动元素的后面加一个空的块元素，给这个元素设置clear：both
4. 给浮动元素的父元素加.clearfix的class名

.clearfix:after{
	content: '';
	display: block;
	clear: both;
}
.clearfix{
	*zoom: 1;
}

5. 给浮动元素的父元素也加浮动

用途:
6. 利用浮动元素脱离文档流但是不脱离文本流这个特点，可以实现文字环绕图片
7. 给图片设置浮动

相对定位

position: relative;

1. 相对于自己原来的位置进行定位
2. 如果只加了相对定位，没有加具体的位置，对这个元素没有什么影响
3. 配合left right top bottom使用
4. 提升层级
   z-index只用加了定位的元素上

绝对定位

position: absolute;

1. 如果只给这个元素加绝对定位，父元素（父元素的父元素）没有加相对定位，相对于初始包含块定位，根据用户代理的不同，初始包含块可能是html也可能是画布
2. 通常绝对定位要配合相对定位使用，给子元素加绝对定位，父元素加相对定位（子绝父相），如果父元素身上有其他定位也可以
3. 配合left right top bottom使用
4. 提升层级

设置小盒子在大盒子中间的位置

1. 小盒子和大盒子宽高都已知的情况
   使用padding
   使用margin
   给小盒子设置绝对定位，大盒子设置相对定位

2. 小盒子宽高已知，大盒子宽高未知
   给大盒子设置相对定位。
   给小盒子设置绝对定位，left:50%;top:50%; margin-left:负小盒子宽度的一半；margin-top:负小盒子高度的一半

3. 小盒子和大盒子宽高都未知
   给大盒子设置相对定位
   给小盒子设置绝对定位，left：0；top:0; right:0; bottom:0; margin:auto;

固定定位

position: fixed;

1. 相对于浏览器的窗口进行定位的
2. 配合着left top right bottom一起使用
3. 提升层级

不透明度

opacity
取值：0 到1
数值越大，越不透明

脱离文档流的属性
浮动
绝对定位
固定定位
都能让内联元素支持宽高

---

BFC

BFC(Block formatting context)直译为"块级格式化上下文"。
指页面中的渲染区域，并且拥有一套渲染规则，他决定了其子标签如何定位，以及与其他标签的相互关系和作用。

1. 如何生成BFC
   （1）根元素 html
   （2）float的值为left或right
   （3）overflow的值为hidden或scroll或auto
   （4）display的值为inline-block
   （5）position的值为absolute或fixed

2. BFC的特性（约束规则）
   （1）内部的标签会在垂直方向上一个接一个的放置
   （2）垂直方向上距离由margin决定，属于同一个BFC的两个相邻的标签的margin会发生重叠
   （3）每个标签的左外边距与包含块的左外边界相接触（从左向右），即使浮动标签也是如此。
   （4）BFC的区域不会与float的标签区域重叠
   （5）计算BFC高度的时候，浮动子元素也参与计算
   （6）BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响外面的标签，反之亦然

3. BFC的主要用途（解决的问题）
   （1）外边距重叠
   （2）自适应两栏或三栏布局
   （3）防止字体环绕
   （4）清除浮动
   ie兼容问题单独描述

---

css hack(可以处理ie不同版本之间的显示情况)

1. 属性hack

_ 在属性名前面加下划线 ie6及以下版本认识
*在属性名前面加星号 ie7及以下版本认识
\9 在属性值的后面加 ie6 及以上版本认识
\0 在属性值的后面加 ie8 9 认识

2. 选择符级hack
   在选择器前面加html ie5 ie6里面认识
   在选择器前面加+html 只有ie7认识

3. 条件hack
   gt 大于
   gte 大于等于
   lt 小于
   lte 小于等于
   ！ 非

<!--[if ! ie 8]>
<p>除了ie8以外的ie版本会显示这句话</p>
<![endif]-->
 
<!--[if lt ie 8]>
<p>在小于ie8的版本显示这句话</p>
<![endif]-->

---

雪碧图 css sprites 精灵图

把许多小图标整理到一张大图片上（只有小图标整理到大图片上，大的图片不再整理），通过background-image， background-repeat，background-position 配合，在页面中漏出想要漏出的图标

好处：

1. 减少http的请求
2. 减少图片命名的好处
3. 页面更换风格方便

缺点：
4. 制作麻烦，需要设置盒子的宽度和测量背景的位置
5. 如果需要改变其中一个图标，需要重新整合这张图片
6.
页面布局单独详细描述

网页标题前面的小图标

把图片转换为.ico的后缀（可以去比特虫的网站）

鼠标变手型

cursor: pointer;

tdk

都写到head标签里面
关键字
描述

常用图片格式及特点

格式	优点	缺点	使用场景
jpg	色彩丰富,文件小	有损压缩,反复保存图片质量下降明显	色彩丰富的图片/渐变图片
gif	文件小、支持动画、透明无兼容性问题	只支持256种颜色	色彩简单的logo/icon/动图
png	无损压缩、支持透明、简单图片尺寸小	不支持动画,色彩丰富的图片尺寸大	logo/icon/透明图
webp	文件小、支持有损和无损压缩、支持动画、透明	浏览器兼容性不好	支持webp格式的app和webview

SVG单独描述

---

新建字体

@font-face{
            /* 给新的字体起的名字 */
            font-family: 'yourfont';
            /* 引入新字体的路径 */
            src: url(FZLTCXHJW.TTF)
        }
        
 .box{
            font-size: 50px;
            /* 使用字体 */
            font-family: 'yourfont';
        }

---

html5

html5的新特性

1. 内容结构更加简洁
   （1） 声明文档更加简洁
   （2） 编码格式更加简洁
   （3） html head body都可以省略不写
   （4） 有的标签的结束标签可以省略不写
   （5） 属性名和属性值是相同的时候可以把属性值省略不写
   （6） 属性值是true的时候也可以省略不写
   （7） 属性值的引号可以省略不写
2. 新增了结构元素
3. 新增了表单相关内容
4. 音频和视频
5. canvas
6. 地图
7. 拖放
8. 对本地离线存储有更好的支持

表单外元素提交

<form id="sigequan">
</form>
 
<input type="text" form="sigequan">

HTML5新增元素

1. 页头
2. 页脚
3. 导航
4. 文档中独立的内容
5. 页面中内容的章节
6. 侧边栏
7. 标题组

8. 设置独立的流内容
9. 定义带有记号的文本
10. 时间

HTML5新增多媒体标签

1. 音频
   autoplay自动播放 preload="auto"页面打开就开始加载音频或视频
   src属性：规定要播放的音频/视频的 URL
controls属性：规定浏览器应该为音频/视频提供播放控件
   loop属性：规定当音频/视频结束后将重新开始播放
   muted属性：规定要播放的音频/视频为静音
2. 视频
   src属性：规定要播放的音频/视频的 URL
controls属性：规定浏览器应该为音频/视频提供播放控件
   loop属性：规定当音频/视频结束后将重新开始播放
   muted属性：规定要播放的音频/视频为静音
   height属性：规定视频播放器的高度
   width属性：规定视频播放器的宽度
   poster属性：预览图片
3. 媒介元素
   4.src属性：规定要播放的音频/视频的 URL
type属性：规定媒体资源的MIME类型

HTML5新增表单元素

1. 用于包含URL地址的输入域（移动端会弹出带.com的键盘）
2. 用于包含e-mail地址的输入域（移动端会弹出带@键盘）
3. 用于搜索域
4. 用于输入电话号码的文本域（移动端会弹数字键盘）
5. 用于包含数值的输入域（有效值是和最小值和步长有关）
6. 用于包含一定范围内数字值的输入域
7. 用于选取颜色
8. 选择年月日
9. 用于手动输入一个日期时间
10. 用于选择一个日期和时间
11. 用于选择一个月份
12. 用于选择一个时间
13. 用户可以选择一整个周
14. 选项列表

<input id="myCar" list="cars"/>
<datalist id="cars">
    <option value="WEB"></option>
    <option value="ASD"></option>
</datalist>

HTML5新增表单属性

1. max 属性规定输入域所允许的最大值
   min 属性规定输入域所允许的最小值
   step 属性为输入域规定合法的数字间隔
2. placeholder 属性描述输入域所期待的值
3. autofocus属性自动获取焦点
4. autocomplete属性自动完成自动填充
5. form属性规定输入域所属的表单
6. required 必填项
7. pattern 属性规定用于验证 input 域的模式
8. multiple 属性规定输入域中可选择多个值
9. list属性实现数据列表的下拉效果