HTML
html5新特性：
<pre>标签定义了预格式化的文本。
<pre>标签内的文本以固定宽度字体显示，并保留空格和换行符;表格标题 （可不写）
<caption>标题</caption>跨列 colspan跨行 rowspan
使用 window.alert() 弹出警告框。使用 document.write() 方法将内容写到 HTML 文档中。使用 innerHTML 写入到 HTML 元素。使用 console.log() 写入到浏览器的控制台。
a标签target属性：_self 在当前页面打开
_blank 在新页面打开
label标签
meta：
vertical-align
设置元素的垂直对齐方式。
| JavaScript 语法： | object.style.verticalAlign="bottom" |
改变光标形状：cursor
text-decoration：下划线
text-indent：
text-transform：
list-style：
overflow：
box-sizing：
去除外边框：outline
针对空格留白问题：在父标签设置font-size：0
https://www.cnblogs.com/lynnmn/p/6254367.html
一般：子绝（absolute）父相（relative）
背景
background-color
背景颜色
background-image
1. 设置背景图片
需要一个url地址作为参数
例子：background-image:url(图片的路径)
2. 使用注意
如果背景图片大于元素，默认会显示图片的左上角
如果背景图片和元素一样大，则会将背景图片全部显示
如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
3. 可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色, 一般情况下设置背景图片时都会同时指定一个背景颜色
background-repeat
1. 设置背景图片重复方式
2. 可选值：
repeat
默认值，背景图片会平铺显示
沿x轴和y轴双方向重复
no-repeat
背景图片不重复
repeat-x
背景图片沿水平方向重复
repeat-y
背景图片沿垂直方向重复
background-position
设置背景图片的位置
设置方式一
可以直接通过几个位置的关键字来设置图片的位置
top
left
right
bottom
center
可以通过以上关键字两两组合的形式，将背景图片设置到元素的任意位置
如果仅仅指定一个值，则第二个值默认是center
设置方式二
可以直接指定两个值，来设置背景图片的偏移量
例子：
background-position : x轴偏移量 y轴偏移量;
x轴偏移量，用来指定图片的水平位置
如果指定一个正值，则图片向右移动
如果指定一个负值，则图片向左移动
y轴偏移量，用来指定图片的垂直位置
如果指定一个正值，则图片向下移动
如果指定一个负值，则图片向上移动
background-attachment
用来设置背景是否随页面滚动
可选值
scroll
默认值，背景图片会随页面一起滚动
fixed
背景图片不随页面滚动，会固定在页面的指定位置
设置该属性的背景，则背景会永远相对于浏览器窗口进行定位
一般这种背景都会设置给body
background-size
规定背景图像的尺寸
使用方式
background-size: length|percentage|cover|contain;
图示
background
背景的简写属性
可以通过它来设置所有的背景相关的样式
该简写属性没有顺序的要求，也没有数量的要求，不写的属性使用默认值
opacity
用来设置背景的不透明度
可选值
0-1
0表示完全透明
1表示完全不透明
0.5半透明
IE8及以下的浏览器不支持该样式，可以使用滤镜来代替
filter:alpha(opacity=值)
这里值需要一个0-100之间的值
0相当于完全透明
100完全不透明
高度塌陷解决
1. 产生原因
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷
2. 造成后果
父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱
3. 解决方案
方案一
开启父元素的BFC
BFC
Block Formatting Context
块级格式化环境
BFC是元素的隐含属性，默认是在关闭状态的
可以通过一些特殊的样式，来开启BFC
开启BFC以后元素将会具有如下特性
父元素的垂直外边距不会与子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动子元素
开启BFC的方式
1.设置元素浮动
2.设置元素绝对定位
3.设置元素的类型为inline-block
4.设置overflow为一个非默认值
一般都是使用overflow:hidden来开启BFC方法二
方式
在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动
<div id="box1">
<div id="box2"></div>
<div style="clear:both"></div>
</div>
存在问题
使用这种方式会在页面中添加多余的结构
知识点: 清除浮动
概念
有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
clear可以用来清除其他浮动元素对当前元素的影响
可选值
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响方法三
使用after伪类，向父元素后添加一个块元素，并对其清除浮动
该种方式的原理和方法二原理一样，但是不用向页面中添加对于的结构
方式
.clearfix:after{
content:"";
display:block;
clear:both;
}序号选择器
不区分类型
:first-child
选中同级别中第一个标签
:last-child
选中同级别中最后一个标签
:nth-last-child(n)
选中同级别中倒数第n个标签
:nth-child(n)
选中同级别中第n个标签
:only-child
选中同级别中唯一子元素标签
区分类型
:first-of-type
选中同级别中同类型第一个标签
:last-of-type
选中同级别中同类型最后一个标签
:nth-of-type(n)
选中同级别中同类型第n个标签
:nth-last-of-type(n)
选中同级别中同类型倒数第n个标签
:only-of-type
选中同级别中唯一同类型子元素标签
奇偶选择
:nth-child(odd)
选中级别中所有奇数
:nth-child(even)
选中同级别中所有的偶数
:nth-child(xn+y)
x,y是用户自定义的 n为计数器,从0开始递增选择, 到元素的总个数停止
rem
rem
1. 概念
rem可以在用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的布局、文字、图片、按钮
rem（font size of the root element）是指相对于根元素的字体大小的单位。
一旦根节点html 定义的 font-size 变化，那么整个网页中运用到 rem的也会随之变化。
2. 使用
浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1rem=16px。那么12px=0.75rem,10px=0.625rem。
重新计算那些被放大的字体rem数值，避免字体大小的重复声明
目前PC端开始普遍使用rem, 移动端基本完全使用
伸缩布局
1. Flex布局
display: inline-flex;
display: flex;
将对象作为弹性伸缩盒展示，用于行内元素 将对象作为弹性伸缩盒展示，用于块级元素
2. 常用属性
flex-direction
用于指定Flex主轴的方向，继而决定 Flex子项在Flex容器中的位置
取值：row | row-reverse | column | column-reverse
row：默认值，表示水平方向从左到右排列，此时水平方向轴线为主轴
row-reverse：与row相反
column：表示垂直方向从上到下排列，此时垂直方向轴线为主轴
column-reverse：与column相反
justify-content
用于指定主轴(水平方向)上Flex子项的对齐方式
取值：flex-start | flex-end | center | space-between | space-around
flex-start：默认值，表示与行的起始位置对齐
flex-end：表示与行的结束位置对齐
center：表示与行中间对齐
space-between：表示两端对齐，中间间距相等。要注意特殊情况，当剩余
空间为负数或者只有一个项时，效果等同于flex-start
space-around：表示间距相等，中间间距是两端间距的2倍。要注意特殊情
况，当剩余空间为负数或者只有一个项时，效果等同于
center
align-items
用于指定侧轴(垂直方向)上Flex子项的对齐方式
取值：stretch | flex-start | flex-end | center | baseline
stretch：默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，
将Flex子项高度设置为行高度。
这里需要注意，在只有一行的情况下，行的高度为容
器的高度，即Flex子项高度为容器的高度
flex-start：表示与侧轴开始位置对齐
flex-end：表示与侧轴的结束位置对齐
center：表示与侧轴中间对齐
baseline：表示基线对齐，当行内轴与侧轴在同一线上，即所有Flex子项的基线在同
一线上时，效果等同于flex-start
flex-wrap
用于指定Flex子项是否换行
取值：nowrap | wrap | wrap-reverse
nowrap：默认值，表示不换行，Flex子项可能会溢出
wrap：表示换行，溢出的Flex子项会被放到下一行
wrap-reverse：表示反方向换行
align-content
该属性只作用于多行的情况下，用于多行的对齐方式
取值：stretch | flex-start | flex-end | center | space-between | space-around
stretch：默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将
Flex子项高度设置为行高度;
flex-start：表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的
每一行都紧靠前面一行;
flex-end：表示各行与侧轴的结束位置对齐，最后一行紧靠侧轴结束边界，之后
的每一行都紧靠前面一行;
center：表示各行与侧轴中间对齐;
space-between：表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数时，
效果等同于flex-start;
space-around：表示各行之间间距相等，中间间距是两端间距的2倍。要注意特殊情况，当
剩余空间为负数时，效果等同于center
align-self
该属性用来单独指定某Flex子项的对齐方式
取值：auto | flex-start | flex-end | center | baseline | stretch
3. 复合属性flex
复合属性flex，是flex-grow 、 flex-shrink 和 flex-basis 的简写属性，用来指定Flex子项如
何分配空间
flex-grow：默认值为0，若省略则被默认为1
flex-shrink：默认值为1，省略时默认为1
flex-basis：默认值为auto，省略时默认为0%
新增备注：CSS 父子选择器和直接后代选择器
//1.父子选择器
//div下的所有a,包括儿子，孙子。。。。
div a{}
//2.直接后代选择器
//div下的儿子才能被作用
div >a{}
572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
