CSS學習筆記--Div+Css佈局（div+span以及盒模型）

時間  2019-11-10
標籤 css 學習 筆記 div+css div 佈局 div+span span 以及 模型 欄目 CSS 简体版
原文   原文鏈接

1.DIV與SPAN


1.1簡介
1.DIV和SPAN在整個HTML標記中，沒有任何意義，他們的存在就是爲了應用CSS樣式

2.DIV和span的區別在與，span是內聯元素，div是塊級元素

內聯元素又名行內元素(inline element)，和其對應的是塊元素(block element)，都是html規範中的概念。內聯元素的顯示，爲了幫助理解，能夠形象的稱爲「文本模式」，即一個挨着一個，都在同一行按從左至右的順序顯示，不單獨佔一行。而當加入了css控制之後，塊元素和內聯元素的這種屬性差別就不成爲差別了。好比，咱們徹底能夠把內聯元素加上display:block這樣的屬性，讓它也有每次都重新行開始的屬性，即成爲塊元素一樣咱們能夠把塊元素加上display:inline這樣的屬性，讓它也在一行上排列。

Block元素特色：
①老是在新行上開始；
②高度，行高以及外邊距和內邊距均可控制；
③寬度缺省是它的容器的100%，除非設定一個寬度。
④它能夠容納內聯元素和其餘塊元素
Inline元素特色：
①和其餘元素都在一行上；
②高，行高及外 邊距和內邊距不可改變；
③寬度就是它的文字或圖片的寬度，不可改變
④內聯元素只能容納文本或者其餘內聯元素
常見塊元素(block element)
◎ address - 地址
◎ blockquote - 塊引用
◎ center - 居中對齊塊
◎ dir - 目錄列表
◎ div - 經常使用塊級容器，也是css layout的主要標籤
◎ dl - 定義列表
◎ fieldset - form控制組
◎ form - 交互表單
◎ h1 - 大標題
◎ h2 - 副標題
◎ h3 - 3級標題
◎ h4 - 4級標題
◎ h5 - 5級標題
◎ h6 - 6級標題
◎ hr - 水平分隔線
◎ isindex - input prompt
◎ menu -  菜單列表
◎ noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容）
◎ noscript - 可選腳本內容（對於不支持script的瀏覽器顯示此內容）
◎ ol - 排序表單
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表（無序列表）
常見內聯元素(inline element)
◎ a - 錨點
◎ abbr - 縮寫
◎ acronym - 首字
◎ b - 粗體(不推薦)
◎ bdo - bidi override
◎ big - 大字體
◎ br - 換行
◎ cite - 引用
◎ code -  計算機代碼(在引用源碼的時候須要)
◎ dfn - 定義字段
◎ em - 強調
◎ font - 字體設定(不推薦)
◎ i - 斜體
◎ img - 圖片
◎ input - 輸入框
◎ kbd - 定義鍵盤文本
◎ label - 表格標籤
◎ q - 短引用
◎ s - 中劃線(不推薦)
◎ samp - 定義範例計算機代碼
◎ select - 項目選擇
◎ small - 小字體文本
◎ span - 經常使用內聯容器，定義文本內區塊
◎strike - 中劃線
◎ strong - 粗體強調
◎ sub - 下標
◎ sup - 上標
◎ textarea - 多行文本輸入框
◎ tt - 電傳文本
◎ u - 下劃線
◎ var - 定義 變量
可變元素
◎applet - java applet
◎button - 按鈕
◎del - 刪除文本
◎iframe - inline frame
◎ins - 插入的文本
◎map - 圖片區塊（map）
◎object - object對象
◎script - 客戶端腳本


1.2實戰


<span style="font-family:Times New Roman;"><span style="font-family:Microsoft YaHei;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css" >
    .div1 {
        background-color: green;
    }

    .div2 {
        background-color: gold;
    }
        .span1{
            background-color: red;
        }

    .span2{
        background-color: pink;
    }
    </style>
    <title></title>
</head>
<body>
<div class="div1">我是DIV1</div>
<div class="div2">我是DIV2</div>
<span class="span1">我是SPAN1</span>
<span class="span2">我是SPAN2</span>
</body>
</html></span></span>
以下圖能夠看到，DIV默認會佔據了整一行，而span只是佔據了文字內容部分

2.盒子模型


2.1簡介
1.margin-盒子外邊距（標籤元素與其餘元素之間的邊距）
2.padding-盒子內邊距（標籤元素與標籤內的元素之間的邊距）
3.border-盒子邊框寬度(標籤元素邊框的寬度)
4.width-盒子寬度
5.height-盒子高度



2.2實戰
咱們利用盒子模型來完成一個簡單的佈局，最終效果以下：


1.首先咱們建立3個DIV元素,填充背景顏色以便於區分，並在外面的大DIV設置固定高端和寬度分別爲600px,小div高度和寬度分別爲：300px 
<span style="font-family:Times New Roman;"><span style="font-family:Microsoft YaHei;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css" >

       .div {
           background-color:red;
           width: 600px;
           height:600px;
       }
      .div .div1{
          background-color:green;
          width: 300px;
          height:300px;
      }
       .div .div2{
           background-color:blue;
           width: 300px;
           height:300px;
       }
    </style>
    <title></title>
</head>
<body>
<div class="div">
  <div class="div1">
 </div>

    <div class="div2"></div>
 </div>
</body>
</html></span></span>
兩個DIV高度恰好等於最外層DIV的高度


2.從上圖咱們能夠看到，最外層DIV與瀏覽器邊界有間隙，以下：


咱們對body的margin屬性作調整，把它設置爲0，把DIV與瀏覽器邊緣的間隙去掉 

<span style="font-family:Times New Roman;"><span style="font-family:Microsoft YaHei;">body{
          margin: 0;
      }
       .div {
           background-color:red;
           width: 600px;
           height:600px;
       }
      .div .div1{
          background-color:green;
          width: 300px;
          height:300px;
      }
       .div .div2{
           background-color:blue;
           width: 300px;
           height:300px;
       }</span></span>

3.把div1和div2並排在同一行，須要加入float屬性，設置爲float:left 
<span style="font-family:Times New Roman;"><span style="font-family:Microsoft YaHei;"><span style="font-size:10px;">  body{
          margin: 0;
      }
       .div {
           background-color:red;
           width: 600px;
           height:600px;
       }
      .div .div1{
          background-color:green;
          width: 300px;
          height:300px;
          float:left;
      }
       .div .div2{
           background-color:blue;
           width: 300px;
           height:300px;
           float:left;
       }</span></span></span>
兩個小div已經並排在同一行

4.咱們對DIV1和DIV2分別對margin屬性設置10px 
<span style="font-family:Times New Roman;"><span style="font-family:Microsoft YaHei;"><span style="font-size:18px;">    </span><span style="font-size:10px;">  body{
          margin: 0;
      }
       .div {
           background-color:red;
           width: 600px;
           height:600px;
       }
      .div .div1{
          background-color:green;
          width: 300px;
          height:300px;
          float:left;
          margin: 10px;
      }
       .div .div2{
           background-color:blue;
           width: 300px;
           height:300px;
           float:left;
           margin:10px
       }</span></span></span>
從下圖能夠看到，加入margin:10px後，兩個div排版已經錯位，緣由是加入magin屬性，總高度和寬度已經發生了變化，超出了最外層DIV的高度與寬度(600px)，實際上兩個div加上margin屬性的像素，總寬度和高度應該是:div1(300px+20px)+div2(300px+20px)=640px

5.由於最外層DIV總高度和寬度只是600px，而咱們加入了margin:10px，實際上兩個DIV至關於在高度和寬度分別新增了20px，若是但願兩個DIV元素能並排，須要對DIV的寬度和高度減去margin新增的部分，使總和等於600px，對div1和div2的高度與寬度分別減去20px 
<span style="font-family:Times New Roman;"><span style="font-family:Microsoft YaHei;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css" >
      body{
          margin: 0;
      }
       .div {
           background-color:red;
           width: 600px;
           height:600px;
       }
      .div .div1{
          background-color:green;
          width: 280px;
          height:280px;
          float:left;
          margin: 10px;
      }
       .div .div2{
           background-color:blue;
           width: 280px;
           height:280px;
           float:left;
           margin:10px
       }
    </style>
    <title></title>
</head>
<body>
<div class="div">
  <div class="div1">
 </div>

    <div class="div2"></div>
 </div>
</body>
</html></span></span>
這樣就完成了咱們想要的效果了

5.最後咱們對比下在最外層DIV加入padding元素先後會有什麼效果

加入padding以前:


加入padding元素後，咱們能夠發現最外層DIV高度與寬度發生變化了,分別變爲了620px


3.總結


對於margin屬性，它不會改變標籤元素的寬度與高度，只會影響元素與元素之間的邊距；對於border與padding屬性，若是增長了border或padding的大小，那麼元素的高度與寬度也會相應增長，也就是border與padding屬性會影響標籤元素的實際高度與寬度
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程