前端学习之CSS——常见布局技巧

1. margin负值运用

1. 让每个盒子

   margin

   往左侧移动 -1px 正好压住相邻盒子边框

2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加

   z-index

   ）

2. 文字围绕浮动元素

效果

布局示意图

巧妙运用浮动元素不会压住文字的特性

3. 行内块巧妙运用

页码在页面中间显示:

1. 把这些链接盒子转换为行内块， 之后给父级指定

   text-align:center

   ;

2. 利用行内块元素中间有缝隙，并且给父级添加

   text-align:center

   ; 行内块元素会水平会居中

4. CSS三角

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
一张图， 你就知道 CSS 三角是怎么来的了, 做法如下：

div {width: 0;height: 0;border: 50px solid transparent;border-color: red green blue black;line-height:0;font-size: 0;}

1. 我们用css 边框可以模拟三角效果
2. 宽度高度为0
3. 我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为

   transparent

   透明就好了

4. 为了照顾兼容性 低版本的浏览器，加上

   font-size: 0; line-height: 0;

5. 圆角矩形

圆角矩形可以为4个角分别设置圆度， 但是是有顺序的

border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;

如果4个角，数值相同

border-radius: 15px;

里面数值不同，我们也可以按照简写的形式，具体格式如下:

border-radius: 左上角 右上角  右下角  左下角;

还是遵循的顺时针。