position
relative:距离自己原先位置发生变化
absolute：寻找最近的具有position属性的父元素进行定位，如果没有的话，就根据整个文档进行定位。
absolute：脱离文档流（飞起来了，离开了自己的位置，后面的就上去了）top ,
float：漂浮，脱离文档流
float：right(left)：向右漂浮
2017/08/31
Relative: 相对于自身位置进行定位，初始位置还在
Absolute：相对于最近的具有relative/Absolute属性的父元素进行定位，如果没有，则相对于body进行定位，初始位置已经不存在了（其他元素的文字也会占据初始位置），可以把行内元素变成块级元素
Static: 默认设置
Fixed: 相对于窗口永远不动，float 对 其不起作用。
Float：左右漂浮，
（1）跟在最前面的标准流块级元素下一行
（2）越过所有行内元素
（3）跟在前面的float元素的后面，
（4）当所有的float元素总宽度超过一行的时候，后面的float元素会换行，换行之后，
a 左边缘与前面的float元素右边缘对齐或者
b 与body左边缘对齐
a
b
（5）初始位置不存在了（文字不会占据初始位置）
（6）本来块级元素的默认宽度是父元素宽度的100%，但是加了float之后，宽度变为内容宽度
（7）可以把行内元素变为块级元素
alignment: 以baseline对齐
clear: 只对自己有效果，和 float 搭配用。
overflow:当内容超过div的大小时。 （可以分别设置x轴,y轴）
a visible:字全部显示
b hidden 只显示div的大小
c scroll 带有滚动条
d auto 带有滚动条(和scroll有区别，查一查)
visibility ：显示或隐藏
visible
hidden
collapse:用于表格
content-box:内容固定，加修饰的额话往外扩
border-box:边框固定，加修饰的话会挤压内容
不包括margin
www.phpstudy.net/css3
www.css88.com
双飞翼解决的问题
1 两个边框部分固定，中间内容随着屏幕大小自动变化
2中间部分先被渲染，让用户先看到中间的内容
height和width的百分之多少是以父元素来衡量标准。如果父元素的height是0（默认值），那子元素也是0
块级元素的width的默认值是100%，而height的默认值是0
如果块级元素用float修饰，变成行内元素，width默认值也变成0了。
flex 弹性盒子——display：flex
1 flex-direction:row,这时，设置的width失效
flex-direction:column ，这时，设置的height失效
2 -webkit-flex 用来设置比例
3 older用于设置flex的顺序
ul>li*4>a
ul:无序列表
<li>
ol:有序列表
align-content 对只有一行元素不起作用，要加 flex-wrap:wrap(换行）
justify-content：水平对齐方式
align-content,align-items：纵向对齐方式
clip
默认值：auto 对象无剪切
适用于：绝对定位元素
示例：clip:rect(auto 50px 20px auto)
说明：上边不剪切，右边从左起第50个像素开始剪切直至最右边，下边从上起第20个像素开始剪切直至最底部，左边不剪切
上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0；
右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即 右-下 方位的auto值为盒子的实际宽度和高度；
上→右→下→左 的顺序
网友评论