CSS常见布局技巧+案例

按照HTML+CSS的学习顺序笔记已经更新了29篇内容了，因为篇幅问题，请看文末。今天来学常见布局技巧。

巧妙利用一个技术更快更好的布局：

margin负值的运用
文字围绕浮动元素
行内块的巧妙运用
CSS三角强化

一、margin负值运用

1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

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

二、文字围绕浮动元素

效果：

布局示意图：

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

三、行内块巧妙运用

四、CSS三角强化案例

4.1 原理

<style>.box1{width:0;height:0;/* 把上边框宽度调大 *//* border-top: 100px solid transparent;border-right: 50px solid skyblue; *//* 左边和下边的边框宽度设置为0 *//* border-bottom: 0 solid blue;border-left: 0 solid green; *//* 1.只保留右边的边框有颜色 */border-color:transparentredtransparenttransparent;/* 2. 样式都是solid */border-style:solid;/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */border-width:100px50px00;}style>head><body><divclass="box1">div>body>

4.2 案例效果

4.3 参考代码

<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>CSS三角强化的巧妙运用title><style>.price{width:160px;height:24px;line-height:24px;border:1pxsolidred;margin:0auto;}.miaosha{position:relative;float:left;width:90px;height:100%;background-color:red;text-align:center;color:fff;font-weight:700;margin-right:8px;}.miaoshai{position:absolute;right:0;top:0;width:0;height:0;border-color:transparentffftransparenttransparent;border-style:solid;border-width:24px10px00;}.origin{font-size:12px;color:gray;text-decoration:line-through;}style>head><body><divclass="price"><spanclass="miaosha">¥1650<i>i>span><spanclass="origin">¥5650span>div>body>html>