HTML 和 CSS 基础

1. CSS 元素选择器

（1）元素选择器

• 标签选择器
• 类选择器
• 通配符选择器：* {color:red;}
• ID选择器 #intro {font-weight:bold;}
• 属性选择器 a[href] {color:red;}
• 伪类选择器：用来添加一些选择器的特殊效果
• 复合选择器

（2）CSS权重 较长的 css selector 权重会大于较短的 css selector

1. css属性!important
2. 内联样式
3. ID选择器(#id)
4. 类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等]
5. 元素选择器(p等) = 伪元素选择器(:after/:before/::selection等) 6.通用选择器(*) 7.继承的样式

（3）!important

作用： 提高指定样式规则的应用优先权（优先级），使该条样式属性声明具有最高优先级。

2. CSS 伪类

（1）a标签伪类及顺序（先爱后恨的顺序LoVe, HAte)

• a:link{color:black;}： 链接被访问之前选中
• a:visited{color:gray;}： 链接被访问之后选中
• a:hover{color:red;}： 鼠标悬停被选中
• a:active{color:blue;}： 链接被按下之后

（2）:first-child, :last-child, :nth-child(n) 的使用

• :first-child 选择器匹配其父元素中的第一个子元素。
• :last-child 选择器匹配其父元素中的最后一个子元素。
• :last-child 选择器匹配其父元素中的底n个子元素。

3. CSS盒子模型

（1）border、padding、margin

（2）盒子模型类别和差异

其实盒子模型分两种： ie 盒子模型和标准、 w3c 盒子模型。

注：ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

• 标准盒模型: box-sizing: content-box
  • content-box:
    • width = content width;
    • height = content height
• IE盒模型 :box-sizing: border-box
  • border-box:
    • width = border + padding + content width
    • heigth = border + padding + content heigth

4. flex常用布局

（1）flex常用布局

• 水平垂直居中

#box{
    display: flex;
    display: -webkit-flex;
    border: 1px solid #0000FF;
    height: 200px;
    width: 400px;
    align-items:center;
    justify-content:center;
}

<div id="flex">
  <div id="left">我在左边，定宽</div>
  <div id="right">我在右边，自适应布局</div>
</div>

#flex{
  display: flex;
}

#right{
  flex:1 1 auto;
  background: red;
}

#left{
  background:green;
  width: 200px;
}

• 上下固定 中部占满

	<div class="container">
		<div class="header">header</div>
		<div class="main">main</div>
		<div class="footer">footer</div>
	</div>

    	.container{
			height: calc(100vh - 50px);
			background-color: black;
			display: flex;
			flex-direction: column;
		}
		.header{
			width: 100%;
			height: 100px;
			background-color: #e77c8e;
		}
		.main{
			width: 100%;
			flex: 1;
			background-color: #2bae85;
		}
		.footer{
			width: 100%;
			height: 100px;
			background-color: #7a7374;
		}

• 换行 flex-wrap: wrap;

（2）容器的flexbox属性

• flex-direction 属性控制项目横向排列方向

  • row：从左到右排列
  • row-reverse：从右到左
  • column：从上到下
  • column-reverse：从下到上

• flex-wrap 属性控制项目是否换行及如何换行

  • nowrap : 也是 flex-wrap 的默认值,不换行
  • wrap : 换行
  • wrap-reverse : 如果一条轴线排不下，进行换行,如果项目横向排列，第一行在下方 ，如果项目纵向排列，第一行在右侧。

• flex-flow : flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。

• justify-content : 项目在轴线上的对齐方式

  • flex-start：项目以 flex-direction 设置的方向的起始位置排列
  • flex-end ：项目以 flex-direction 设置的方向的结束位置排列
  • center ：居中对齐
  • space-between ：两端对齐，项目之间间隔相等
  • space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

• align-items： 项目在交叉轴上如何对齐

  • flex-start：交叉轴的起点对齐
  • flex-end ：交叉轴的终点对齐
  • center ：与交叉轴的中点对齐，也就是居中对齐
  • stretch ：如果项目设置了高度，设置此属性值没有变化，如果项目未设置高度或设为auto，将占满整个容器的高度。
  • baseline ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

• align-content： 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  • stretch : 轴线占满整个交叉轴
  • flex-start : 与交叉轴的起点对齐
  • flex-end : 与交叉轴的终点对齐
  • center : 与交叉轴的中点对齐
  • space-between : 与交叉轴两端对齐，轴线之间的间隔平均分布
  • space-around : 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

• 项目的flexbox属性：

（3）项目的flexbox属性：

• order ：定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow ：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink ：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间（即如果项目纵向排列，设置的是项目的高度，如果项目横向排列，设置的是项目的宽度）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex ：是flex-grow, flex-shrink和 flex-basis的简写，默认值为0 1 auto 后两个属性可选。
  • 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
• align-self ：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素没有设置align-items属性，则等同于stretch。

5. CSS 如何清除浮动

当容器的高度为auto，且容器的内容中有浮动的元素，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局。可以使用CSS :after伪元素来清除浮动。clear:both

6. CSS sprites

• 通过将多个小图合并成一张大图来减小网络请求数量，加速内容显示
• 使用场景：
  • 静态图片，不随用户信息的变化而变化。
  • 小图片，容量比较小（2~3k）。
  • 图片加载量比较大
• 如何设置相应的CSS
  • 通过background-image、background-repeat和background-position属性定位

7. iframe

• 能够原封不动的把嵌入的网页展现出来。
• 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷
• iframe 会阻塞主页面的 Onload 事件
• 搜索引擎的检索程序无法解读这种页面，不利于 SEO（网站优化 ）

8. @media 使用

媒体查询（Media queries）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕大小、分辨率）来修改网站时。

• 媒体类型：描述设备的一般类别
• 除非使用 not 或 only 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 all 类型
• print 适用于在打印预览模式下在屏幕上查看的分页材料和文档
• screen 适用于屏幕 *媒体特征
  • 描述了 user agent、输出设备，或是浏览环境的具体特征
  • 媒体特性表达式是完全可选的
  • 负责测试这些特性或特征是否存在、值为多少
  • 每条媒体特性表达式都必须用括号括起来。

9. meta、viewport使用

• 利用 meta 标签对 viewport 进行控制
• 常用 viewport 属性
  • width，设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
  • initial-scale，设置页面的初始缩放值，为一个数字，可以带小数
  • minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
  • maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
  • user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

10. CSS transform 基础

对元素对象进行变形操作，主要包括以下几种：

• 旋转：rotate
• 缩放：scale
• 移动：translate
• 倾斜：skew
• 矩阵变形：matrix。

11. CSS 动画基础

CSS3中动画也叫做关键帧动画可以分为transition(过渡动画)和animation(动画)两种，两者实现方式是相似的，都是随着时间变化改变元素的属性值，但是适用的场景是不同的。主要区别如下：

• 触发方式: transition是基于事件驱动的，必须触发事件才会执行，而animation则不需要显示的触发事件
• 关键帧: transition只有开始&结束两个关键帧，不需要过多关注中间过程；而animation则可以通过百分比自定义更多的中间状态
• 循环: transition通常执行一次，多次循环需要指定transitionEnd处理事件，较繁琐；animation可以直接指定循环次数

12. HTML 常用元素

（1）有哪些常用的HTML元素

（2）哪些是块级元素，哪些是内联元素

• 块级元素：默认是独自占据一行的，默认情况下宽度自动填满其父元素宽度 ，块级元素可以设置宽高，可以设置margin，padding
• 内联对象：默认是几个内联元素都可以在同一行上显示，其宽度随内容的变化而变化，不可以设置宽高，可以设置margin，padding，但只在水平方向有效。
  • a – 锚点 
  • abbr – 缩写 
  • b – 粗体(不推荐) 
  • big – 大字体 
  • br – 换行 
  • cite – 引用 
  • code – 计算机代码(在引用源码的时候需要) 
  • em – 强调 
  • font – 字体设定(不推荐) 
  • i – 斜体 
  • img – 图片 
  • input – 输入框 
  • kbd – 定义键盘文本 
  • label – 表格标签 
  • q – 短引用 
  • span – 常用内联容器，定义文本内区块 
  • strong – 粗体强调 
  • textarea – 多行文本输入框 

（3）通过CSS 的display属性来转换