- 盒子居中:margin:0 auto;
- 浮动元素脱离了标准文档流
d1盒子脱离了标准文档流,d2盒子因此成为了标准文档流第一个,位于页面左上方,d1盒子浮动在d2上 .d1{ float:red; background-color:red; width:100px; height:100px; } .d2{ background-color:blue; widht:200px; height:200px; } <div class="d1"></div> <div class="d2"></div> span为行内元素,脱离了标准文档流,未设置display:block也能设置宽高 span{ float:left; width:20px; height:20px; } <span>你好</span> <span>你好</span>
- 浮动的元素互相贴靠
如果空间足够,则3贴着d2,不够则贴着d1。3若比2宽,页面宽度够2不够3排列时,3会去贴左侧边缘 <div class="d1"></div> <div class="d2"></div> <div class="d3"></div>
- 浮动的元素有“字围效果”
浮动的元素能挡住盒子,但挡不住盒子里的文字,文字会围绕浮动元素 .d1{ float:left; width:30px; height:30px; background-color:red; } .d2{ width:50px; height:50px; background-color:blue; } <div class="d1"></div> <div class="d2">123我爱你</div>
- 浮动的收缩
一个浮动的元素如果没设置width,那么宽度自动收缩为文字的宽度
- 父子盒模型
如果父盒子的width小于子所有盒子的width与padding之和,那么从超过的第一个子盒子将另起一行排列。
8.脱离标准文档流(浮动/固定定位/绝对定位)
最新推荐文章于 2024-04-19 06:05:38 发布