细节问题

Posted 2020-12-07 heleiya

1、默认情况下ul和li前面的实心圆和阿拉伯数字都死在盒模型的padding区域显示的，要想清楚ul的padding的同时保留实心圆和数字在content区域显示的方法：css加list-style-position:1inside(ul的content区域显示)

2

float属性的消除：
①、清除浮动方法一：（clear:both;）
ul{list-style:none;}
ul li{float:left; margin:5px;}
.clear{clear:both;overflow:hidden;}

②、清除浮动方法二：（overflow:auto）
ul
{
list-style:none;
overflow:auto;
_zoom:1;
/*zoom是为了兼容ie6做的，触发ie6下的haslayout属性*/
}
ul li
{
float:left;
margin:5px;
}

③、清除浮动方法三：(:after 伪类元素)
#after ul:after
{
content: ".";
display: block;
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
}
④、采用display:table将对象变成table形式
⑤、采用div标签，以及css的clear属性
⑥、采用br标签，以及css的clear属性
⑦、采用br标签，以及其自身html的clear属性

3、

定位：

1，静态（static）标准流下的显示方式，可转换成其他定位方式
2，绝对 （absolute） ：
1）标准流下的盒子，设置绝对定位以body 为参照
2）除了父盒子设置static ，其他定位方式，子盒子以父盒子为参照
3）绝对定位的元素脱标
4）实现模式转换的效果
使用场景：1，盒子压盒子 2，绝对定位可以使用margin padding
3，相对（relative）：相对自己作为参照，不会脱标
使用子绝父相
4，固定（fixed）：
1）以body标签可视区域作为参照
2）脱标
3）实现模式转换的效果
层级：
1）定位的元素有层级关系
2）只有给定位的元素才能设z-index
特点：
1）元素设置定位后有个默认的z-index ：auto（除去static）
2）z-index 值相同 元素后来居上
3）z-index 值越大 当前的元素层级越高
4）父元素的z-index值越大 当前的元素层级越高简单

  绝对定位如何居中？

◆通过设置left:50% ;         父元素宽度的一半
◆设置margin-left:     -元素自己宽度一半；