解決盒子浮動時margin會顯示兩倍的美觀問題

li21 發布于2019-04-23 13:40 / 2012人閱讀

摘要：當給幾個大小一樣有的盒子浮動時，會出現自動加起來的結果。此時可以給每個盒子一個的長來實現很好的效果，這樣右邊的盒子會把左邊盒子的右邊壓住，如圖所示。給盒子相對定位以使用使用屬性，這樣選擇盒子時就會給盒子一個在上面的疊放次序

　　當給幾個大小一樣有boder的盒子浮動時，會出現margin自動加起來的結果。

　　此時可以給每個盒子一個margin-left:-border的長來實現很好的效果，這樣右邊的盒子會把左邊盒子的右邊border壓住，如圖所示。

　　還可以使用偽元素實現動態效果，代碼如下。

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;/*給盒子相對定位以使用z-index*/
        }
        div:hover{
            border:1px solid #f40;
            z-index: 1;/*使用z-index屬性，這樣選擇盒子時就會給盒子一個在上面的疊放次序*/

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

GPU云服務器云服務器浮動顯示 html5浮動問題支付時常見問題云服務器銷售會遇到哪些問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2196.html

50道CSS基礎面試題（附答案）

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

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

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

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

摘要：首先，巧妙的使用這一標記，將瀏覽器從所有情況中分離出來。類似于優先級機制優先級最高，有他們在時，不起作用，值需要調整。若從左向右的匹配，發現不符合規則，需要進行回溯，會損失很多性能。偶數字號相對更容易和設計的其他部分構成比例關系。 1 介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？標準盒子模型：寬度=內容的寬度（content）+ border + paddin...

wushuiyong 2019-08-30 11:24 評論0 收藏0
CSS 面試題總結

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

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

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

bingo 2019-08-30 15:55 評論0 收藏0