2. 程式人生 > >內容(content)、填充(padding)、邊框(border)、邊界(margin)：CSS中盒子模型有何區別？

內容(content)、填充(padding)、邊框(border)、邊界(margin)：CSS中盒子模型有何區別？

阿新 • • 發佈：2019-01-12
    什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名：
內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具備這些屬性。
 一個盒子模型由 content(內容)、border(邊框)、padding(間隙)和margin(間隔) 這四個部分組成：

一、border  border一般用於分離元素，border的外圍一般是指元素的最外圍  border的屬性只要有三個color(顏色) width(粗細) style(樣式)  color的設定和文字的設定一樣，有256種顏色，通常用16進製表示，比如：#cc55aa  width即為border的粗細，可以設定為thin、medium、thick和<length>，其中<length>表示具體的數值，如5px等，  width預設為medium，一般瀏覽器解析為 2px的寬度。  style屬性可以設定為none、hidden、dotted、dashed、solid、double、groove、ridge、insert、outset  其中hidden 和 none都不顯示 border 效果一樣，在實際運用中用 hidden 來解決邊框衝突問題。  例：<styletype="text/css">  div{  border-width:6px;  border-color:#000000;  background-color:#FFFFCC;  }</style>  <body>  <divstyle="border-style:dashed">The border-style ofdashed.</div>  <divstyle="border-style:dotted">The border-style ofdotted.</div>  <divstyle="border-style:double">The border-style ofdouble.</div>  <divstyle="border-style:groove">The border-style ofgroove.</div>  <divstyle="border-style:inset">The border-style ofinset.</div>  <divstyle="border-style:outset">The border-style ofoutset.</div>  <divstyle="border-style:ridge">The border-style ofridge.</div>  <divstyle="border-style:solid">The border-style ofsolid.</div>  </body> 二、padding
 padding 用於控制content 與 border之間的距離  例：<styletype="text/css">  .outside  { padding:10px30px 50px 100px;  border:1px solid#000000;  background-color:#fffcd3;  }  .inside  {background-color:#66b2ff;  border:1px solid#005dbc;  width:100%;line-height:40px;  text-align:center;  font-family:Arial;  }  </style>  <body>  <divclass="outside">  <divclass="inside">padding</div>  </div>  </body> 三、margin
 margin是指元素與元素之間的距離，從直觀上來看就是指用於控制塊與塊之間的距離。  a.當倆個行內元素緊鄰的時候，他們之間的距離為第一個元素的 margin-right 加上第二個元素margin-left的值  b.若不是行內元素，而產生換行效果的塊級元素，則兩個塊級之間的距離不是 margin-bottom 和 margin-top  的和，而是倆者中取較大的值作為兩個塊級之間的距離。  c.父子關係，即當一個div塊包含在另一塊div中間時，其中子塊的 margin 將以父塊的 content 為參考。  注：在上述 C 的情況下當父 div的高度設定的值小於子 div塊的高度加上 margin的值時，此時 IE 瀏覽器會自動擴大，  保持子元素的margin-bottom的空間以及父元素自身的 padding-bottom ，但是 Firefox就不會，它會保證父元素的  height高度的完全吻合，這時子元素將超過父元素的範圍。  另外:margin也可以設定成負數，當設定成負數時，會使得設定成負數的塊向相反的方向移動，甚至覆蓋在其他的塊上。

相關推薦

內容(content)、填充(padding)、邊框(border)、邊界(margin)：CSS中盒子模型有何區別？

    什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名： 內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具備這些屬性。  一個盒子模型由 content(內容)、border(邊

css盒子模型、邊框border、外邊距margin、填充padding、輪廓outline

盒子模型 一個盒子包括外邊距、邊框、內邊距和實際內容 Margin(外邊距)：清除邊框外的區域，外邊距是透明的。 Border(邊框)：圍繞在內邊距和外邊距的邊框。 Padding(內邊距)：清除內容周圍的區域，內邊距是透明的。 Content(內容)：盒子的內容，顯示文字和影象。  

Java集合：List、Set和Map的區別，ArrayList和LinkedList有何區別..........

一、陣列和集合的區別： 　　陣列是大小固定的，並且同一個陣列只能存放型別一樣的資料（基本型別/引用型別）； 　　集合可以儲存和操作數目不固定的一組資料。 所有的JAVA集合都位於 java.util包中！ JAVA集合只能存放引用型別的的資料，不能存放基本資料型別。 　　陣列和集合相比唯一的有點就是速度

emptyDir、hostPath以及local volume都是Kubernetes的本地儲存卷，那麼有何不同？

Kubernetes支援幾十種類型的後端儲存卷，其中有幾種儲存卷總是給人一種分不清楚它們之間有什麼區別的感覺，尤其是local與hostPath這兩種儲存卷型別，看上去都像是node本地儲存方案嘛。當然，還另有一種volume型別是emptyDir，也有相近之處。 在Docker容器時代

Vector、ArrayList、LinkedList有何區別？

       這三者都是實現集合框架中的 List，也就是所謂的有序集合，因此具體功能也比較近似，比如都 提供按照位置進行定位、新增或者刪除的操作，都提供迭代器以遍歷其內容等。但因為具體的設 計區別，在行為、效能、執行緒安全等方面，表現又有很大不同。         Vec

emptyDir、hostPath以及local volume都是Kubernetes的本地儲存卷，那麼有何不同？_Kubernetes中文社群

文章由，  百悟科技  高階運維工程師，高慶 投稿 Kubernetes支援幾十種類型的後端儲存卷，其中有幾種儲存卷總是給人一種分不清楚它們之間有什麼區別的感覺，尤其是local與hostPath這兩種儲存卷型別，看上去都像是node本地儲存方案嘛。當然，還另有一種volume型別是empty

對比Vector、ArrayList、LinkedList有何區別？

Vector 1.執行緒安全的動態陣列 2.如果不需要執行緒安全，並不建議選擇，畢竟同步是有額外開銷的。Vector 內部是使用物件陣列來儲存資料，可以根據需要自動的增加容量，當陣列已滿時，會建立新的陣列，並拷貝原有陣列資料。 3.擴容大小預設為0,可指定每次擴容大小(capacit

6.對比Vector、ArrayList、LinkedList有何區別以及常見的集合問題

第6講：對比Vector、ArrayList、LinkedList有何區別 典型回答： 相同點： 三者都是實現集合框架中的List，也就是所謂的有序集合，存取有序，有索引，可以重複，具體功能

解決在網頁前段開發中盒子模型的寬度包含padding和border的問題

      在網頁前段開發中，由於各大瀏覽器廠商核心技術不一樣，出現了瀏覽器相容性的問題，經常會出現在盒子模型中包含padding和border的問題，遇到這樣的問題我們該如何解決呢？       首先，我們先看一下標準的盒子模型：    盒子模型由四部分組成：content

阿里雲伺服器ECS與傳統伺服器、虛擬主機、VPS主機有何區別？

阿里雲伺服器ECS到底是什麼呢？與傳統的伺服器虛擬主機、VPS主機有什麼區別呢？本文將詳細介紹阿里雲伺服器ECS與傳統伺服器之間的區別。 對比表 重要區別 一、彈性擴充套件 傳統IT資訊化模式下，對伺服器等裝置的選擇，基本是參照使用期限內最大需求的原則來選擇的

CSS將邊框border設定到寬度和高度中

今天偶遇一個css方面的問題，因為以前也為該問題苦惱過，今天得到了解決方案，而且答案很簡單，就是給css加上一個屬性就搞定了，由於該屬性平時很少用，為了方便以後檢視，特此記錄。 要實現的效果圖 我們想實現如下效果： 一般做法 那麼我們如何

struts2校驗、ajax校驗、javascript驗證有何區別及聯絡？

Struts2的validate資料校驗有兩種方式：1.    Action中的validate()方法Struts2提供了一個Validateable介面，這個介面中只存在validate()方法，實現這個介面的類可直接被Struts2呼叫，ActionSupport類就實現了Vadidateable介面，

CSS之——盒子模型、盒子的定位與浮動

一、CSS盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。 CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。 盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

讓面試官心服口服：Thread.sleep、synchronized、LockSupport.park的執行緒阻塞有何區別？

### **前言** 在日常編碼的過程中，我們經常會使用Thread.sleep、LockSupport.park()主動阻塞執行緒，或者使用synchronized和Object.wait來阻塞執行緒保證併發安全。此時我們會發現，對於Thread.sleep和Object.wait方法是會丟擲Interr

京東數科二面：常見的 IO 模型有哪些？Java 中的 BIO、NIO、AIO 有啥區別？

IO 模型這塊確實挺難理解的，需要太多計算機底層知識。寫這篇文章用了挺久，就非常希望能把我所知道的講出來吧!希望朋友們能有收貨！為了寫這篇文章，還翻看了一下《UNIX 網路程式設計》這本書，太難了，我滴乖乖！心痛~ _個人能力有限。如果文章有任何需要補充/完善/修改的地方，歡迎在評論區指出，共同進步！_

京東數科面試真題：常見的 IO 模型有哪些？Java 中的 BIO、NIO、AIO 有啥區別？

> 本文節選自[《Java面試進階指北 打造個人的技術競爭力》](https://www.yuque.com/docs/share/f37fc804-bfe6-4b0d-b373-9c462188fec7) 面試中經常喜歡問的一個問題，因為通過這個問題，面試官可以順便了解一下你的作業系統的水平。 IO

SAXParseException：前言中不允許有內容

ins see exceptio 可能 配置文件 clean ada 工作 orm 今天打開eclipse時，顯示：發生了錯誤。請參閱日誌文件D:\eclipse\Workspace\.metadata\.log。然後打開日誌：problems readiing inf

Jmeter+Ant執行build.xml常見錯誤：前言中不允許有內容

build.html<?xml version="1.0" encoding="UTF-8"?><project name="ant-jmeter-test" default="run" basedir='.'>       <tstamp>

如何理解盒模型及其 content、padding、border、margin？

這裡是修真院前端小課堂，每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能，本篇分享的是： 【 如何理解盒模型及其 content、padding、border、margin？】 【修

如何理解盒模型及其content、padding、border、margin？

當對一個文件進行佈局(laying out)的時候，瀏覽器渲染引擎會根據CSS-Box模型（CSS Basic Box model）將所有元素表示為一個矩形盒子（box)。CSS決定這些盒子的大小，位置以及屬性（顏色，背景，邊框尺寸…). 一.CS