盒子模型簡(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ù)。

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

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