解決盒子浮動(dòng)時(shí)margin會(huì)顯示兩倍的美觀問題

li21 發(fā)布于2019-04-23 13:40 / 2063人閱讀

摘要：當(dāng)給幾個(gè)大小一樣有的盒子浮動(dòng)時(shí)，會(huì)出現(xiàn)自動(dòng)加起來的結(jié)果。此時(shí)可以給每個(gè)盒子一個(gè)的長來實(shí)現(xiàn)很好的效果，這樣右邊的盒子會(huì)把左邊盒子的右邊壓住，如圖所示。給盒子相對(duì)定位以使用使用屬性，這樣選擇盒子時(shí)就會(huì)給盒子一個(gè)在上面的疊放次序

　　當(dāng)給幾個(gè)大小一樣有boder的盒子浮動(dòng)時(shí)，會(huì)出現(xiàn)margin自動(dòng)加起來的結(jié)果。

　　此時(shí)可以給每個(gè)盒子一個(gè)margin-left:-border的長來實(shí)現(xiàn)很好的效果，這樣右邊的盒子會(huì)把左邊盒子的右邊border壓住，如圖所示。

　　還可以使用偽元素實(shí)現(xiàn)動(dòng)態(tài)效果，代碼如下。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Com-Margintitle>
    <style>
        div{
            height: 600px;
            width: 300px;
            border:1px solid #ccc;
            float: left;
            margin-left: -1px;
            position: relative;/*給盒子相對(duì)定位以使用z-index*/
        }
        div:hover{
            border:1px solid #f40;
            z-index: 1;/*使用z-index屬性，這樣選擇盒子時(shí)就會(huì)給盒子一個(gè)在上面的疊放次序*/

        }
    style>
head>
<body>
    <div>div>
    <div>div>
    <div>div>
    <div>div>
body>
html>

云服務(wù)器 GPU云服務(wù)器浮動(dòng)顯示 html5浮動(dòng)問題支付時(shí)常見問題云服務(wù)器銷售會(huì)遇到哪些問題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/2196.html

相關(guān)文章

50道CSS基礎(chǔ)面試題（附答案）

摘要：彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作。漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。首先，巧妙的使用這一標(biāo)記，將瀏覽器從所有情況中分離出來。偶數(shù)字號(hào)相對(duì)更容易和設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系。 1 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + margin低版本I...

wua_wua2012 2019-08-30 13:58 評(píng)論0 收藏0
整理 45 道 CSS 基礎(chǔ)面試題（附答案）

1、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + margin低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）+ margin 2、box-sizing屬性？用來控制元素的盒子模型的解析模式，默認(rèn)為content-boxcontext-box：W3C...

alanoddsoff 2019-04-23 14:38 評(píng)論0 收藏0
CSS面試須知，哪些需要掌握得CSS技巧

摘要：首先，巧妙的使用這一標(biāo)記，將瀏覽器從所有情況中分離出來。類似于優(yōu)先級(jí)機(jī)制優(yōu)先級(jí)最高，有他們?cè)跁r(shí)，不起作用，值需要調(diào)整。若從左向右的匹配，發(fā)現(xiàn)不符合規(guī)則，需要進(jìn)行回溯，會(huì)損失很多性能。偶數(shù)字號(hào)相對(duì)更容易和設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系。 1 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + paddin...

wushuiyong 2019-08-30 11:24 評(píng)論0 收藏0
CSS 面試題總結(jié)

摘要：而名作為標(biāo)簽的身份則是唯一的，在頁面中只能出現(xiàn)一次。會(huì)導(dǎo)致父容器高度塌陷。堆疊順序由元素在文檔中的先后位置決定，后出現(xiàn)的會(huì)在上面。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實(shí)現(xiàn)清除浮動(dòng)。 CSS 中類 (classes) 和 ID 的區(qū)別。書寫上的差別：class名用.號(hào)開頭來定義，id名用#號(hào)開頭來定義；優(yōu)先級(jí)不同（權(quán)重不同）調(diào)用上的...

tomato 2019-08-29 15:06 評(píng)論0 收藏0
深入理解css中的margin屬性（最新瀏覽器支持）

摘要：豎直方向的外邊距合并兩個(gè)豎直方向的盒子相遇時(shí)，其豎直方向的距離等于上方盒子的下外邊距和下方盒子的上外邊距中較大的一個(gè)。本文啟發(fā)于博客園一篇2016年的深入理解css中的margin屬性文章，根據(jù)當(dāng)前瀏覽器（chrome 71.0.3578.98（正式版本）（64 位）），加上自己的理解，每個(gè)例子都是親測(cè)過這篇博文主要分為以下幾個(gè)部分： margin--基礎(chǔ)知識(shí)margin--在同...

bingo 2019-08-30 15:55 評(píng)論0 收藏0