网页布局总结
通过盒子模型,清楚知道大部分html标签是一个盒子
一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己专门用法
- 标准流
可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局
- 浮动
可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局
- 定位
定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示,如果元素自由在某个盒子内移动就用定位布局
布局技巧
1、margin负值的运用
源代码
边框合并,靠margin-left的负值,浏览器渲染的时候是一个一个li来加样式的,第一个li margin-left负值先出来,然后第二个li,1、让每个盒子margin往左移动-1px正好压住相邻盒子边框
2、鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果父盒子没有定位,则加相对定位(保留位置) 如果有定位,则加z-index)
2、文字围绕浮动元素
源代码
巧妙运用浮动元素不会压住文字的特性
3、行内块元素的妙用
源代码
行内块元素可以设置高度宽度,并且它们之间有缝隙,如果给父盒子添加text-align: center;里面的行内块元素都会实现水平居中
4、CSS三角形强化
源代码
原理:一个子盒子边框为三角形然后定位到父盒子指定位置上,border-width: 盒子高度 盒子宽度 0 0; 其他三角形同理,只需两个数值不一样就可拉长
代码:
width: 0;
height: 0;
border-color: transparent blue transparent transparent;
border-style: solid;
porder-width: 26px 10px 0 0;