html中padding和margin的區別和用法與存在的bug消除

?

關于margin:
在需要border外側添加距離時。
空白處不需要背景時。
相連的兩個部分的地方需要加外邊的邊距時使用。

關于padding:
在需要border內側添加距離時。
空白處需要背景時。
相連的兩個部分的地方需要加內部的邊距時使用。


?

?

IE6中雙邊距Bug:

  發生場合:當給父元素內第一個浮動元素設置margin-left(元素float:left)或margin-right(元素float:right)時margin加倍。

  解決方法:是給浮動元素加上display:inline;CSS屬性;或者用padding-left代替margin-left。

IE6中浮動元素3px間隔Bug:


?

  發生場合:發生在一個元素浮動,然后一個不浮動的元素自然上浮與之靠近會出現的3px的bug。

  解決方法:右邊元素也一起浮動;或者為右邊元素添加IE6 Hack _margin-left:-3px;從而消除3px間距。

IE6/7負margin隱藏Bug:


?

  發生場合:當給一個有hasLayout的父元素內的非hasLayout元素設置負marin時,超出父元素部分不可見。

  解決方法:去掉父元素的hasLayout;或者賦hasLayout給子元素,并添加position:relative;

IE6/7下ul/ol標記消失bug:


?

  發生場合:當ul/ol觸發了haslayout并且是在ul/ol上寫margin-left,前面默認的ul/ol標記會消失。

  解決方法:給li設置margin-left,而不是給ul/ol設置margin-left。

IE6/7下margin與absolute元素重疊bug:


?

  發生場合:雙欄自適應布局中,左側元素absolute絕對定位,右側的margin撐開距離定位。在IE6/7下左側應用了absolute屬性的塊級元素與右邊的自適應的文字內容重疊。

  解決方法:把左側塊級元素更改為內聯元素,比如把div更換為span。

IE6/7/8下auto margin居中bug:


?

  發生場合:給block元素設置margin auto無法居中

  解決方法:出現這種bug的原因通常是沒有Doctype,然后觸發了ie的quirks mode,加上Doctype聲明就可以了。在《打敗IE的葵花寶典》里給出的方法是給block元素添加一個width能夠解決,但根據本人親測,加 with此種方法是無效的,如果沒有Doctype即使給元素添加width也無法讓block元素居中。

IE8下input[button | submit] 設置margin:auto無法居中bug:


?

  發生場合:ie8下,如果給像button這樣的標簽(如button input[type="button"] input[type="submit"])設置{ display: block; margin:0 auto; }如果不設置寬度的話無法居中。

  解決方法:可以給為input加上寬度

IE8百分比padding垂直margin bug:


?

  發生場合:當父元素設置了百分比的padding,子元素有垂直的margin的時候,就好像父元素被設置了margin一樣。

  解決方法:給父元素加一個overflow:hidden/auto。

?

?

轉載于:https://www.cnblogs.com/LastFire/p/8185562.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370006.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370006.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370006.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

python發微信提醒天氣冷了注意保暖_2019天氣變冷的朋友圈說說 注意保暖的微信問候語...

1.天冷了,注意添加衣物,別著涼。可你還是著涼了。看你難受的樣子,我的心,唉,只有一句話能表達:小樣,你也有今天!為了不讓我得逞,你要注意身體哦。2.天氣變涼要注意&#…

Fiddler抓包使用教程-QuickExec

轉載請標明出處:http://blog.csdn.net/zhaoyanjun6/article/details/73468287 本文出自【趙彥軍的博客】 在 Fiddler 中自帶了一個 QuickExec 命令行,用戶可以直接輸入并快速執行腳本命令。 常見命令 help 打開官方的使用頁面介紹,所有的命令…

自己整理的css3動畫庫,附下載鏈接

動畫調用語法 animation: bounceIn 0.3s ease 0.2s 1 both; 按順序解釋參數: 動畫名稱 如:bounceIn 一周期所用時間 如:0.3s 速度曲線 如:ease 值 描述 linear 動畫從頭到尾的速度是相同的。 ease 默認。動畫以低速開始&#xff0…

帶有Spring的REST的ETag

1.概述 本文將重點介紹ETags-Spring支持,RESTful API的集成測試以及帶有curl的使用場景。 這是關于使用Spring 3.1和Spring Security 3.1和基于Java的配置來建立安全的RESTful Web服務的系列文章的第9篇。 REST with Spring系列: 第1部分 – 使用Spring…

html5與css3都要學嗎,前端要學css3嗎?

前端要學css3;HTML5、CSS3是前端工程師必須要學會。現在移動端的興起,導致web前端開發的技術逐變向css3和html5轉變,所以css3一定要學。CSS3是CSS(層疊樣式表)技術的升級版本,于1999年開始制訂,2001年5月23日W3C完成了…

PHP中cookie和session的區別

1、cookie數據存放在客戶的瀏覽器上,session數據放在服務器上。 2、cookie不是很安全,別人可以分析存放在本地的COOKIE并進行COOKIE欺騙考慮到安全應當使用session。 3、session會在一定時間內保存在服務器上。當訪問增多,會比較占用你服務器…

ubuntu下anaconda3+pygame

有是很無語的地方,網上教程一堆,又是要下載什么包,然后又是什么依賴亂七八糟的整一堆。都不知道怎么想的 試了 sudo apt-get install python-pygame 這個是行不通的!!!根本沒有任何卵用 害我捯飭了半天&am…

react 判斷圖片是否加載完成_React中型項目的優化實踐

項目介紹整個項目大概有60個頁面,用到的組件大概150,package里面的依賴大概有70個,應該勉強算得上是一個中型的React的項目了。下面給大家看看我們現在build一次項目的結果--打包時間約150s,打包完之后的資源gzip之后約1.2m&#…

搭建本地wordpress

1.首先,下載xampp,安裝按默認勾選即可。 2.安裝完成后,啟動Apache和MySQL這兩個服務。 啟動后變成綠色,表示啟動成功。 3.點擊MySQL項的Admin進入數據庫后臺。 4.點擊用戶賬戶新建用戶。 5.填寫用戶名,host name選本地…

編寫Java批注

Java 批注的允許的屬性類型刻意非常嚴格,但是允許的類型也可以使用一些簡潔的復合批注類型。 考慮教程站點中的示例注釋: package annotation; interface ClassPreamble {String author();String[] reviewers(); }在這里,作者和審閱者具有St…

Python基礎【day02】:字符串(四)

在Python中字符串本身有帶很多操作,字符串的特性,不可以被修改 0、字符串常用功能匯總 1、字符串的定義 #定義空字符串>>> name#定義非空字符串 >>> name"luoahong"#通過下標訪問 >>> name[1] u#不能修改字符串的值…

cryptojs vue 使用_VueJs里利用CryptoJs實現加密及解密

第一步 安裝安裝crypto-js第二步 創建在js文件目錄下創建一個js文件secret/*** 對頁面上輸入的密碼進行加密傳輸給后臺進行驗證,對返回的數據進行解密,在頁面展示*/let CryptoJS require(crypto-js); // 引入AES源碼jsexport default {/** 對密碼進行加…

html5 窗口變形,HTML5畫布(變形)

坐標變換案例1&#xff1a;function draw(){var cdocument.getElementById("myCanvas");var cxt c.getContext("2d");cxt.translate(200,50);cxt.fillStylergba(255,0,0,0.25);for(var i0;i<40;i){cxt.translate(25,25);cxt.scale(0.9,0.9);cxt.rotate(…

appium GUI介紹

Appium作為APP端的自動化測試工具&#xff0c;具有很多的有點&#xff0c;今天主要介紹一下它的UI界面&#xff0c;包含其中的一些參數等。主要說的是windows下的APPIUM GUI。 先看一眼它的界面(版本為1.4.16.1) 注: 1.android Settings - Android設置按鈕&#xff0c;所有和安…

迭代器模式和Java

大家好&#xff0c;在本文中&#xff0c;我們將檢查Iterator Pattern 。 我知道你們中許多人已經使用過一種設計模式&#xff0c;但是也許您沒有意識到它是模式&#xff0c;或者不知道它的巨大價值。 根據《 Head First Design 》一書&#xff1a; 迭代器模式提供了一種在不暴…

不使用JavaScript實現菜單的打開和關閉

我在寫有菜單欄的網頁時&#xff0c;基本都會用響應式設計來適配移動端&#xff0c;例如把不重要的菜單選項隱藏&#xff0c;或者創建一個菜單按鈕來控制的菜單的打開和關閉之類的。而我之前一直是使用JavaScript來實現菜單的打開和關閉的&#xff0c;但最近在網上看到有人使用…

負載均衡的幾種方式

&#xff08;1&#xff09;HTTP重定向負載均衡。 這種負載均衡方案的優點是比較簡單&#xff0c;缺點是瀏覽器需要每次請求兩次服務器才能拿完成一次訪問&#xff0c;性能較差。&#xff08;2&#xff09;DNS域名解析負載均衡。 DNS域名解析負載均衡的優點是將負載均衡工作交給…

芝枝.計算機與人文科學,計算機與人文科學

計算機與人文科學(2013-03-13 13:24:17)標簽&#xff1a;文化戰爭名著《靜靜的頓河》可以說從它誕生起便沒有平靜過&#xff0c;圍繞它的作者所引起的爭議&#xff0c;就像它獲得諾貝爾文學獎一樣&#xff0c;撼動文壇&#xff0c;有人指控肖洛霍夫是個騙子&#xff0c;《靜靜的…

rto初始化和計算_TCP系列13—重傳—3、協議中RTO計算和RTO定時器維護

從上一篇示例中我們可以看到在TCP中有一個重要的過程就是決定何時進行超時重傳&#xff0c;也就是RTO的計算更新。由于網絡狀況可能會受到路由變化、網絡負載等因素的影響&#xff0c;因此RTO也必須跟隨網絡狀況動態更新。如果TCP過早重傳&#xff0c;則可能會向網絡中注入很多…

在Java 8 Lambda上使用Apache Commons Functor功能接口

Apache Commons Functor &#xff08;以下稱為[functor]&#xff09;是一個Apache Commons組件&#xff0c;它提供功能性的編程API和已實現的幾種模式&#xff08;訪問者&#xff0c;生成器&#xff0c;聚合器等&#xff09;。 Java 8具有幾個不錯的新功能&#xff0c;包括lamb…