html+css知识点复习回顾，复习参考

一、HTML部分

1、两个盒子

、

2、图像标签

3、相对路径和绝对路径

①相对路径：以引用文件所在位置为参考，而建立出的目录路径。同一级路径直接写文件名，下一级路径用/表示，上一级用../表示。
②绝对路径：完整的路径名

4、超链接标签

文本或图像，目标窗口弹出方式：当前窗口还是新窗口等。锚点链接点击跳转到id名为#xxx的标签那去。

5、表格标签

①基本语法

用于定义表格标签
用于定义表格的行，嵌套在table中
表头
用于定义单元格，嵌套在tr中
②合并单元格
跨行合并：rowspan="合并单元格个数"
跨列合并：colsspan="合并单元格个数"
合并三步走：先确定跨行跨列，再找到目标单元格，最后删除多余单元格

6、列表标签

①无序列表

<ul>
	<li>xxxli>
	<li>xxxli>
	...
ul>

②有序列表

<ol>
	<li>xxxli>
	<li>xxxli>
	...
ol>

③自定义列表（dd的内容围绕着dt的内容来写）

<dl>
	<dt>xxxdt>
	<dd>xxxdd>
	<dd>xxxdd>
	...
dl>

7、表单标签

①三部分组成
表单域、表单控件（表单元素）、提示信息
②表单域

各种表单元素

③表单元素
（1）
type的属性值有：text（文本款）、button（按钮）、checkbox（复选框）、radio（单选框）、file（）、password（密码框）、submit（提交按钮）、rwset（重置按钮）、file（上传按钮）
name：定义input元素的名称
value：规定input元素的值
checked：规定此input元素首次加载时应当被选中
maxlength：规定输入字段中的字符的最大长度
（2）标签为input元素定义标注，for中对应input中的id值。
（3）下拉表单元素

<select>
	<option>xxxoption>
	<option>xxxoption>
	...
select>

（4）文本域元素```文本内容

8、HTML5新特性

①新增语义化标签

：头部标签

：导航标签

：内容标签

：定义文档某个区域

：侧边栏标签

：尾部标签
这些新增标签在移动端常用

---

②新增多媒体标签

（1）音频

其他属性：

（2）视频

其他属性：

---

③新增input表单和属性
（1）新增input表单

（2）新增input属性

二、CSS部分

1、CSS选择器

①标签选择器
用HTML标签名作为选择器
②类选择器（xxx为类名）

.xxx{
xxx:xxx;
...
}

③id选择器（xxx为id名）

#xxx{
xxx:xxx;
...
}

④通配符选择器
选取页面中所有元素

*{
xxx:xxx;
...
}

前面几个是基础选择器，接下来几个是复合选择器：

⑤后代选择器
语法：

元素1 元素2{
xxx:xxx;
}

选择元素1里的元素2，元素2可以是子级，也可以是更下级。

⑥子选择器
语法：

元素1>元素2{
xxx:xxx;
}

只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。

⑦并集选择器
语法：

元素1,
元素2{
xxx:xxx;
}

用逗号隔开，‘和’的意思

⑧伪类选择器
用冒号（:）表示
（1）链接伪类

开发中，为了确保生效，要按上图顺序写
（2）:focus伪类
一般用在表单上，哪个表单元素选择了，就赋予样式

2、CSS字体属性

body:{
	font:font-style font-weight font-size/line-height font-family;
}

这是合并写法，分别表示字体系列、粗细、大小（px）/行高、文字样式（如斜体）
字体连写顺序不能换，得按上面顺序来写，可以省略不用写的（取默认值），但必须保留font-size和font-family属性。

3、CSS文本属性

其中text-align:center可以设置文本水平居中
line-height:盒子高度可以设置文本垂直居中，line-height:小于盒子高度文本偏上，line-height:大于盒子高度文本偏上。

4、CSS引入方式

①行内样式
②内部样式
③外部样式

5、CSS的元素显示模式

①块元素
如

~

、

、

、

、
、
1. 等都是块元素

   特点：
   独自占一行
   高度、宽度、内外边距都可以控制
   宽度默认是容器（父级宽度）的100%
   是一个容器即盒子，里面可以放行内或块级元素

   ②行内元素（内联元素）
   如、、、、、、、、、等都是行内元素

   特点：
   相邻行内元素在一行上，一行可以显示多个
   高。宽直接设置是无效的
   默认宽度就是它本身内容的宽度
   行内元素只能容纳文本或其他行内元素

   ③行内块元素
   、、他们同时具有块元素和行内元素的特点

   特点：
   和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
   默认宽度就是它本身内容的宽度（行内块特点）
   高度、行高、外边距以及内边距都可以控制（块级元素特点）

   ④元素显示模式的转换
   转换为块元素：display:block
   转换为行内块元素：display:inline
   转换为块元素：display:inline-block

   6、CSS的背景样式

   background:背景颜色 背景图片地址 背景平铺 背景图片位置 背景图像滚动;

   背景图片（-image）：实际开发中，常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

   背景平铺（-repeat）：repeat（默认平铺），还有no-repeat（不平铺）、repeat-x（向x方向平铺）、repeat-y（向y方向平铺）

   背景位置（-position）：background-position:x y;
   
   背景图像滚动（-attachment）：参数值有scroll（背景图像随着对象内容滚动）和fixed（背景图像固定）

   CSS3新增的背景色半透明：
   background:rgba(0,0,0,0.3);
   最后一个参数为透明度，取值范围为0~2之间

   7、CSS三大特性

   ①层叠性
   相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突样式。层叠性主要解决样式冲突的问题。
   层叠性原则：
   样式冲突，遵循的原则就是就近原则，哪个样式离结构近，就执行哪个样式
   样式不冲突，不会层叠。

   ②继承性
   CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。
   恰当的使用继承可以简化代码，降低CSS样式的复杂性
   子元素可以继承父元素的样式（text-、font-、line、这些元素开头的可以继承，以及color属性）

   ③优先级
   当同一个元素指定多个选择器，就会有优先级的产生：
   选择器相同，则执行层叠性
   选择器不同，则根据选择器权重执行

   选择器权重：
   
   !important的用法：在属性后面添加即可：
   
   权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
   例如：
   
   这个后代选择器权重就是0020（两个类选择器权重相加）

   8、盒子模型

   ①盒子模型的四个组成部分
   CSS盒子模型本质上是一个盒子，封装周围的HTMl元素，它包括：边框、外边距、内边距和实际内容。

   边框（border）：border:border-width border-style border-color;，可以只设置一边，例如设置上边框：border-top:border-width border-style border-color;
   border-width：定义边框粗细，单位是px
   border-style：边框的样式，值：solid（实线）、dashed（虚线）、datted（点线）等
   border-color：边框的颜色

   注意：边框会额外增加盒子的实际大小

   ②内边距（padding）
   

   注意：指定padding后：
   1、内容和边框有了距离，添加内边距
   2、padding也影响了盒子的实际大小
   也就是说如果盒子有了宽度和高度，此时再指定内边距，会撑大盒子
   如果没有指定盒子宽度或高度，就不会撑大盒子，依旧是100%

   ③外边距（margin）
   

   ---

   外边距可以让块级盒子水平居中，给定两个条件即可：
   （1）必须给定宽度width
   （2）将盒子的左右外边距都设置为auto

   行内元素水平居中给其父元素添加text-align:center

   嵌套块元素垂直外边距的塌陷：
   对于两个嵌套关系（父子关系）的块元素。父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值：
   
   解决方案：
   （1）可以给父元素定义上边框
   （2）可以为父元素定义上内边距
   （3）可以为父元素添加overflow:hidden

   ---

   清楚内外边距： 网页元素有很多都带有，默认的内外边距，而且不同浏览器默认也不一致，因此我们在布局前，首先要清除下网页元素的内外边距：

   /* 这句话也是CSS的第一行代码 */
   *{
   	margin:0;
   	padding:0;
   }
   

   ④圆角边框
   在CSS3中，新增了圆角边框样式
   border-radius:length;
   radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果

   参数值可以数值或百分比的形式；
   如果是正方形，想要设置为一个园，把数值修改为高度或者宽度的一半即可，货值直接写50%；
   该属性是一个简写，可以跟四个值，分别代表左上角、右上角、右下角、左下角
   border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-left-radius、

   ⑤盒子阴影
   box-shadow:h-shadow v-shadow blur speead color inset;
   属性分别代表：
   

   9、传统网页布局的三种方式

   传统网页布局的三种方式：标准流、浮动、定位

   ①标准流
   就是标签按照规定好默认方式排列

   ②浮动
   float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块块或另一个浮动框的边缘。
   语法：选择器{float:属性}
   

   ---

   浮动特性
   加了浮动之后的元素：
   （1）浮动元素会脱离标准流（脱标），不再保留原来的位置
   （2）浮动的元素会一行内显示并且元素顶部对齐
   （3）浮动元素会具有行内块元素的特性

   ---

   浮动布局注意点
   1、浮动和标准流的父盒子搭配
   先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

   2、一个元素浮动，其他兄弟元素应该也要浮动

   ---

   清除浮动
   由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
   
   清除浮动的本质

   • 清楚浮动的本质时清除浮动元素造成的影响
   • 如果父盒子本身有高度，则不需要清除浮动
   • 清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流

   清除浮动方法一：
   语法：选择器{clear:属性值}
   
   
   清除浮动方法二：
   可以给父级元素添加overflow属性·，将其属性值设置为hidden、auto或scroll

   清除浮动方法三（:after伪元素法）：
   
   清除浮动方法四（双伪元素法）：
   
   ③定位

   浮动可以让多个块级盒子一行没有复习排列显示，经常用于横向排列盒子；
   定位则是可以让盒子自用的在某个盒子内部移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。

   定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

   定位=定位模式+边偏移

   定位模式用于指定一个元素在文档中的定位方式。
   边偏移则决定了该元素的最终位置。

   定位模式通过 position属性来设置，其值可以分为四个：
   

   选择器{
   	position:属性值;
   	top:xxx;
   	left:xxx;
   }
   

   下面除了静态定位，其他三个都会说到。

   ---

   相对定位
   选择器{position:relative;}

   特点：
   （1）它是相对于自己原来位置来移动的（即移动位置的时候参照点事自己原来的位置）
   （2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

   因此，由于相对定位没有脱标，它最典型的应用就是给后面的绝对定位当父元素用的。（子绝父相）

   ---

   绝对定位
   选择器{position:absolute;}

   特点：
   （1）绝对定位是元素在移动位置的时候，相对于它祖先元素来说的
   （2）如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
   （3）如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位祖先元素为参考点移动位置
   （4）绝对定位不再占有原先的位置（脱标）

   ---

   固定定位
   选择器{position:fixed;}
   特点：
   （1）以浏览器的可视窗口为参考点移动元素
   （2）跟父元素没有任何关系
   （3）不随滚动条滚动
   （4）固定定位不占有原来位置（脱标）

   ---

   定位叠放次序
   在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序
   选择器{z-index:1;}

   数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上

   如果属性值相同，则按照书写顺序，后来居上

   数字后面不能加单位

   只有定位的盒子才有z-index属性

   ---

   定位的拓展

   （1）绝对定位的盒子居中
   加了绝对定位的盒子不能通过margin:auto;水平居中，但是可用通过一下计算方法实现水平和垂直居中。

   选择器{
   	position:absolute;
   	/*  走父容器宽度的一半 */
   	left:50%;
   	magin-left:负的自己盒子宽度的一半;
   }
   

   （2）定位的特殊特性
   绝对定位和固定定位和浮动类似：

   • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
   • 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

   （3）脱标的盒子不会触发外边距塌陷
   浮动元素、绝对定位（固定）的元素都不会触发外边距合并的问题

   （4）绝对（固定）定位会完全压住盒子
   浮动元素不同，只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字，如下图：
   
   但是绝对定位（固定）会压住下面标准流里面所有内容

   浮动之所不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素

   10、CSS属性书写顺序（规范代码）

   建议遵循一下顺序来写：
   布局定位属性、自身属性、文本属性、其他属性
   

   ---

   页面布局整体思路：
   （1）必须确定版心（可视区）
   （2）分析页面中的行模块，以及每个行模块中的列模块。页面布局第一准则
   （3）一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二准则
   （4）制作HRML结构。遵循现有结构后有样式。
   （5）先理清布局结构，再写代码尤为重要

   11、元素的显示与隐藏

   本质：让一个元素在页面中隐藏或者显示出来
   ①display显示隐藏（隐藏后不保留位置）
   （1）display:none;隐藏对象
   （2）display:block;除了转换为块级元素之外，同时还有显示元素的意思

   ②visibility显示隐藏（隐藏后保留位置）
   （1）visibility:hidden;元素隐藏
   （2）visibility:visible;元素可视

   ③overflow溢出显示隐藏
   （1）overflow:visible;不剪切内容也不添加滚动条
   （2）overflow:hidden;不显示超过对象尺寸的内容，超出的部分隐藏掉
   （3）overflow:scroll;不管超出与否，总是显示滚动条
   （4）overflow:auto;拆除自动显示滚动条，不超出不显示滚动条

   一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
   但是如果有定位的盒子，请慎用overflow:hidden，因为会隐藏多余部分。

   12、CSS高级技巧

   ①精灵图
   （1）精灵图主要针对小的背景图片实现
   （2）主要借助于背景位置实现background-position
   （3）一般情况精灵图都是负值

   注意：
   网页中的坐标：x轴右边是正值，左边是负值；y轴下面是正值，上面是负值

   ---

   ②字体图标
   使用步骤：
   （1）下载，将文件放到同一目录
   （2）引入
   （3）使用
   （4）给标签指定字体

   ---

   ③CSS三角
   网页中常见一些三角形，使用CSS三角直接画出啦就可以了，不必做成图片或者字体图标
   
   

   ---

   ④用户界面相关样式
   （1）鼠标样式
   选择器{cursor:属性值;}
   
   （2）消除表单的默认蓝色边框线
   input{outline:none;}
   给表单添加后，就可以去掉默认的蓝色边框。

   （3）防止拖拽文本域
   文本域默认是可以拖拽来变大变小的，通过
   textatea{resize:none;}可以防止文本域拖拽。

   ---

   ⑤vertical-align属性应用
   CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
   vertica-align:属性值;
   用于设置一个元素的垂直对齐方式，但是只针对行内元素和行内块元素
   
   四条线的了解：
   
   图片和文字默认是基线对齐，可以将图片改为底线对齐：
   img{vertica-align:bottom;}

   ---

   ⑥溢出的文字省略号显示

   （1）单行文字溢出省略号显示
   
   （2）多行文字溢出省略号显示
   

   ---

   ⑦常见布局技巧
   （1）margin负值运用
   
   （2）文字围绕浮动元素
   
   （3）行内块元素的巧妙运用
   

   ---

   ⑧CSS初始化
   
   
   
   
   
   
   等等初始化。

   13、CSS3新特性

   ①新增选择器（权重为10）
   （1）属性选择器
   属性选择器可以根据特定属性来选择元素，这样就可以不用借助类或id选择器。
   
   （2）结构伪类选择器
   结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素
   
   （3）伪元素选择器
   伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
   

   注意：

   • before和after创建一个元素，但是属于行内元素
   • 新建的这个元素在文档树中是找不到的，所以我们称为伪元素
   • 语法：element::before{}
   • before和after必须有content属性，用来写内容
   • before在父元素内容的第一个创建元素，after在父元素内容的最后一个插入元素
   • 伪元素选择器和标签选择器一样，权重为1

   ---

   ②新盒模型
   css3中可用通过box-sizing来指定盒模型，有两个值可以指定content-box和border-box
   （1）box-sizing:content-box;：和子大小为width+padding+border（以前默认的）
   （2）box-sizing:border-box;：盒子大小为width，那么padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）

   ---

   ③CSS3滤镜filter
   filter属性将模糊或颜色等图像效果应用于元素
   

   ---

   ④计算盒子宽度 calc函数
   calc()此CSS函数让声明CSS属性值时执行一些计算
   width:calc(100%-80px);
   括号里面可以使用+ - * /来进行计算

   ---

   ⑤过渡
   （1）过渡动画：从一个状态 渐渐的过渡到另一个状态，现在经常和:hover一起搭配使用

   （2）语法：
   transition:要过渡的属性 花费时间 运动曲线 何时开始;
   多个属性都要加过渡的话这样写：
   transition:要过渡的属性1 花费时间 运动曲线 何时开始,要过渡的属性1 花费时间 运动曲线 何时开始,...;

   其中四个为

   • 属性：想要变化的css属性，宽度高度，背景颜色，内外边距等都可以，如果想要所有的属性都变化过渡，写一个all就可以
   • 花费时间：单位是 s（必须写单位）比如：0.5s
   • 运动曲线（可以省略）：默认ease（）
     运动曲线如下五个：
     
   • 何时开始（可以省略）：单位是秒（必须写单位），可以设置延迟触发时间，默认是0s

   过渡口诀：谁（属性）做过渡给谁加

   ---

   ⑥2D转换（transform）
   （1）可以实现元素的位移（translate）、旋转（rotate）、缩放（scale）等效果。
   （2）位移（translate）
   可以改变元素在页面中的位置，类似定位。
   语法：transform:translate(x,y);

   • translate最大的优点：不会影响到其他元素的位置
   • translate中的百分比单位是相对于自身元素的高宽
   • 对行内元素没有效果

   （3）旋转（rotate）
   transform:rotate(度数)

   • rotate里面跟度数，单位是deg，比如rotate(45deg)
   • 角度为正时，顺时针；负时，逆时针
   • 默认旋转中心点时元素的中心点

   transform-origin:x y;可以手动设置元素旋转中心点，x和y可以是像素，也可以是方位名词（top、bottom、left、right、center）

   （4）缩放（scale）
   transform:scale(x,y);

   • transform:scale(2,2)：高和宽都放大了2倍
   • 只写一个参数，则第二个参数默认也一样
   • 参数小于1就是缩小
   • sacle缩放可以设置转换中心点，不影响其他盒子

   （5）综合写法
   transform:translate() rotate() scale()...
   其顺序会影响转换的效果（先旋转会改变坐标轴方向）
   当我们同时有位移和其他属性的时候，及得将位移放到最前面

   ---

   ⑦动画的基本使用
   第一步：先定义动画
   用keyframes定义动画（类似定义类选择器）

   @keyframes 动画名称{
   	0%{
   		width:100px;
   	}
   	100%{
   		width:200px;
   	}
   }
   

   0%是动画的开始，100%是动画的完成，这样的规则就是动画序列。
   在@keyframes中规定某项css样式，就能有当前样式逐渐改为新样式的动画效果。
   0%和100%也可以用from和to代替。

   第二步：使用（调用）动画
   用 animation-name:动画名称
animation-duration:持续时间来调用
   
   调用时除了这两个必须的属性要写，还可以写许多其他属性：
   
   简写：
   animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画其实或者结束状态

   ⑧3D转换
   （1）透视（视距）perspective

   • 如果想要在网页缠身3D效果需要透视（理解成3D物体投影在2D中平面内）
   • 透视就是人的眼睛到屏幕的距离
   • 距离视觉点越近的在电脑平面成像越大，越远成像越小
   • 透视的单位是像素
   • 透视写在被观察元素的父盒子上面的

   3D转换和2D类似，就是多了一个z轴。

   写在最后：
   这个是回来做一个复习，因为之前学的时候许多东西都没有做笔记，想回头复习记录一下，这个笔记都是直击重点，没有第一次学的那样做的很细
   
   本笔记学习记录自pink老师的教程，很好的教程，快去了解
   
   后面还会复习一下移动端布局，JavaScript等等，记录一些笔记。