/盒模型：1:所有标签皆为盒子；
2：盒模型渲染在浏览器区域的计算：++++++++
padding一定会改变盒子在浏览器中渲染区域的大小；
⁃ padding的颜色和盒子设置的背景色相同；/
/1：margin：盒子设置margin之后，代表盒子的margin值的范围内不允许再有其他盒子出现；
当盒子是嵌套关系时：子级的margin-top会传递给父级。导致父级随着子级一起向下移动。/
/*背景图的位置：
background-position:center;
background-position；top； bottom right
background-position: right-bottom */
/overflow:hidden;超出盒子的内容隐藏/
/overfl：visible；默认值，超出部分可见/
/overflow：scroll；强制给元素添加滚动条/
/font-size：10px；设置字体大小/
/color：red；设置字体颜色；/
/font-family：楷体;–设置字体类型/
/text-align:center文字水平方向居中/
/line-height:100px;文字垂直方向居中----前提文字只有一行，可以设置行高与盒子的高相同。/
/text-indent:40px;首行文字缩进/
/一个值时：代表上下左右内边距/
padding: 50px;
/两个值时：（上下） （左右) 内边距/
padding: 10px 50px;
/三个值时：（上） （左右） (下) 内边距/
padding: 5px 50px 20px;
/四个值时：（上） （右） （下） （左） 内边距 （顺时针方向）/
padding: 10px 20px 30px 40px;
/一个值时：代表上下左右外边距/
margin: 10px 20px;
/两个值时：（上下） （左右） 外边距/
margin: 10px 20px 30px;
/三个值时：（上） （左右） （下） 外边距/
margin: 10px 20px 30px 40px;
/四个值时：（上） （右） （下） （左） 外边距 顺时针方向/
/class选择器编写格式；.+选择器名字+{代码段}/
/class选择器的优先级要高于标签选择器/
/id选择器编写格式：#+选择器名+{代码段}/
/id选择器的优先级>class选择器优先级>标签选择器优先级/
id选择器的优先级>class选择器>标签选择器*/
/父级不设置边框，子级会将margin-top传递给父级，所以父级要用padding来设置/
<!-- display；属性：
block：块级标签
1：独占一行；
2：支持所有的css样式设置；
3：默认在宽度不设置的情况下占满整个父级宽度；
inline：行级标签或内嵌级标签
1：相同类型的元素标签可以在同一行排布，
如果同一行放不下，会自动挤到下一行。
2：不支持宽高设置，也不响应上下margin，响应左右margin和上下左右的padding；
3：宽高由内部的文字撑开；
4：相同类型的元素会解析结束标签和开始标签之间的回车符，产生固定的间隙；
解决方法：1：结束标签和开始标签之间的回车符删除；
2：将父级设置font-size：0px；
inlin-block：内联级标签
1：相同类型的元素标签可以在同一行排布，
如果同一行放不下，会自动挤到下一行。
2：支持所有的css样式设置；
3：相同类型的元素会解析结束标签和开始标签之间的回车符，产生固定的间隙；
-->
/选择器之间以逗号隔开，代表同时选中这些选择器，给它们设置共同的样式/
/*hover:代表鼠标悬停在该标签上时，
设置该标签的样式属性；
用法：1：设置鼠标悬停在某个标签上时，该标签或该标签的子级发生样式变化
2：选择器1：hover 选择器2{样式}
选择器2对应的标签一定是选择器1对应标签的子级，选择器2不写时，代表对选择器1设置样式
3：兄弟标签之间不能通过hover关联起来设置样式，例如： .div1和.div2是兄弟标签
.div:hover .div2{
样式；
}这种写法是非法的。
4;通过父级关联hover给子级设置样式时，需要单独给每个子级都设置样式，不能使用群组的方式，
进行hover效果的设置；
5：通过父级给子级设置hover时，每个子级也属于父级的一部分，因此鼠标停在子级上，等同于悬停在父级上。
*/
/宽度百分比是相对于父级定位设置的/
<!-- 定位position -->
<!-- 1:概念：用来描述一个盒子的位置，属性值有4个；
1：static:默认文本流，在不设置盒子的position属性时，盒子的默认位置属性，表明盒子存在
于浏览器的二维平面之内。
2：relative:相对定位，表明盒子将按照自身当前位置的4条边进行定位（top, right, bottom ,left）
定位特点：
2.1：不脱离当前文本流；
2.2：原始位置空间保留，不会被其他元素占据；
2.3：对原有的布局影响最小，通常为父级块设置该位置属性，来配合子级的absolute属性，
实现定位叠加。(指定某一父级为子级绝对定位的基准盒子)。
3：fixed：固定定位，相对浏览器的四条边进行定位，脱离原来的文本流。
4：absolute:绝对定位
特点：4.1：完全脱离文本流；
4.2：定位基准盒一定是其某一个父级，兄弟盒不能作为其定位的基准盒；他的父级不能是默认的static属性；
4.3：基准盒标准：按照距离该子级最近的且位置属性为非默认文本流的父级进行定位；
4.4：宽度百分比按照定位基准盒父级的宽度进行百分比变化；
4.5：当定位基准盒不设置高度，且所有子级全部脱离文本流后，该父级高度将消失；宽度坍塌。
解决方案：为该父级设置固定的高度
5：所有脱离原有文本流的块级标签，当不设置其宽度的时候，默认宽度不在占满整个父级宽度，而是由内容
宽度决定其大小的。
6：对于一个标签设置其position属性以后，必须要对其进行定位操作；-->
<!-- hover代表鼠标悬停在该标签时，设置该标签的样式属性 -->
<!-- text-align:
1：当父级设置text-align:center；时，子级的display:inline或者inline-block类型时，
该元素会在父级水平方向上居中；
2：子级的display：block类型时，该元素不会在父级水平方向上居中，
但是该元素的文本内容会在该元素的水平方向上居中。 -->
<!-- box-shadow:
inset:阴影的投放方式，默认是外阴影，inset是内阴影
x轴的偏移量：可以是正值，可以是负值；
y轴的偏移量：可是是正值，可以是负值；
阴影的模糊半径：只能是正值；
阴影的扩展半径：正值时表示放大效果，向外扩展；
负值时表示缩小效果，向内缩小；
阴影的颜色：color-->
/z-index:设置同级兄弟元素之间的在垂直于浏览器平面方向上的显示优先级。
值没有单位，可以是任意一个整数，值越大显示优先级越高，必须设置
该属性，以保证渲染结果正确显示。
另外，子级z-index受父级z-index限制，不同父级的子级之间进行z-index比较时，
只跟他们父级z-index值大小有关，跟子级的z-index大小无关。/
<!-- 清浮动：由于子级设置浮动，脱离原来的文本流，导致父级的高度塌陷，所以需要清除浮动来
解决这个问题：
1：给父级设置固定的高度：（可扩展性差）：
2：让父级也浮动：（安全性差）；
3：overflow：hidden；给父级设置这个属性；会改变块的格式布局（不必细究）；
让其回到原来的文本流，从而解决来父级高度坍塌的问题（不常用）；
4：在父级后面添加一个空标签，设置clear：both； 表示当前块不允许所在文本行内有
其他的浮动的块存在，保留一个块来撑开父级的高度。
5：利用给父级添加伪类after样式，利用代码的形式在父级最后面添加一个内容为空的子级，
它不允许所在文本行内有其他浮动的块存在，height设置为0，来撑开父级的高度。
5.1：该盒子默认你的块级类型是display：inline；
5.2：实现方式： ：after{
content：“”；
display：block；
clear：both：
}
5.3：目前最最主流的清浮动的方法：after伪类；
-->
<!-- input 中的属性：
placeholder="" 预置输入提示，主要用于文本框输入
required表示该表单为必填项，不需要赋值，直接使用默认值就好；
enabled默认值表示该表单可以进行输入，不需要赋值直接使用默认值就好。
disabled表示该表单不可以输入，不需要赋值，直接使用默认值就好-->
/table构成和样式：
1：构成：
table>语义化标签设置外框
table row用来划分表格中的一行的标签
table data 表示用来存放数据的元素的单元格默认是文字据左的状态
table head 表示用来做标题元素的单元格：
其中文字会加粗，并且居中。
| 创建单元格来决定列数； 2：样式： 2.1：table-collapse:collapse可以消除每个单元格之间的间隙； 2.2border:"";按级别设置表格边框的大小，没有单位 2.3：无论表格是否有固定宽度，td ，th 的margin属性都失效 2.4;表格一旦生成，一定会按行列对齐，如果需要错行或者错列对齐，只能通过行合并或者列合并来完成。 并且单行的高度是由所有元素中高度最高的那个决定； 单列的宽度是由本列中宽度最宽的元素决定；/ /border-collapse:collapse;用来设置每个单元格之间的边界坍塌为1条边界，默认值：separate/ table表格： tr：table row 行 td：table data 数据 列 th：table head 标题 colspan:设置的是横跨了几列； --> <!-- caption:元素定义表格的标题；caption标签必须只能紧随table标签之后， 只能对每个表格定义一个标题，通常这个标题会被居中于表格之上。 |
|---|
<iframe src="html5NewElement.html" width="500" height="500" frameborder="0">
<p>该浏览器不支持iframe框架</p>
</iframe>
<br>
<!-- video定义视频的标签 -->
<!-- preload 预加载-->
<!-- autoplay自动播放 -->
<!-- loop循环播放 -->
<!-- 多媒体标签属性：
1：autplay： 视频自动播放
2：controls：向用户显示控制播放的控件
3：loop： 循环播放
4：preload：视频自动加载
5：poster：视频封面 -->
<!-- source标签，将多个格式的相同视频源引入到浏览器，浏览器支持哪个就播放哪个 -->
<source src="video/video.webm" type="video/ogg">
<source src="video/video.avi" type="mimetype">
<video src="video/video.mp4" poster="img/timg.jpeg" controls loop width="300" height="300" >
</video>
<!-- controls控制 -->
<!-- 前段规范：具有布尔值类型的属性，不需要写值。直接写属性名即可； --><br><br><br><br><br>
<!-- audio -->
响应式布局：顾名思义就是根基页面宽高的不同，为页面设置不同的样式效果；
实现方式：采用媒体查询技术来完成：@media媒体查询用用愈发结构：
1：内嵌在样式表（内部样式表，外部样式表）@media only screen and (条件一) and (条件二)
and（样式表）
内嵌在样式表中的媒体查询必须写在初始样式的后面
2：写在link标签中：
表示在条件满足时引入样式表，引入媒体查询的样式表当写在原样式表之后；
3：由于内部样式表的优先级要高于外部样式表，因此为了保证响应能够成功被执行，必须保证外部引入
样式表中设置的样式，在内部样式表中不存在。
@media only screen and (max-width:1500px) and (min-width:1300px){
–>
<!-- em:只跟结构上的直接父级的字体大小有关，表示相对于直接父级的字体的倍数；
rem：只跟当前设备的浏览器默认的字体大小有关，表示为相对于浏览器字体大小的倍数；
5112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
