- 对于
position:absolute
,元素定位将相对于最近的一个已定位的父元素,如果没有的话相对于浏览器 - flex布局的知识导图:
重点:
1.flex-grow
:定义项目的放大比例,默认为0,即存在剩余空间也不放大
2.flex-shrink
:定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
3.flex
: 项目在容器上如何伸缩。
1个值: 无单位:grow,有单位:basis
2个值: 无单位:grow & shrink,有单位:grow & basis
3个值:grow & shrink & basis
4.flex-basis
: 在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度,主轴为纵向时代表高度。 - 等分布局的实现**
- margin的零活运用(双飞翼布局)
- margin百分比
规定基于父元素的宽度的百分比的外边距 - margin负边距
- margin百分比
- 设置初始化
ie
盒模型:box-sizing:border-box
选择请*无法覆盖到伪元素,所以要给html { box-sizing: border-box; } *, *:after, *:before { box-sizing: inherit; }
:after
和:before
分别设置,
然后通过继承的方式应用到所有元素,方便为某个元素和其后代元素设置box-sizing:content-box
body
有默认8px
的margin
transparent
:全透明黑色:not
选择器
- 宽高等比例缩放:
<div class="box"> padding </div>
.box { width: 20%; background-color: pink; } .box::after { content: ''; display: block; /* 现在伪元素的父亲是box,高度应该和box的高度相等 */ padding-top: 100%; }
- 消失边界线:
效果图:
<div class="ul-container"> <ul> <li>测试</li> <li>消失</li> <li>边界线</li> <li>右侧</li> <li>边界线</li> <li>消失</li> <li>测试</li> </ul> </div>
小技巧:父元素添加.ul-container { overflow: hidden; } .ul-container, ul{ width:300px; margin-left: -1px; } li{ float:left; width:99px; border-left:1px solid #999; }
overflow:hidden
,li
添加反向边框,ul
增加一个负的margin
来实现
wangkaiwd / html-css-layout Goto Github PK
View Code? Open in Web Editor NEW页面常见布局