-
HTML中三大布局方式
标准流（文档流）
浮动
定位
其中标准流存两种元素：
块级元素（div、table、H1~H6、有序无序列表（ol、ul、li）、p）
内联元素（a、span、image、input）
查看全部 -
侧边导航栏笔记，并且有居中left和top为50%时margin-top：-的一半处理居中的问题
查看全部 -
position定位属性，相对定位，绝对定位，固定定位，及z-index查看全部
-
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>侧边栏导航跟随案例</title><style>*{padding: 0;margin:0;}body{height: 3000px;background: pink}.nav li{list-style: none;cursor:pointer;}.nav{position:fixed;left: 0;top: 50%;transform:translateY(-50%);width:160px;height:auto;text-align:center;}.first{line-height: 40px;background: #666;}.first>li{position:relative;}.first>li:hover >.second{display: block;}.second>li:hover >.third{display: block;}.second{display: none;position:absolute;top:0;left:160px;}.second>li{position: relative;width:160px;line-height: 40px;background: #666;}.third{display: none;position:absolute;top:0;left:160px;}.third>li{width:160px;line-height: 40px;background: #666;}</style></head><body><div class="nav"><ul class="first"><li>菜单一<ul class="second"><li>二级菜单1<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li><li>二级菜单2<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li><li>二级菜单3<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li></ul></li><li>菜单二<ul class="second" ><li>二级菜单1<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li><li>二级菜单2<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li><li>二级菜单3<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li></ul></li><li>菜单三<ul class="second"><li>二级菜单1<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li><li>二级菜单2<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li><li>二级菜单3<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li></ul></li></ul></div></body></html>查看全部 -
Dffff查看全部
-
position参数设置top left，元素以左上角为原点，向右以及向下移动。 position参数设置right bottom，元素以左上角为原点，向左以及向上移动。查看全部
-
后写的position层级大于先写的查看全部
-
标准流:按元素的特性，不做其他修改。查看全部
-
absolute relative查看全部
-
没高度查看全部
-
固定定位不受制于父级元素查看全部
-
z-index可以设置元素的叠加顺序
z-index大的元素覆盖z-index小的元素
z-index为auto的元素不参与层级比较
z-index为负值，元素被普通流中的元素覆盖
查看全部 -
position可以设置参数如下：
static：默认值，元素按照标准流排列。
relative：相对定位，元素仍是按照标准流排列，但可以使用left、right、top、bottom来改变位置。
absolute：绝对定位，元素脱离正常的文档流，可以通过left、right、top、bottom来改变位置，参照物符元素的定位属性，如果父元素都没有定位属性，则参考窗口定位。注意问题：由于脱离文档流，可能导致容器高度为0；
fixed：固定定位，元素脱离正常的文档流，可以通过left、right、top、bottom来改变位置，固定定位不少限制与父级元素，无论父级元素是否带有定位属性。
inherit：继承，继承父类元素的定位属性。
查看全部 -
css定位与鼠标移动效果查看全部
-
好好好查看全部
举报
0/150
提交
取消