css控制邊界與邊框示例(內(nèi)邊距、外邊距使用方法)
我要評(píng)論一、CSS控制邊界
1、內(nèi)邊距
padding（內(nèi)邊距也叫內(nèi)填充）
padding-bottom 長(zhǎng)度/百分比 元件下端邊線的空隙
padding-left 長(zhǎng)度/百分比 元件左端邊線的空隙
padding-right 長(zhǎng)度/百分比 元件右端邊線的空隙
padding-top 長(zhǎng)度/百分比 元件上端邊線的空隙
簡(jiǎn)易寫法：
padding:10px 一個(gè)值表示同時(shí)控制四個(gè)方向
padding:2px 4px 兩個(gè)值表示第一個(gè)值控制上下 第二個(gè)值控制左右
padding:2px 6px 10px 三個(gè)值表示第一個(gè)值控制上 第二個(gè)值控制右和左 第三個(gè)值控制下 左邊找右邊
padding:1px 2px 3px 4px 四個(gè)值表示每個(gè)值單獨(dú)控制上右下左
2、外邊距
margin（外邊界） 屬性介紹
margin-bottom auto 自動(dòng)調(diào)整空隙 長(zhǎng)度/百分比 設(shè)置下端空隙
margin-left auto 自動(dòng)調(diào)整空隙 長(zhǎng)度/百分比 設(shè)置左端空隙
margin-right auto 自動(dòng)調(diào)整空隙 長(zhǎng)度/百分比 設(shè)置右端空隙
margin-top auto 自動(dòng)調(diào)整空隙 長(zhǎng)度/百分比 設(shè)置上端空隙
簡(jiǎn)化方案：
margin:2px 4px
margin:2px 6px 10px
margin:1px 2px 3px 4px
<style type="text/css">
div{
width:200px;
height:200px;
background-color:#0F0;
margin:100px;
padding:10px;
}
body{
margin:0px;
}
</style>
</head>
<body>
<div>
6、你不能當(dāng)飯吃，但沒有你，我吃不下飯。
7、要有多大的身軀，才能撐起您那齷齪的靈魂啊！
8、做男人的最高境界不是你去泡妞，而是讓妞來泡你。
9、有心才會(huì)累，無心者無所謂。
</div>
</body>
二、CSS控制邊框
1、設(shè)置邊線的樣式：border-style
none 不顯示邊線
dotted 點(diǎn)線
dashed 虛線
solid 實(shí)線
double 雙線
2、設(shè)置邊線的長(zhǎng)度(即邊框的粗細(xì))：border-width
像素
百分比
3、設(shè)置邊線的顏色：border-color
簡(jiǎn)化格式：長(zhǎng)度 樣式 顏色
設(shè)置邊線的顏色和長(zhǎng)度之前必須先設(shè)置邊線的樣式 因?yàn)檫吘€樣式默認(rèn)是none不顯示邊線的
<style type="text/css">
img{
border-style:solid dotted double;
border-color:#0F0 #C00 #FF0 #00F;
border-width:10px;
}
</style>
</head>
<body>
<img src="../../../素材庫(kù)/biaoqing4.png"/>
</body>
相關(guān)文章
這篇文章主要介紹了解決margin 外邊距合并問題 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-03- 這篇文章主要介紹了詳解CSS外邊距折疊引發(fā)的問題的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-27
外邊距折疊指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距，本文詳細(xì)的介紹了一下css外邊距折疊的實(shí)現(xiàn)，分為3種情況，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-30- 本篇文章主要介紹了詳解css邊距重疊的幾種解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-06
- 這篇文章主要介紹了簡(jiǎn)單的CSS疊加外邊距示例,是文檔樣式編寫中一個(gè)需要注意的地方,需要的朋友可以參考下2015-07-21
- 今天就先說說CSS的外邊距吧。 圍繞在元素邊框的空白區(qū)域是外邊距。這是W3CSchool給我們的解釋。這句話看起來很模糊，說的不是那么明確2012-05-27
- 空白雙邊距是一個(gè)極容易誤解的CSS特性.它不是CSS的bug,但如果我們一旦誤解,將會(huì)給你帶來很多麻煩.2010-07-04
- 網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：今天談?wù)凜SS外邊距疊加的問題，邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。 在進(jìn)行CSS網(wǎng)頁(yè)布局時(shí)會(huì)遇到2009-04-02
這篇文章主要介紹了CSS 外邊距(margin)重疊及防止方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-14
