2019-04-25--复习
2019-04-26 本文已影响0人
大庆无疆
1.img和input等行内块元素默认会和块级元素的基线对齐，所以底部会有空隙，可使用vertical-align: top 消除
2.模式转换： absolute定位和fixed定位还有浮动的元素会自动转换为行内块元素
HTML
- web标准：结构，样式，行为方面
<html>
<head>
<title>html复习之旅</title>
</head>
<body>
</body>
</html>
-
标签有“双标签”和“单标签”
<!DOCTYPE html> ---->告诉浏览器我们使用的版本是html5
<meta charset="UTF8"/> --->告诉浏览器我们使用的字符集
- 学习标签
(1)排版标签
标题标签：<h1> </h1>-<h6> </h6> --->h1尽量少用，一般给页面的logo使用
段落标签：<p> </p>
水平线标签：<hr />
换行标签：<br />
div span标签（没有语义，纯为排版）
（2）文本格式化标签
加粗：<s> </s>、<strong> </strong>
倾斜：<i> </i>、<em> </em>
删除：<b> </b>、<del> </del>
下划线：<u> </u>、<ins> </ins>
（3）图像标签
<img src="" alt="图片迷路啦" title="这是庆哥的美图"/>
（4）链接标签
<a href="https://www.baidu.com" target="_blank"> </a>
<a href="#id名">锚点</a>
与a标签相关的标签 <base target="_blank" /> --->在head标签之间书写，统一设置a标签的属性
（5）注释标签
<!-- 注释内容 -->
- 特殊字符：
、>、<、©、® - 相对路径和绝对路径
- 列表
（1）无序列表
<ul>
<li></li>
<li></li>
</ul>
（2）有序标签
<ol>
<li></li>
<li></li>
</ol>
（3）自定义列表
<dl>
<dt>定义标题</dt>
<dd>定义描述项</dd>
<dd>定义描述项</dd>
</dl>
- 表格标签
标签：<table>、<tr>、<td>、<th>、<thead>、<tbody>、<tfoot>、<caption>
属性：
cellspacing --- 修改单元格之间的距离
cellpadding --- 修改单元格与内容之间的距离
colspan -- 横向合并
rowspan -- 纵向合并
<table border="1" cellpadding="9" cellspacing="11" width="233" height="200px">
<caption>表格标题</caption>
<thead>
<tr>
<th>列标题</th>
<th>列标题</th>
</tr>
</thead>
<tr>
<td colspan="2">单元格</td>
</tr>
<tr>
<td>单元格</td>
<td rowspan="2">单元格</td>
</tr>
<tr>
<td>单元格</td>
</tr>
</table>
- 表单标签 --- > 收集用户信息
<form action="xxx.php" method="post"> </form>
用户名: <input type="text" value="派克钢笔" />
密 码: <input type="password" maxlength="6" />
性 别: <input type="radio" name="sex" /> 女 <input type="radio" name="sex" /> 男
爱 好:<input type="checkbox" name="hobby" checked="checked" /> 足球 <input type="checkbox" name="hobby"/> 篮球
<input type="button" value="搜索啥"/>
<input type="submit" value="提交表单" />
<input type="reset" value="重置表单" />
<input type="image" src="im.jpg" /> --- 也是可以提交数据
<input type="file" /> -- 文件按钮
<textarea> 请输入留言 </textarea>
<select>
<option>选项</option>
<option>选项</option>
<option>选项</option>
</select>
有一个合作伙伴：label标签 -- 使用label的for属性绑定控件的id，实现点击label的内容相当于点击了该控件
<label for="tag"> 输入账号:<input type="text" id="tag"/></label>
- 新增标签及属性
html5新增标签
<header></header>
<footer></footer>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<datalist></datalist> -- 和表单控件一起使用，把表单控件的list属性绑定datalist的id
<fieldset></fieldset> -- 与legend搭配使用
表单控件新增的type属性值
email、tel、number、url、color、search、range、time、date、datetime、month、week
新增的属性：
placeholder -- 提示语
multiple -- 多选
autofocus -- 自动获取焦点
autocomplete -- 记录提交过的文本信息，还需要设置name属性
required -- 文本不能为空
accesskey -- 按下规定的键使元素获得焦点 例如：accesskey = "s" 获取该元素焦点可按 alt + s 键
<input type="text" name="u" list="dlt">
<datalist id="dlt">
<option>数据项</option>
<option>数据项</option>
<option>数据项</option>
</datalist>
<form action="http://www.baidu.com" method="post">
<fieldset>
<legend>用户登录</legend>
用户名:<input type="text" name="user">
密码:<input type="password" name="pword">
</fieldset>
</form>
- 多媒体标签
（音频文件有三种格式：ogg, mp3, wav）
<audio controls="controls" autoplay="autoplay" loop="-1">
<source src="song.ogg" />
<source src="song.mp3" />
</audio>
loop:表示循环播放次数，为 -1 等于无限循环
(视频文件有:ogg, mp4, webm)
<video width="320" height="240" controls="controls" >
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
</video>
属性：
src: 告诉video标签需要播放的视频地址
controls: 告诉video标签是否需要显示控制条
autoplay: 告诉video标签是否需要自动播放视频
poster: 告诉video标签视频没有播放之前显示的占位图片
loop: 告诉video标签循环播放视频次数，（无限循环为-1）. 一般用于做广告视频
preload: 告诉video标签预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:告诉video标签视频静音
width/height: 和img标签中的一模一样
CSS
字体默认是16px,一般网页的字体大小在14px比较合适
- 字体样式
font-size: 44px;
font-family: \5B8B\4F53; /*多个字体之间使用逗号隔开，字体 的表示可以是中文，英文或者是Unicode字体*/
font-style: italic;
font-weight: 900;
font简写 --> font: 风格 粗细 大小 字体;
- 选择器
（1）标签选择器
（2）类选择器 ---> 类名不可以以数字开头，多个单词用-隔开
（3）多类名选择器
（4）id选择器
（5）通配符选择器
（6）伪类选择器
I：链接伪类选择器
:link
:visited
:hover
:active
II：序选择器
li:first-child
:last-child
:nth-child(3)
:nth-child(even)
:nth-child(odd)
:nth-child(3n)
II：目标选择器
:target
li:target {
font-size: 30px;
background: red;
}
<a href="#m">点击</a>
<ul>
<li>abc</li>
<li id="m">abc</li>
<li>abc</li>
</ul>
点击链接，选中的锚点的文字会变成30px背景色变红
- CSS外观属性
（1）color --文本颜色
取值：预定颜色值：red、 十六进制:#FF00FF、 rgb()、 rgba()
（2）line-height -- 行高 --->行高一般比字体大8像素看起来比较舒服
（3）text-align -- 水平对齐方式
（4）text-indent -- 首行缩进
1em 就是一个字符的宽度
（5）letter-spacing -- 字间距
（6）word-spacing -- 单词间距
（7）word-break -- 自动换行
normal: 使用浏览器默认的换行规则
break-all: 允许在单词内换行
keep-all: 只能在半角空格或连字符处换行
（8）文字阴影
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色
- 标签的显示模式
（1）块级元素
（2）行内元素
行内元素不能存放块级元素（a标签除外）
行内元素无法设置宽高，但是水平方向的padding和margin可以，垂直不行
（3）行内块元素 ---> <img /> 、<input />、 <td> </td>
注意：a标签里面不能套a标签
h1~h6、p、dt 标签里面不能放块级元素
5、复合选择器
交集选择器，并集选择器， 后代选择器，子元素选择器，属性选择器, 伪元素选择器
属性选择器：
input[type], input[type=button], input[type^=butt], input[type$=tton], input[type*=but]
伪元素选择器：
::first-letter, ::first-line, ::selection, ::after, ::before
- 背景（background）
background-color
background-image: url(地址)
background-repeat: no-repeat
background-position: 水平 垂直
background-attachment: fixed 设置背景是否随滚动条的滚动而滚动
简写：background -- 顺序没有严格要求，建议如下方式
background: 颜色 图片 平铺 滚动 位置
背景缩放：
background-size: cover（宽高占满容器为止）
background-size:contain（宽或高有一个占满容器即止）
background-size:具体像素或百分比
- CSS三大特性
（1）层叠性
（2）继承性 -- 对字体，文本相关（ text-, font-, line-, color）的可以使用继承
（3）优先级
标签< 类（伪类） = 属性 = 伪元素 < id < 行内 < !important
- 盒子模型 （边框，内边距， 外边距）
（1）边框
border: 宽度 样式 颜色 （样式：solid, dashed, dotted, double）
border-radius: 左上 右上 右下 左下 （顺时针）
（2）内边距
padding: 上 右 下 左 （顺时针）
（3）外边距
margin:上 右 下 左 （顺时针）
块级元素居中：margin: 0 auto;
两个盒子的垂直方向的外边距合并问题，最好的解决方案就是避开这种情况
子元素在父元素中使用margin-top引起高度塌陷：
I：给父盒子添加border-top
II：给父盒子添加padding-top
III：给父盒子使用over-flow:hidden
盒子的空间大小：content + padding + border + margin
盒子的可视区大小：content + padding + border
我们如果使用的是W3Cd的盒子模型，增加了padding,border使用影响到盒子的宽度和高度的。
padding特殊的地方，如果块级元素没有指定宽度和高度，那么设置盒子的padding-left/padding-right不会增加盒子的总宽度
盒子阴影：
box-shadow: 水平偏移 垂直偏移 模糊度 阴影拓展 阴影颜色 内外阴影
注意：外阴影不用设置，否则出错，内阴影设为 inset
- 浮动
（1）浮动的元素会飘在标准流中的元素上面
（2）为了保证页面上布局不混乱，通常都给需要浮动的元素套一个div,保证标准流中的位置正常
（3）浮动元素会自动转成行内块元素
注意：浮动元素只会在父元素的内容区显示，不会压着padding区，定位的元素则不同，他可以压着padding区域，因为定位的元素的相对元素的左上角定位的
- 清除浮动
（1）额外标签法：在父元素内部的最后的浮动元素的后面添加一个div，使用clear:both
（2）给父元素添加overflow:hidden
（3）使用伪元素（::after）清除浮动
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix { --> 兼容IE6,7
*zoom: 1;
}
（4）双伪元素
.clearfix:after,
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
- 定位
static: 静态定位
relative：相对定位 -- 占有原先位置（不脱标），相对自己原先位置移动
absolute：绝对定位 -- 不占有原先位置（脱标），以最近的定位父元素左上角做参考点，否则以浏览器左上角为参考点
fixed：固定定位 -- 不占有原先位置（脱标），以浏览器左上角为参考点
z-index: 显示优先值
模式转换： absolute和fixed定位会使元素自动转换为行内块元素
- 元素的显示和隐藏
display: none;
visibility: hidden;
overflow: hidden;
CSS高级技巧
- 鼠标样式
默认：default
小手：pointer
移动：move
文本：text
- 轮廓：outline
通常都是去掉文本框的轮廓（获取焦点会显示）
outline: 0; 或 outline:none
- 防止拖拽文本域resize
防止 textarea文本域 的右下角被拖拽
resize: none;
- 垂直对齐vertical-align
只针对于行内元素或者行内块元素，通常用来控制图片和表单与文字的对齐
图片，表单元素 默认跟 文字 基线对齐，通过vertical-align:middle可以修改对齐方式
在有的浏览器里，图片等行内块元素会与父级盒子的基线对齐，这样会造成一个问题，就是图片底测会有一个空白间隙。
解决方法是给图片添加vertical-align: top 或middle
- world-break：自动换行
world-break: normal | break-all | keep-all
- white-space
white-space: nowrap 强制一行显示
- text-overflow文字溢出
text-overflow: ellipsis | clip
不可以单独使用，需配合如下属性
white-space: nowrap;
overflow: hidden;
CSS精灵技术
减少服务器的请求次数
制作精灵图，保存图片格式可以为png8
字体图标
滑动门技术
:after, :before伪元素详解
:after, :before 伪元素也是一个元素，默认是行内元素，所以如果要对其设置宽高需要进行模式转换
注意：鼠标移到div上在div的前边添加元素，要这样写：div:hover::before {样式}（中间没有空格）
过渡
过渡效果
transition-property
transition-duration
transition-timing-function
transition-delay
简写格式：变化属性属性 运动时长 运动曲线 等待时长
运动曲线取值：linear（匀速）, ease（逐渐慢下来）， ease-in（加速）, ease-out(减速)， ease-in-out(先加速后减速)
注意：时间要有单位（s）,否则不起效果
2D转换
（1）transform:
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
（2）scale
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
（3）rotate
transform: rotateX(x);
transform: rotateY(y);
注意：单位是 deg
（4）改变形变中心点
transform-origin: left top ; -- 水平 垂直
3D转换
2d只有x和y轴， 3d有x, y, z轴
（1）透视
perspective: 1000px;
视距 距离 眼睛到屏幕的距离 视距越大效果越不明显 视距越小，透视效果越明显
（2）rotate
transform: rotateX(x);
transform: rotateY(y);
transform: rotateZ(z);
（3）translate3d
translateX();
translateY();
translateZ();
translate3d(x, y, z);
动画
BFC（块级格式化上下文）
BFC: 独立的渲染区域
具有BFC条件的元素：display属性的值为：block, list-item, table
触发BFC的条件：
（1）float属性的值不为none
（2）position 为 absolute 或 fixed
（3）overflow的值不为 visible
（4）display为inline-block, table-ell, table-caption, flex, inline-flex
BFC主要用途：
（1）清除浮动
（2）解决外边距合并（因为同处于一个BFC区域的盒子垂直外边距会重叠，所以只要让盒子不处于同一个BFC区域即可）
（3） 制作右侧自适应的盒子问题（原理是：BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。）
