盒子模型簡(jiǎn)單布局

  • 外邊距
    外邊距是元素邊框與周?chē)叵嗑嗟目臻g。
    使用margin屬性可以設(shè)置外邊距。
    使用margin-top/right/left/bottom為元素設(shè)置四個(gè)方向。
    使用margin：0 auto 可以使元素居中。

    .box1{
  width: 200px;
  height: 200px;
  background-color: #bfa;
  border: 10px solid red;
  margin:10px 20px 30px 40px;
 }
.box2{
  width: 200px;
  height: 200px;
  background-color: yellow;
 }

  • display
    通過(guò)display來(lái)修改元素的性質(zhì)。
    --block:設(shè)置元素為塊元素
    --inline：設(shè)置元素為行內(nèi)元素
    --inline-block:設(shè)置元素為行內(nèi)塊元素
    --none: 隱藏元素
    visibility
    visibility屬性主要用于元素是否可見(jiàn)
    -visible:可見(jiàn)的
    -hidden: 隱藏的
    overflow
    當(dāng)相關(guān)標(biāo)簽里面的內(nèi)容超出了樣式的寬度和高度使，就會(huì)發(fā)生一些奇怪的事情，瀏覽器會(huì)讓內(nèi)容溢出盒子。
    可以通過(guò)overflow來(lái)控制內(nèi)容溢出的情況。
    可選值：
    *--visible:默認(rèn)值
    --scroll:添加滾動(dòng)條
    --auto:根據(jù)需要添加滾動(dòng)條
    --hidden:隱藏超出盒子的內(nèi)容
    文檔流
    文檔流指的是文檔中可實(shí)現(xiàn)的對(duì)象在排列時(shí)所占用的位置，
    將窗體自上而下分為一行行，并在每行中按從左至右的順序排放元素，即為文檔流。
    也就是說(shuō)在文檔流中元素默認(rèn)會(huì)緊貼到上一個(gè)元素的右邊，如果右邊不足以放下元素，元素則會(huì)另起一行，在新的一行中繼續(xù)從左至右擺放。
    這樣一來(lái)每一個(gè)塊元素都會(huì)另起一行，那么我們?nèi)绻朐谖臋n流中進(jìn)行布局就會(huì)變得比較麻煩。
    浮動(dòng)
    所謂浮動(dòng)指的就是使元素脫離原來(lái)的文本流，在父元素中浮動(dòng)起來(lái)。

    --none: 不浮動(dòng)
    --left:向左浮動(dòng)
    --right: 向右浮動(dòng)
    clear: 清除浮動(dòng)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動(dòng)</title>
    <style type="text/css">
    .box1{
        width: 600px;
        height: 200px;
        background-color: red;
        float: left;
    }
    .box2{
      width: 200px;
      height: 200px;
      background-color: yellow;
      float: left;
    }
    .box3{
      width: 200px;
      height: 200px;
      background-color: green;
      float: left;
    }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

  • 內(nèi)聯(lián)素浮動(dòng)

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內(nèi)聯(lián)素的浮動(dòng)</title>
<style type="text/css">
.box1{
  background-color: #bfa;
}
.s1{
  float: left;
  width: 100px;
  height: 100px;
  background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">a</div>
<span class="s1">hello</span>
</body>
</html>

  • 簡(jiǎn)單布局

      <!DOCTYPE html>
  <html lang="en">
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)單布局</title>
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.header{
  width: 1000px;
  height: 150px;
  background-color: yellowgreen;
  margin: 0 auto;
}
.content{
  width: 1000px;
  height: 400px;
  background-color: orange;
  margin: 10px auto;
}
.left{
  width: 200px;
  height: 100%;
  background-color: skyblue;
  float: left;
}
.center{
  width: 580px;
  height: 100%;
  background-color: yellow;
  float: left;
  margin: 0 10px;
}
.right{
  width: 200px;
  height: 100%;
  background-color: pink;
  float: left;
}
.footer{
  width: 1000px;
  height: 150px;
  background-color: silver;
  margin: 0 auto;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
 </div>
 <div class="footer"></div>
</body>
</html>

  • 相對(duì)定位

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相對(duì)定位</title>
<style type="text/css">
.box1{
  height: 200px;
  background-color: red;
  position: relative;
  }
.box2{
  width: 200px;
  height: 200px;
  background-color: yellow;
  position: relative;
  left: 100px;
  top: 200px;
 }
  .box3{
   width: 200px;
  height: 200px;
  background-color: yellowgreen;
}
.s1{
  position: relative;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
 </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="s1">我是一個(gè)span</span>
</body>
</html>

  • 絕對(duì)定位

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對(duì)定位</title>
<style type="text/css">
  .box1{
  width: 200px;
  height: 200px;
  background-color: red;
  }
  .box2{
  width: 200px;
  height: 200px;
  background-color: yellow;
  position: absolute;
  }
  .box3{
  width: 300px;
  height: 300px;
  background-color: yellowgreen;
  }
  .box4{
  width: 300px;
  height: 300px;
  background-color: orange;
  }
  .s1{
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: absolute;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box5">
<div class="box4">
<div class="box2"></div>
</div>
</div>
<div class="box3"></div>

<span class="s1">我是一個(gè)span</span>
</body>
</html>

  • 固定定位

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
.box1{
  width: 200px;
  height: 200px;
  background-color: red;
}
.box2{
  width: 200px;
  height: 200px;
  background-color: yellow;
  position: fixed;
  left: 0px;
  top: 0px;
}
.box3{
  width: 200px;
  height: 200px;
  background-color: yellowgreen;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>

<div class="box4" style="width: 300px; height: 300px; background-      color: orange; position: relative;">
<div class="box2"></div>
    </div>

<div class="box3"></div>
</body>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 230,563評(píng)論 6贊 544
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,694評(píng)論 3贊 429
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人，你說(shuō)我怎么就攤上這事。” “怎么了？”我有些...
    開(kāi)封第一講書(shū)人閱讀 178,672評(píng)論 0贊 383
  • 道士緝兇錄：失蹤的賣(mài)姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我，道長(zhǎng)，這世上最難降的妖魔是什么？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 63,965評(píng)論 1贊 318
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 72,690評(píng)論 6贊 413
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
    開(kāi)封第一講書(shū)人閱讀 56,019評(píng)論 1贊 329
  • 城市分裂傳說(shuō)
    那天，我揣著相機(jī)與錄音，去河邊找鬼。 笑死，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 44,013評(píng)論 3贊 449
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起，我...
    開(kāi)封第一講書(shū)人閱讀 43,188評(píng)論 0贊 290
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 49,718評(píng)論 1贊 336
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,438評(píng)論 3贊 360
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,667評(píng)論 1贊 374
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 39,149評(píng)論 5贊 365
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,845評(píng)論 3贊 351
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 35,252評(píng)論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 36,590評(píng)論 1贊 295
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,384評(píng)論 3贊 400
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,635評(píng)論 2贊 380

推薦閱讀更多精彩內(nèi)容

  • 一個(gè)盒子我們會(huì)分成幾個(gè)部分：內(nèi)邊區(qū)(content)內(nèi)邊距(padding)邊框(border)外邊距(margi...
    Khada閱讀 252評(píng)論 0贊 0
  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱(chēng)： 工作地點(diǎn) 崗位名...
    lilyping閱讀 1,886評(píng)論 0贊 1
  • 本文是針對(duì)剛學(xué)編程的小白,都是一些基礎(chǔ)知識(shí),如果想了解更多深層一點(diǎn)的東西,歡迎移步本人博客!! 博客地址 點(diǎn)擊跳轉(zhuǎn)...
    西巴擼閱讀 548評(píng)論 0贊 0
  • 一、在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例 在CSS當(dāng)中，相...
    dengpan閱讀 596評(píng)論 0贊 0
  • 7c2764878307閱讀 223評(píng)論 0贊 0