容易忘记的html,css
HTML篇：
1.< !DOCTYPE >:作用是定义文档类型，告诉浏览器这是什么版本的html。
2. 在< p>< /p >等文本标签内输入多个空格，浏览器会当作一个空格处理。
3. 一些有用的标签：
定义被删除文本：< del >blue< /del>
定义强调文本：< em>blue< /em>
定义下划线：< u>blue< /u>
4.a标签跳转到指定位置：
<p>
<a href="#C4">查看章节 4</a>
</p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……
</p>
5.表格的跨行，跨列
// 跨列
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
//跨行
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
6.表单:一定要套着
(1).input的属性type：
text----普通输入框
password----密码框
radio-----单选按钮
checkbox----复选框
button/submit-----提交按钮
file----文档
(2).input家族
（2-1）下拉输入框：datalist,input的新属性：list
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
图示：
（2-2）input属性：autocomplete="on/off"
（2-3）input：min和max,step属性来约束包含数字或日期
<form action="demo-form.php">
输入 1980-01-01 之前的日期:
<input type="date" name="bday" max="1979-12-31"><br>
输入 2000-01-01 之后的日期:
<input type="date" name="bday" min="2000-01-02"><br>
数量 (在1和5之间):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
（2-4）input:multiple--允许选择多个文件
<form action="demo-form.php">
选择图片: <input type="file" name="img" multiple>
<input type="submit">
</form>
(3).带边框的：
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
在这里插入代码片
(4).button和input的按钮区别：
<input type=":button"></input>
<button type="button"></button>
在button内可以有文本，图像。
7.img最好要有width height
8.在IE中使用html5的新标签
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
9.html新标签：
1. 媒体：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
<auido controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</auido>
属性： autoplay:自动播放 controls：显示播放暂停按钮 loop：循环播放 muted:静音播放 preload:auto/metadata/none页面加载时是否播放
CSS篇：
1. 动画：
animation:
animation: myname（绑定的动画名） 5s （周期时间）linear/ease-in/ease-out（速度）2s（延迟时间） infinite(循环次数)
// 定义动画
@keyframs myname(动画名){
from{background-color：”blue“}
to{background-color：”red“}
//或者使用百分制形式来代替from - to
}
transition:
transition: 要变化的属性名 周期时间 速度 延迟时间。
例如：
transition:width 3s linear;//需要配合hover/js事件使用
div:hover{width:200px;}
animation和transition的区别：
（1）transition是过渡，是样式属性值的变化过程，只有开始和结束；animation也叫关键帧，和@keyframs结合可以设置中间帧，变化的比较细。
（2）animation配合@keyframs可以不触发事件就触发这个过程，而transition需要通过hover或者js事件来配合触发。
（3）animation的使用会改变很多属性，引起页面的回流和重绘，性能影响比较大，而transition结合transform进行旋转和放缩等不会生成新的位图，性能影响小。
2. 背景
background: 背景色 图片 平铺方向 图片开始方向(bg-position)
background:#fff url(‘xxxx.img’) no-repeat right/left top/buttom
background-attachment：fixed（图片不随内容而变化）/local（跟随内容一起变化）[这个就是有点position:fixed.]--fixed可以实现视差效果
background-size:设置图片的大小。
可用百分比 / px设置图像的大小 / contain(背景图片自适应内容区域) ===100% 100%（原宽高输出）
/ cover(背景图片会按照原来图片比例覆盖整个区域（宽高都满），有些部分会无法显示出来)
background-origin:定位图片的位置，margin-box(包括margin)/border-box/content-box
background-clip:截取图片的大小。border-box(默认)/padding-box/content-box
到了CS3：可以多张背景图重叠；
background-image：1，2；
background-position：left bottom,let top;
背景图完全填充：
div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
3.列表
ul上的属性: list-style-type—设置圆点是否显示
list-style-image----用图片代替圆点位置
3.表格
border-collapse属性：
(默认)：separate
collapse：边框会被并为一个单一的边框。会忽略border-spacing（设置边框距宽度）和empty-cells属性。
4.文本
- 文本居中：(以下操作都是在父元素中写的样式，使得子元素按照以下办法来)
text-align:center;//水平居中
vertical-align:center;//垂直居中(多行文本) –关于vertical-align详细妙用（例如图片，一高一低的低居中）
line-height:父元素高度；//垂直居中（单行文本，多了会溢出） - 文本高度：(行高)
line-height：100%；//文本高度为16px,但是经过浏览器渲染，一般会比16px大。
line-height：50%；//8px
5.display(显示)
- display:none和visibility:hidden都能隐藏元素，但是display的隐藏之后不占用宽高，而visibility会。
6.position(定位)
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
1.元素分为块级元素（block）和内联元素（inline）
| 块级元素 | 内联元素 |
|---|---|
| 独占一行，默认情况下，其宽度自动填满父元素宽度 | 相连的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随着元素的内容而变化 |
| 可以设置width,height，margin,padding属性 | 行内元素设置width,height,margin-top/bottom无效，对border，padding,marign-left/right有效 |
| 垂直相邻的margin会重叠，以最大的margin为准。例如：上一块级的margin-bottom跟下一块级的margin-top,会重叠一起，哪个大算哪个——这样的重叠情况叫做外边距合并，详细看下面 |
2.脱离文档流： --------------脱离文档流情况的详情
使得元素脱离文档流，分别是：浮动，定位的fixed,absolute
为什么说relative没有脱离文档流呢？？
因为relative的时候，margin-top会重叠。跟块级元素一样，而fixed，absolute不会,同样的浮动也不会。
脱离文档流的元素都是块级元素---因为就算是行内元素，遇到浮动，absolute，fixed让行内元素变成块级元素来对待。
7.清除浮动
作用：1.清除别的浮动元素对自己的影响（布局方面）2.解决高度崩塌
原理：主要是靠clear属性，和触发新的BFC。
例如:
1.（同理float:right，一样处理）
开始：3个div排列
1
2
3
4
浮动：前3个都float:left;---分析：1跟原来位置一样，对自己没影响，2，3从换行情况变成一行紧挨，4就会跟1重叠
1【4】 2 3
清除浮动：对2 3 clear:left;清除浮动带来的自己的影响。消除对2，3的影响。但是3的float：left；对4的影响消除
1
2
3【4】
2.高度崩塌：----------------详情
contain(黑)包含四个div，红 蓝 黄 绿（contain不设置高度）
当四个div都float:left后：(父元素的黑色消失了，这就是高度崩塌)
解决高度崩塌的办法：
1.在contain父元素添加：float,—但是会让contain后面的元素受到影响
2.在contain父元素添加：overflow:hidden;–如果有内容要溢出显示(弹出菜单)，也会被一同隐藏
3.在contain里面的四个div的后面，添加空div < div style=“clear:both;”>< /div>
4.在contain添加伪类after–没有副作用
.contain::after{
content:'';
display:block;
width:0;
height:0;
clear: both;
}
5.container设置before,after—没有副作用，主要用于解决外边距重叠问题。
.cf:before,.cf:after {
content:"";
display:table;
}
.cf:after { clear:both; }
8.BFC
什么是BFC：是一个独立的渲染区域， 它规定了内部如何布局，并且与这个区域外部毫不相干。
BFC触发条件:
1、根元素
2、float 取值 none 以外的值 --脱离文档流
3、overflow 除了visible 以外的值（hidden，auto，scroll ）
4、display (table-cell，table-caption，inline-block，flex，inline-flex)
5、position（absolute，fixed）--脱离文档流
----------------------------------------------详情
规则：
1、内部的Box会在垂直方向，按照从上到下的方式逐个排列。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠—（外边距重叠）
例如:
1).兄弟，父子外边距合并：
解决方案：
- 父子：
1.在父元素添加overflow:hidden;
2.在父元素添加border属性
2.) 兄弟：
- 利用BFC概念，在第一个兄弟元素，套一个div，在这个div上写overflow:hidden;或者border属性。
- 利用BFC概念，在第一个兄弟元素，套一个div，在这个div上写上清除浮动的第5个办法。
<style>
.top{
width:100px;
height:100px;
background:red;
margin:50px;
}
.bottom{
width:100px;
height:100px;
background:blue;
margin:20px;
}
.cf:before,.cf:after {
content:"";
display:table;
}
.cf:after { clear:both; }
</style>
<body>
<div class="cf">
<div class="top">上</div>
</div>
<div class="bottom">下</div>
</body>
3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
上面的3的例子，通过在蓝色div设置overflow：hidden；触发新的BFC，由于BFC的区域不会与float box重叠。
假如：给上面的例子的蓝色换成border:1px solid blue;(高度崩塌)
当蓝色 div 增加 overflow:hidden; 时 效果如下
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素的高度也参与计算
9.box-sizing属性
box-sizing:content-box(默认情况，其宽高就是内容的宽高)
box-sizing:border-box(宽高=content+border+padding)
技巧篇：
1.width height的使用：
会显示原本元素所占的：width:auto,height:auto
百分比是按照他们的父级来得出的：width：10%，height：30%;
2.元素居中
块级元素：
水平居中：首先居中的元素得有宽度，width=100%除外。然后margin:0 auto;
垂直居中：1.margin/padiding
2.display:inline-block
3.position:absolute;（这种办法会跟transition:冲突）
top:50%;
left:50%;
transform:translate(-50%,-50%)
4.flex方法使得其块级子元素居中：
父： display:flex;
align-items:center;
justify-content:center;
或者：
display：flex;
margin:auto;
内联元素：
1.在其父元素操作，使得子元素居中：
text-align:center;//水平居中
line-height:父元素高度；//垂直居中
2.变成块级元素，再居中。
3.display:inline-block,使得块级元素同一行展示，妙用在nav行。
4.选择器：
div：nth-of-child(n+1);选择全部
div：nth-of-child(-n+2);选取前两个，（-n+3）；前三个
5.文字环绕图片：对图片float:left;即可
扫一扫
8156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
