盒子模型之margin相關技巧!

来源:http://www.cnblogs.com/qijunjun/archive/2017/07/02/7105816.html
-Advertisement-
Play Games

廢話不多說,直接進入主題,margin相關技巧。 1、設置元素水平居中:margin:x auto; 2、margin負值讓元素位移及邊框合併。 外邊距合併 指當兩個垂直外邊距相遇時,它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。 解決外邊距合併的方法: a、使 ...


廢話不多說,直接進入主題,margin相關技巧。

1、設置元素水平居中:margin:x auto;

2、margin負值讓元素位移及邊框合併。

外邊距合併

  指當兩個垂直外邊距相遇時,它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

解決外邊距合併的方法:

  a、使用這種特性。

  b、設置一邊的外邊距,一般設置margin-top

  c、將元素浮動或者定位(元素浮動或定位時,不會出現margin合併)

margin-top塌陷

  在兩個盒子嵌套時候,內部的盒子設置的margin-top會加到外邊的盒子上,導致內部的盒子margin-top設置失敗,解決方法如下:

  a、外部盒子設置一個邊框

  b、外部盒子設置overflow:hidden

  c、使用偽元素類:

  .clearfix:before{

    content:'';

    dispaly:table;

  }


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1 js首先需要的函數 2 3 window.onload = function () { 4 function $(id){ 5 return document.getElementById(id); 6 } 7 function $arr(array){ ... ...
  • cursor 1.定義和用法 cursor 屬性規定要顯示的游標的類型(形狀)。 該屬性定義了滑鼠指針放在一個元素邊界範圍內時所用的游標形狀(不過 CSS2.1 沒有定義由哪個邊界確定這個範圍)。 2.屬性 需使用的自定義游標的 URL。 註釋:請在此列表的末端始終定義一種普通的游標,以防沒有由 U ...
  • [1]使用方法 [2]基本用法 [3]原理分析 [4]擴展用法 ...
  • 多態(Polymorphism)按字面的意思就是“多種狀態”,同樣的行為(方法)在不同對象上有不同的狀態。在OOP中很多地方都要用到多態的特性,比如同樣是點擊滑鼠右鍵,點擊快捷方式、點擊桌面空白處、點擊任務欄等彈出的菜單都是不同的。 ...
  • 很多人在進入學習前端的時候(包括我自己),除了選擇學習合適的技術,還需要一個得(自)心(己)應(喜)手(歡)的開發工具,一個得心應手的開發工具除了可以令你的效率大大提高,也可以令你在寫代碼的時候,心情舒暢 O(∩_∩)O。 我的第一個前端開發工具就是Sublime Text ,說一說我對它的理解吧。 ...
  • 在字面量方式中,我們//之間包起來的所有的內容都是元字元,有的具有特殊意義,大部分都是代表本身含義的普通的元字元 為瞭解決上述想在正則裡面加上一個變數這樣的需求,我們只能使用實例創建的方式了 var reg = new RegExp("^\\d+"+name+"\\d+$","g") 字面量方式和實 ...
  • function busUpLoadImg(postUrl,id) { .......//省略部分不用修改 uploader.on('uploadSuccess', function(file) { $('#' + file.id).addClass('upload-state-done'); //... ...
  • 手機號碼: 電子郵箱: 身份證: 銀行卡: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...