前端学习日记05

定位

让标签相对于某个元素重新定义一个新的位置，可以相对于元素本身的位置，或者相对于父元素，甚至相对于浏览器窗口进行定位

属性： position:

值：
1、relative 相对定位

特点：
相对于元素本身的位置
不脱离文档流,仍然占位

使用场景：
微调元素位置

2、absolute 绝对定位
相对于离他最近的有定位属性的父元素，如果父元素没有定位属性，则会往上一级寻找， 一直 到根标签位置

特点：
脱离文档流，不占位：子绝父相

3、fixed 固定定位
特点：
相对于浏览器窗口进行定位、脱离文档流
static 静态（默认值）

【注意】： 定位需要配合偏移量：
left：
right：
top：
bottom：

4、定位层级:
z-index: n
层级数越大，显示越靠上
有定位属性的元素，z-index都默认是0
没有定位属性的元素设置z-index无效

脱离标准文档流
脱离标准文档流,层级提高：
几种情况：
（1） float:left;
（2） float:right;
（3）position:absolute
（4） position:fixed
浮动脱离文档流，提高半个层级，不能完全覆盖下面元素（不能覆盖图片文字）
定位脱离标准文档流，提升一个层级，可以完全覆盖下面元素及其内容

盒子居中

使盒子在其父元素中垂直水平居中:
父元素设置 position:relative
盒子：
1、 已知盒子宽高

    position:absolute;
    left:50%;
    top:50%;
    margin-left: - 盒子宽的一半
    margin-top: - 盒子高的一半

2、未知盒子宽高

    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

补充属性：

1、圆角属性：
border-radius: 10px
圆形： border-radius: 50%
​
2、list-style:none 取消列表符号
​
list-style-type: 列表符号类型
（1） disc 实心圆（ul默认值）
（2） circle 空心圆
（3）square 矩形
（4） decimal 阿拉伯数字(ol默认值)
（5）decimal-leading-zero 以0开头的数字
（6） lower-roman 小写罗马数字
（7）upper-roman 大写罗马数字
（8） lower-alpha 小写英文字母
（9） upper-alpha 大写英文字母
​
list-style-position:
值： outside 默认值,列表符号在li区域外面
inside 在里面

list-style-image: url() 将图片设置为列表符号
​
3、元素的显示隐藏：

（1） display: none 隐藏
（2） display: block 显示

（3） visibility: hidden 隐藏
（4） visibility： visible 显示
区别：
display:none隐藏 元素不占位
visibility：hidden 隐藏 元素仍然占位
​
4、 文本垂直对齐方式：

【注意】：这个属性需要设置给行内或者行内块，不可以设置给块标签

vertical-align:
值：
（1）baseline 基线对齐（默认值）
（2）top 顶部对齐
（3）middle 中间对齐
（4）bottom 底部对齐

图文对齐: 给图片设置vertical-align:middle

图片间隙

图片间隙：
1、 图片水平方向的间距（由换行产生的空白节点）
解决：
（1） 设置容器的font-size:0
（2）将图片类型转换成block
2、 图片垂直方向的间距（由行高产生）
解决：
（1） 设置行高为0
（2） 设置字体大小为0（水平垂直都可以解决）
（3） 将图片标签转换类型，block
（4）设置图片vertical-align的值不为baseline

透明度

透明度：
1、 rgba(red,green,blue,alpha) 不兼容IE6,7,8
alpha 透明度，0-1
只是设置元素的背景透明，元素中的内容没有透明效

2、 opacity 设置透明度 不兼容IE6,7,8
值 0-1
元素包括其中的内容整体有一个透明

3、IE6,7,8的透明
filter: alpha(opacity=num）

4、 transparent 透明色