网页布局总结+技巧

网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己专门用法

1. 标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局

1. 浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

1. 定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局

布局技巧

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;