CSS·常见布局技巧

CSS·常见布局技巧

一.margin负值的运用

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

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

ul li{
	position:relative;
	float:left;
	list-style:none;/*去掉小点*/
	width:150px;
	height:200px;
	border:1px solid red;
	margin-left:-1px;、/*使得两个边框靠在一起不会呈现两倍粗细*/
}
ul li:hover{
	/*1.如果盒子没有定位，则鼠标经过添加相对定位即可
	position:relative;*/
	/*2.如果li都有定位，则用z-index提高层级*/
	z-index:1;
	border:1px solid blue;	
}

<ul>
	<li>1<li>
	<li>2<li>
	<li>3<li>
	<li>4<li>
<ul>

二.文字围绕浮动元素

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

        *{
            margin: 0;
            padding:0;
        }
        .box{
            width: 300px;
            height: 70px;
            margin: 0 auto;
            padding:5px;
        }
        .pic{
            float: left;
            width: 120px;
            height: 60px;
        }
        .pic img{
            width: 100%;
        }

<div class="box">
        <div class="pic">
            <img src="img.png" alt="">
        </div>
        <p>哈哈哈哈哈哈哈</p>
 </div>

三.行内块的巧妙运用

.box1 {
            text-align: center;
        }
        
        .box1 a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }
        
        .box1 .prev,
        .box1 .next {
            width: 85px;
        }
        
        .box1 .current,
        .box1 .elp {
            background-color: #fff;
            border: none;
        }
        
        .box1 input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }
        
        .box1 button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }

<div class="box1">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a> 到第
        <input type="text"> 页
        <button>确定</button>
    </div>

四.css三角强化

.box2 {
            width: 0;
            height: 0;
            /* 把上边框的宽度调大
            border-top: 100px solid transparent;
            border-right: 50px solid blue;
            /* 左下边框宽度设置为0 */
            /* border-left: 0 solid yellow;
            border-bottom: 0 solid red;  */
            /* 1.值保留右边框有颜色 */
            border-color: transparent red transparent transparent;
            /* 2.样式都是solid */
            border-style: solid;
            /* 3.上边框宽度要大，右边框 宽度稍小，其余边框该为0 */
            border-width: 100px 50px 0 0;
        }

.miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            font-size: 20px;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }
        
        .miaosha i {
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }
        
        .origin {
            font-size: 16px;
            color: grey;
            text-decoration: line-through;
        }

<div class="price">
        <span class="miaosha">
            ￥1650
            <i></i>
        </span>
        <span class="origin">￥5670</span>
    </div>

效果：