浮动
float：浮动方向
1、任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
2、假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行
3、浮动元素会脱离文档流，会压住下一个块元素，但不会压住其内容。
1.浮动原理：浮动在当前行，脱离原来文本，进入到新的一层（浮动层），然后在设定的方向（左右）移动，直到遇到父级盒子的边缘，或者其他浮动块的边缘停止
2.浮动换行：当一行没有足够空间存放所有浮动块时，多出来的盒子会挤到下一行，然后按照设定的方向继续移动，直到遇到父级盒子的边缘或其他浮动块的边缘（也有特殊情况）
3.浮动坍塌：当父级盒子没有设置具体高度，并且子级浮动的情况下，父级的高度会丢失，就是浮动的坍塌。（导致与父级盒子平级的文本会向浮动的盒子下方移动）
4非浮动块特性： Block：会向上占据浮动块所空出的区域，可以被浮动块遮盖 inline,inline-block，文字 无法出现在浮动块所覆盖的渔区，一般形成环绕效果
5.浮动换行阻挡 一般情况下出现在瀑布流布局当中 如果上一行的浮动块高度不一致，就会导致当前行浮动块在浮动过程中被阻挡，margin也是浮动块停止的边缘。
6：收缩 收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
解决由于没有设置父级块高度导致的浮动坍塌
1、为没有浮动的块清除浮动，使其出现在原本应出现的位置（清除非浮动块自动补全由于浮动而空出的位置的浮动动作）
为指定标签添加 clear: both;
<style type="text/css">
.d1 {
height: 200px;
width: 200px;
background-color: red;
float: left;
}
.d2 {
height: 200px;
width: 200px;
background-color: yellow;
float: left;
}
.d3 {
height: 200px;
width: 200px;
background-color: blue;
/* 设置之后就不会进行浮动而是占用原本的位置 撑开父级块 */
clear: both;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>2、为父标签设置层级以及溢出样式（一般设置一个即可，但不同浏览器可能不同）
<style type="text/css">
.d1 {
height: 200px;
width: 200px;
background-color: red;
float: left;
}
.d2 {
height: 200px;
width: 200px;
background-color: yellow;
float: left;
}
/* .d3 {
height: 200px;
width: 200px;
background-color: blue;
/* 设置之后就不会进行浮动而是占用原本的位置 撑开父级块
clear: both;
} */
.box{
/* 为存放浮动的盒子设置 */
overflow: hidden;
zoom: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="d1"></div>
<div class="d2"></div>
<!-- <div class="d3"></div> -->
</div>
</body>3、为父标签使用伪元素进行设置添加
<style type="text/css">
.d1 {
height: 200px;
width: 200px;
background-color: red;
float: left;
}
.d2 {
height: 200px;
width: 200px;
background-color: yellow;
float: left;
}
.d3 {
height: 200px;
width: 200px;
background-color: blue;
/* 设置之后就不会进行浮动而是占用原本的位置 撑开父级块*/
clear: both;
}
/* .box {
/* 为存放浮动的盒子设置
overflow: hidden;
zoom: 1;
} */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="d1"></div>
<div class="d2"></div>
</div>
</body>清除浮动的本意：
不是将已经设置浮动的元素变为原来的样式，而是解决由于浮动导致的其他元素位置的修改，本质原因是因为浮动导致的父级元素的高度坍塌。
overflow溢出
如果设置了元素的大小，当进行内容书写时，内容过多可能导致溢出，可以通过溢出属性设置溢出的样式
| 描述 | |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 |
| auto |
<style type="text/css">
div {
height: 140px;
width: 150px;
border: 1px solid black;
/* 默认：溢出内容不隐藏直接显示 */
overflow:visible;
/*溢出内容隐藏不显示 */
overflow: hidden;
/* 溢出内容以滚动条形式展示 */
overflow:scroll;
/* 存在溢出内容则以滚动条形式展示 否则无样式 */
overflow: auto;
}
</style>
</head>
<body>
<div>hello world！</div>
</body>position定位
通过盒子模型可以将页面进行大概的搭建，但是在每个盒子内可能存在多个元素且位置不固定，这时候就需要使用定位来为指定元素定位至指定位置，定位的规则与方式称之为定位方式
通过设置定位样式之后通过位置设置将元素放置指定位置
1、static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
3、relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
4、fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
绝对定位
相对于第一个被定位的父标签进行定位，本质父标签继续向上最终根据body进行定位
<style type="text/css">
div {
height: 200px;
width: 200px;
/* 将div块设置为绝对定位 */
/* 根据当前父级元素左上角进行绝对定位 */
position: absolute;
}
.d1 {
background-color: royalblue;
}
.d2 {
background-color: yellowgreen;
}
.d3 {
background-color: blueviolet;
}
.d4 {
background-color: red;
}
.box{
left: 20px;
}
body{
margin: 0px;
}
</style>
</head>
<body>
<div class="box">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</div>
</body>相对定位
定位会使当前元素产生类似于浮动样式的脱离当前文本的位置，相对定位指的是元素的位置相较于没有进行定位时原位置进行定位
<style type="text/css">
div {
height: 200px;
width: 200px;
/* 相对定位 */
/* 相对于元素原位置进行定位 */
position: relative;
}
.d1 {
background-color: royalblue;
height: 500px;
width: 500px;
left: 10px;
}
.d2 {
background-color: yellowgreen;
height: 400px;
width: 400px;
bottom: 20px;
}
.d3 {
background-color: blueviolet;
height: 300px;
width: 300px;
}
.d4 {
background-color: red;
}
body {
margin: 0px;
}
</style>
</head>
<body>
<div class="box">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</div>
</body>H5新标签
选项列表
根据事先定义的数据列表，根据文本框输入的数据进行提升
<!-- 在原本文本框中 添加list属性 指向已经定义的数据列表id -->
<input type="text" list="mydata" placeholder="请输入姓名">选项列表<br>
<!-- 创建数据列表 指定id 会自动将数据加入使用的输入框中 展示效果类似于下拉框 -->
<datalist id="mydata">
<option value="Mister">
<option value="Mistress">
<option value="Miss">
<option value="Biss">
<option value="Brown">
</datalist>提示框
进行输入提示的属性，当用户输入后自动情况，如果输入框中没有内容则自动添加指定的提示
提示框：<br>
<input type="text" placeholder="提示内容"><br>必填框
通过指定的属性进行标识，在进行form标题提交时，如果指定标签没有数据则不会提交
必填框：<br>
<input type="text" required>正则校验框
使用属性并填入正则表达式，在进form表单提交时，如果指定标签数据不符合正则表达式则不会提交
正则校验框：<br>
<input type="text" pattern="[0-9 a-z A-Z]{1,5}"> 邮箱输入框
修改type样式使其进行邮件格式的验证，在进form表单提交时，如果指定标签数据不符合正则表达式则不会提交
邮箱输入框:<br>
<input type="email"><br>url输入框
修改type样式使其进行url格式的验证，在进form表单提交时，如果指定标签数据不符合正则表达式则不会提交
地址输入框:<br>
<input type="url"><br>数字输入框
进行数字选择与输入，可以设置选择的最小值min 最大值max 每次选择增长量step
数字输入框:<br>
<input type="number" min="1" max="10" value="1" step="2" name="number"><br>滑动输入框
以滑动的形式在设置的指定数值区间内min~max进行数值的滑动选择
滑动输入框:<br>
<input type="range" min="1" max="10" value="1" name="range"><br>日期输入框
可以动态选择日期输入
日期输入框:<br>
<input type="date" min="2010-12-16" name="date"/><br>
<hr>
时间输入框:<br>
<input type="time" step="180" name="time"/><br>
<hr>
时间选择框：<br>
<input type="datetime-local" name="date"/><br>
<hr>
星期选择框：<br>
<input type="week" /><br>
<hr>
月选择框：<br>
<input type="month" /><br>
<hr>拾色器
根据选择返回相应的16进制的颜色代码
拾色器:<br>
<input type="color" value="#ed1c24" name="color"><br>进度条：
<progress value="22" max="100"></progress>目录标签
可以自动进行隐藏展示（一般使用js实现）
<details>
<summary>Discussion</summary>
<p> 方案 </p>
<p> 方案 </p>
</details>
<details>
<summary>Discussion</summary>
<p> 方案 </p>
<p> 方案 </p>
</details>| 值 | 描述 | |
|---|---|---|
| autoplay | 如果出现该属性，则视频在就绪后马上播放。 | |
| controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 | |
| pixels | 设置视频播放器的高度。 | |
| loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 | |
| muted | 规定视频的音频输出应该被静音。 | |
| URL | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 | |
| preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 | |
| url | 要播放的视频的 URL。 | |
| pixels |
| autoplay | 如果出现该属性，则音频在就绪后马上播放。 | |
|---|---|---|
| controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 | |
| loop | 如果出现该属性，则每当音频结束时重新开始播放。 | |
| muted | 规定视频输出应该被静音。 | |
| preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 | |
| url | 要播放的音频的 URL。 |
注意：本文归作者所有，未经作者允许，不得转载
