1.Web 标准
结构 （html,xhtml）
表现 （CSS）
行为 （ECMAScript）
2.手写HTML5的基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
</body>
</html>
3.img 标签的相关属性
<img src="引入图片的路径" alt="图片加载失败时的提示文本" title="鼠标悬停提示”>
4.a 标签的相关属性
<a href="需要链接的图片路径” target="页面的打开方式_self/_blank" title="鼠标悬停提示”></a>
5.html5的基本结构
!（感叹号） + tab键
6.标签的分类
大标签 独占一行，可以设置宽高 （h1-h6,）
小标签 多个标签可以在一行显示，宽高不生效，靠内容撑开 （b,strong,i,em,a,img）
标签的嵌套规则
大标签嵌套小标签
标签对嵌套单标签
7.选择器的种类
- 通配符选择器 0
元素/类型 选择器 1
class选择器 10
id 选择器（同名id只能有一个） 100
内联样式 1000
包含选择器(组成包含选择器 的 所有选择器权重之和 .a .a1 img = 10 +10 +1 =>21)
群组选择器(各自算自己的)
8.link与@import引入方式的区别
1.本质上的区别 link是XHTML中的标签，@import是css 2.1的方法
2.加载顺序的区别 在页面加载过程中 link引入的css和页面同时加载，@import需要等到所有内容加载完之后在加载
3.兼容上的问题 @import 是css 2,.1的方法 所以IE5及以下浏览器不支持
4.通过JS 操作DOM时 @import不是js可以控制的
9.标准文档流
（小标签）从左自右 （大标签）从上往下
让多个同级元素在一行显示 需要使用float（想要在一行显示的每一个同级元素都加）
10.float的作用及影响（对父元素）
让多个元素在一行显示
问题 浮动的元素会脱离文档流 1.同级的元素上来占位置 2.父元素高度塌陷
解决方法（父元素问题的解决方法）
1.给父元素设置高度
2.给父元素设置属性 overflow:hidden；(在父元素中形成一个独特的区域，这个区域中父元素计算高度时会把设置float属性的元素的高度计算在内)
float 的影响
设置float属性 会导致元素脱离文档流，同级元素（标准文档流元素）会上来占据元素位置，父元素在计算高度时不把float的元素计算在内
一个向左浮动的元素 A,如果他的前一个元素是正常文档流的元素C,那么该浮动元素水平方向和父元素左边对齐，垂直方向上和前一个元素C的底部对齐
小标签在遇到float时会产生图文环绕效果
Image.png
11.font-size:文字大小
浏览器默认字体大小 16px;
浏览器最小字体 9px
设置 font-size:0; 可以让字体隐藏
字体倾斜
font-style:
normal
italic/oblique 字体倾斜
text-align 文字水平对齐方式
left 左对齐
center 居中对齐
right 右对齐
justify 两端对齐
注意 text-align可以控制文字或小标签的水平对齐方式(属性需要设置给 父类元素的大标签中)
注意 文字相关的属性是可以继承的
一行文字占得高度：
行高组成 上间距 + 文字高度 + 下间距
tip: 大标签没有设置高度时行高也可以充当盒子的高度;
当父盒子设置高度时 line-height 就只能用来调整文字在父盒子中的位置
(1).当行高等于容器(父盒子)高度时 文字相对于容器(父盒子)纵向居中
12.字体线条
******
underline 下划线
overline 上划线
line-through 中划线/删除线
none
******
text-indent 首行缩进 (必须设置给大标签)
数值类型 (px,em)
text-indent 可以设置负值
list-style-type 列表符号
circle 空心圆
square 方块
none
list-style-position 控制列表符号的位置
outside 外边
inside 里边
13.符号
< <
> >
© ©
14.background用法
背景是依托于盒子(容器)
背景图
background-image: url(../images/2.jpg);
背景图较容器小 则会平铺(水平方向和垂直方向平铺)
背景图较容器大 只显示容器大小部分
背景平铺
background-repeat:
repeat （水平方向和垂直方向平铺）
no-repeat 不平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
/* 大标签水平居中的方法 */
margin: 0 auto;
background-position
background-position-x 水平方向 left center right 数值
background-position-y 垂直方向 top center bottom 数值
背景图固定
background-attachment:scroll/fixed;
scroll 默认 会跟着容器一起滚动
fixed 固定 相对于窗口固定(但只在容器中显示，超出容器时不显示)；
通常配合 background-position: center center; 来定位置
15.margin-top 的 BUG?
当父子元素都是正常文档流，给子元素设置margin-top,子元素的margin-top会传递给父元素(作用到父元素身上)
1. 给父元素或子元素设置float => 可能会产生新的float问题
2. 给父元素设置border-top或padding-top => 增大父子的实际高度
3. 给父元素加overflow:hidden;
在正常文档流中,相邻的同级元素如果发生margin-top,margin-bottom重叠的情况，按大的来算
如果给小标签设置float属性，会把小标签隐式的转换成大标签
16. margin 的用法
一个值 代表四周
两个值 第一个代表上下，第二个代表左右 margin: 50px 100px; margin:0 auto;
三个值 第一个代表上,第二个值代表左右,第三个值代表下 margin: 100px 50px 25px;
四个字 上右下左
17. padding 介于内容和边框之间
- 用来调整内容在容器中的位置关系
在定宽定高时，使用padding会撑大元素，如想保证元素大小不变，所以最好将内容区域减去对应的width，height
设置该属性 只有内容区域有背景颜色 ，padding区域没有背景颜色
background-clip: content-box;
background-clip属性用来定义元素背景的裁剪区域，即背景的显示范围，可选值有 border-box | padding-box | content-box，默认值为 border-box。
2.float 的元素不设置宽高的情况下靠内容撑开.
18.清除float对同级元素造成的影响
clear 清除float对同级元素造成的影响 ( 浮动的元素会脱离文档流 1. 同级的元素上来占位置 )
none 默认 不清除
left 清除左浮动对同级元素造成的影响
right 清除右浮动对同级元素造成的影响
both 同时清除左右浮动对同级元素造成的影响
clear both 清除对同级元素造成的的影响,是其回到正常的布局,顺带也解决了对父元素造成的影响
19. overflow
overflow-x：x方向上有滚动条
overflow-y：y方向上有滚动条
visible 默认值不做任何操作
hidden 溢出隐藏
scroll 出现滚动条 （无论内容是否溢出都会出现滚动条）
auto 自适应（如果内容超出则显示滚动条，否则正常显示）
inherit 继承父类元素的overflow属性
20.white-space:
normal 默认
nowrap 文本单行显示，不换行
pre 保留空格和换行
pre-wrap 保留空格，进行正常的换行
pre-line 合并空格，保留换行符
多行文本溢出
display：-webkit-box；
-webkit-line-clamp：10；
-webkit-box-orient： vertical；
overflow:hidden;
/* 聚焦 当鼠标点击输入框 输入框出现光标时 /
/ 去除输入框 聚焦时的蓝色边框 */
outline: none;
21.标签
大标签
独占一行，可以设置宽高，作为嵌套的容器(盒子);
小标签
多个元素可以在一行显示，宽高不生效，元素的宽高靠内容撑开，padding,margin的部分属性不生效
(img,input 可以设置宽高，padding,margin正常生效)
内联块状元素
多个元素可以在一行显示，可以设置宽高，padding,margin正常生效
代表（img,input,select,textarea,button）
vertical-align(内联块状元素);
注意：多个内联元素或内联块状元素在一行显示，中间会出现间隙(标签换行产生)
解决办法：
1. 标签不换行
2. 设置float
3. 给父元素设置 font-size:0; 如果父元素中有其他文本，需要给其重新设置font-size
22.图片的三像素BUG （一个包裹图片的父元素，没有设置高度时，图片会将父元素撑大大约3px）
1.给父元素设置高度.
2.给图片设置 vertical-align：top；
3.给图片设置 display：block；
4,给父元素设置 font-size：0；
/* 转换为怪异盒模型（IE盒模型） 元素的width,height从border开始计算 /
/ box-sizing: border-box; /
/ 标准盒模型 元素的width,height从内容(content)开始计算 */
box-sizing: content-box;
23.三大定位
1.固定定位
position: fixed;
1. 会脱离文档流(如果不设置宽高，靠内容撑开，如果不设置left,top,可能盒子在原来位置定位)
2. 参照物是当前窗口
位置
水平方向 left/right
垂直方向 top/bottom
2.相对定位(relative)
相对于自己原来的位置定位
1.相对定位不会脱离文档流(始终占据原来的位置)
2.一般做绝对定位的参照物属性
/* 子选择器 只会选择.par 中的子一级元素（）*/
.par>li
3.绝对定位
1.会脱离文档流
2.设置了绝对定位的元素会从当前元素的父元素开始向上查找各种定位属性(relative,absolute,fixed),如果找到则相对该父元素定位，找不到则继续向上一层查找, 如果最终没有找到的话则相对于窗口顶部定位。
注意：
z-index 可以调整定位元素(relative,absolute,fixed)的层级
z-index:value;
24.浏览器的五大内核
Trident IE，360，遨游，QQ
Gecko Firefox
Presto Opera
Webkit Google Chrome ,Safari
Blink Opera( Opera, Chrome 共同开发)
浏览器前缀:
-ms- IE
-moz- Mozilla Firefox
-o- Opera
-webkit- Chrome
25.BFC 块级格式化上下文
1. 块级元素自上而下排列，独占一行
2. 相邻的块级元素，上下的margin会重叠
3. BFC区域中的元素，其左边的margin和父元素左边的margin相接触
4. 在计算BFC区域高度时，会把float的元素的高度也计算在内
5. BFC是一个独立的渲染区域，该区域的所有元素不会影响外面的元素
6. BFC区域不和float区域重叠
26.border-radius
/* 四周 /
border-radius: 4px;
/ 两个值 左对角，右对角 */
border-radius: 4px 50px;
/* 三个值 左上 (右对角) 右下 */
border-radius: 4px 50px 100px;
/* 四个值 顺时针 左上 右上 右下 左下 */
border-radius: 4px 25px 50px 100px;
em 是相对于父元素的 font-size，容易受父元素影响，而导致布局出现问题
rem 相对于根元素 html 中的font-size
27.transition 和animation的共同点和区别
共同点
1. 都可以完成一些简单的过渡效果
不同点
1. transition 必须要通过一定的手段(:hover,:focus,:checked,click触发
2. transition 只能完成一些简单的过渡效果，对于复杂的效果需要靠animation来实现
-->
28.伪对象::before和::after
/* 在元素的最后方添加一个伪对象(标签、元素) */
.box::after {
content: "我是后边添加的文字";
color: aqua;
}
/* 在元素的最前边添加一个伪对象(标签、元素) */
.box::before {
/* content: "我是前面添加的文字"; */
/* content: url(../images/3.jpg); */
content: attr(youTitle);
color: red;
/* width: 100px;
height: 100px;
background-color: #6ff;
display: inline-block;
vertical-align: middle; */
}
网友评论