碼上快樂

相關內容    簡體    繁體

CSS——盒子模型（含詳解）

本文轉載自   查看原文   2020-09-17 14:48   1470    CSS

一、什么是盒子模型

1、介紹

HTML文檔中的每個元素都被比喻成矩形盒子， 盒子模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內填充），content（內容區域），如果把一個盒子比喻成一個壁掛相片，那么
        #外邊距margin ===== 一個相框與另外一個相框之間的距離
        #邊框border ====== 邊框指的就是相框
        #內邊距padding ===== 內容/相片與邊框的距離
        #寬度width/高度height ===== 指定可以存放內容/相片的區域
    　　 提示：可以通過谷歌開發者工具查看盒子的各部分屬性

2、盒子模型舉例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*html {*/
        /*    height: 100%;*/
        /*}*/
        /*body {*/
        /*    height: 100%;*/
        /*}*/
        /*.box1 {*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    background-color: red;*/
        /*}*/
        .sp1 {
            width: 200px;
            height: 200px;
            background-color: red;
            /*display: inline-block;*/
            display: none;
            /*visibility: hidden;*/
        }
        .sp2 {
            width: 200px;
            height: 200px;
            background-color: green;
            display: inline-block;

        }

        p span {
            color: red;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<span class="sp1">你好</span>
<span class="sp2">你好</span>

<p>你好<span>ayca</span></p>
</body>
</html>
盒子模型

二、盒子模型的寬度和高度

1、介紹

#1、內容的寬度和高度
    通過標簽的width和height屬性設置

#2、元素/盒子模型的寬度和高度
    寬度= 左邊框 + 左內邊距 + width(內容的寬) + 右內邊距 + 右邊框高度
    高度= 。。。。

#3、元素/盒子模型空間的寬度和高度
    寬度= 左外邊距 + 左邊框 + 左內邊距 + width(內容的寬) + 右內邊距 + 右邊框高度 + 右外邊距
    高度= 。。。。

2、練習1：邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background: yellow;

            /*border: 1px dotted red;*/
            /*border-width: 1px 2px 3px 4px;*/
            /*border-style: solid dotted dashed double;*/
            /*border-color: red green blue black;*/
            border: 1px dotted red;
            /*border-radius: 20px;*/
            border-radius: 50%;

            text-align: center;
            line-height: 200px;

        }
    </style>
</head>
<body>
<div class="box1">1111</div>
</body>
</html>
練習1

3、練習2：內邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            width: 150px;
            height: 150px;
        }

        .box1 {
            /*height: 100px;*/
            box-sizing: border-box;

            border: 1px solid red;
            padding-top: 50px;
        }
        .box2 {
            width: 100px;
            border: 1px solid green;
            padding-left: 50px;
        }
        .box3 {
            border: 1px solid blue;
            padding-right: 50px;
        }
        .box4 {
            border: 1px solid yellow;
            padding-bottom: 50px;
        }

        .box5 {
            /*width: 50px;*/
            /*height: 50px;*/
            box-sizing: border-box;
            border: 1px solid aqua;
            padding: 50px;
        }

        .boxx {
            width: 20px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="boxx"></div>
</div>
<hr>
<div class="box2">
    22222
</div>
<hr>
<div class="box3">
    333
</div>
<hr>
<div class="box4">
    4444
</div>
<hr>
<div class="box5">
    5555
</div>
</body>
</html>
內邊框

4、練習3：外邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            width: 150px;
            height: 150px;
        }

        .box1 {
            border: 1px solid red;
            /*margin-top: 100px;*/
            /*margin-left: 100px;*/
            margin-bottom: 70px;

            padding-top: 30px;
            padding-left: 30px;
            box-sizing: border-box;
        }
        .box2 {
            border: 1px solid green;
            margin-top: 60px;
        }
        .box3 {
            border: 1px solid blue;
            display: inline-block;
            margin-right: 50px;
        }
        .box4 {
            border: 1px solid yellow;
            display: inline-block;
            margin-left: 50px;
        }

        .box5 {
            border: 1px solid grey;

        }

        .boxx {
            width: 20px;
            height: 20px;
            background-color: red;

            /*margin-top: 30px;*/
            /*margin-left: 30px;*/
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="boxx"></div>
</div>
<div class="box2">
    22222
</div>
<div class="box3">
    333
</div>
<div class="box4">
    4444
</div>
<div class="box5">
    5555
</div>
</body>
</html>
外邊距

5、練習4：為何height=100%不起作用

如何讓 height:100%起作用：你需要給這個元素的所有父元素的高度設定一個有效值。換句話說，你需要這樣做：
現在你給div的高度為100%，它有兩個父元素<body>和<html>。為了讓你的div的百分比高度能起作用，你必須設定<body>和<html>的高度。

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        這樣這個div的高度就會100%了
      </p>
    </div>
  </body>
</html>

相似的例子：可以查看qq注冊界面https://ssl.zc.qq.com/v3/index-chs.html
練習4

三、css顯示模式:塊級、行內、行內塊級

在HTML中HTML將所有標簽分為兩類，分別是容器級和文本級
在CSS中CSS也將所有標簽分為兩類，分別是容器級是塊級元素和行內元素

#1、HTML中容器級與文本級

    容器級標簽：可以嵌套其他的所有標簽
    div、h、ul>li、ol>li、dl>dt+dd

    文本級標簽：只能嵌套文字、圖片、超鏈接
    span、p、buis、strong、em、ins、del

#2、CSS中塊級與行內

    塊級：塊級元素會獨占一行，所有的容器類標簽都是塊級，文本標簽中的p標簽也是塊級
    div、h、ul、ol、dl、li、dt、dd   還有標簽p


    行內：行內元素不會獨占一行，所有除了p標簽以外的文本標簽都是行內
    span、buis、strong、em、ins、del



#3、塊級元素與行內元素的區別

    1、塊級元素block
        獨占一行
        可以設置寬高
            若沒有設置寬度，那么默認和父元素一樣寬（比如下例中的div的父元素是body，默認div的寬就是body的寬）
            若沒有設置寬高，那么就按照設置的來顯示

    2、行內元素inline
        不會獨占一行
        不可以設置寬高
            盒子寬高默認和內容一樣

    3、行內塊級元素inline-block
        不會獨占一行
        可以設置寬高

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        /*塊級元素*/
        div,p,h1 {
            background-color: red;
            width: 200px;
            height: 100px;
        }

        /*行內元素*/
        span,b,strong {
            background-color: blue;
            width: 200px;
            height: 100px;
        }


        /*行內塊級元素*/
        img {
            width: 100px;
            height: 100px;

        }

    </style>
</head>
<body>
<!--塊級-->
<div>我是div</div>
<p>我是段落 </p>
<h1>我是標題</h1>
<hr>

<!--行內-->
<span>我是span</span>
<b>我是加粗</b>
<strong>我是強調</strong>
<hr>


<!--行內塊級-->
<img src="../imags/1.png" alt="">
<img src="../imags/1.png" alt="">

</body>
</html>
舉例

四、CSS顯示模式轉換

屬性 描述 值 
display
 
可以通過標簽的display屬性設置顯示模式
 
none HTML文檔中元素存在，但是在瀏覽器中不顯示。一般用於配合JavaScript代碼使用
block 塊級
inline 行內
inline-block 行內塊級
 
display:"none"與visibility:hidden的區別：

visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。

display:none: 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

 

五、div與span

布局都是用塊級元素，而行內元素是控制內容顯示的。
1、div標簽
   一般用於配合css完成網頁的基本布局

2、span標簽
  一般用於配合css修改網頁中的一些局部信息，比如一行文字我們只為一部分加顏色<p>我是<span>egon</span></p>

3、div和span有什么區別？
    div一般用於排版，而span一般用於局部文字的樣式
    1、站在HTML的角度：div是一個塊級元素、獨占一行，而span是一個行內元素、不會單獨占一行
    2、站在CSS的角度：div是一個容器級標簽，而span是一個文本級標簽

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div與span標簽</title>

    <style>
        .header {
            margin: 0 auto;

            width: 980px;
            height: 100px;
            background: pink;

            margin-bottom: 10px;
        }

        .content {
            margin: 0 auto;

            width: 980px;
            height: 500px;
            background: #e9ca37;

            margin-bottom: 10px;

        }

        .footer {
            margin: 0 auto;

            width: 980px;
            height: 100px;
            background: #7e1487;

        }

        .logo {
            width: 200px;
            height: 50px;
            background: #bfccdb;
            float: left;
            margin: 20px;
        }

        .nav {
            width: 600px;
            height: 50px;
            background: palegreen;
            float: right;
            margin: 20px;
        }

        .aside {
            width: 250px;
            height: 460px;
            background: #cccccc;
            float: left;
            margin: 20px;
        }

        .article {
            width: 650px;
            height: 460px;
            background: green;
            float: right;
            margin: 20px;

        }

        span {
            color: red;
        }

    </style>
</head>
<body>

<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>



<div class="content">
    <div class="aside">
        <p>
            我是<span>EGON</span>，一個最接近<span>神的男人</span>
        </p>
    </div>
    <div class="article"></div>
</div>


<div class="footer"></div>


</body>
</html>
div&span舉例

 

六、盒子模型各部分詳解

1、border邊框

同時設置四條邊的邊框 
border:邊框的寬度 邊框的樣式 邊框的顏色
分別設置四條邊的邊框 
border-left:邊框的寬度 邊框的樣式 邊框的顏色

border-top:邊框的寬度 邊框的樣式 邊框的顏色

border-right:邊框的寬度 邊框的樣式 邊框的顏色

border-bottom:邊框的寬度 邊框的樣式 邊框的顏色
分別指定寬度、格式、顏色 
1、連寫：（分別設置四條邊的邊框）
bord-width: 上 右 下 左
border-style:上 右 下 左
border-color：上 右 下 左


2 、注意點：
    1、這三個屬性時按照順時針，即上、右、下、左來賦值的
    2、這三個屬性的取值省略時的規律
        省略右面，右面默認同左邊
        省略下部，下面默認跟上面一樣

        只留一個，那么其余三邊都跟這一個一樣
 
了解非連寫
 
border-left-width: ;
border-left-style: ;
border-left-color: #000;


border-top-width: ;
border-top-style: ;
border-top-color: #000;



border-right-width: ;
border-right-style: ;
border-right-color: #000;


border-bottom-width: ;
border-bottom-style: ;
border-bottom-color: #000;

其他：
http://www.w3school.com.cn/cssref/pr_border-style.asp
邊框的樣式  

none 無邊框。
dotted 點狀虛線邊框。
dashed 矩形虛線邊框。
solid 實線邊框。
border-radius 
/* 單獨設置一個角：數值越大，弧度越大*/
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;

/* 縮寫設置 */
border-radius: 20px;/* 所有角設置相同值 */
border-radius: 20px 10px 10px 20px; /* 順時針順序：上左 上右 下左 下右*/

/* 百分比設置 */
border-radius: 50%;


/* 橢圓圓弧設置 */
border-radius: 25%/50%; /* 前面一個值代表水平方向的半徑占總寬度的，后面一個值代表垂直方向 */

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2、padding內邊距：邊框與內容的距離就是內邊距

非連寫
 
padding-top：20px；
padding-right：20px；
padding-bottom：20px；
padding-left：20px；
 
連寫
 
padding：上 右 下 左;
注意 
1 給標簽設置內邊距后，標簽內容占有的寬度和高度會發生變化，
設置padding之后標簽內容的寬高是在原寬高的基礎上加上padding值。
如果不想改變實際大小，那就在用寬高減掉padding對應方向的值

2 padding是添加給父級的，改變的是父級包含的內容的位置

3 內邊距也會有背景顏色

 

 

 

 

 

 

 

 

 

 

 

 

3、外邊距：標簽與標簽之間的距離就是外邊距

非連寫
 
margin-top：20px；
margin-right：20px；
margin-bottom：20px；
margin-left：20px；
 
連寫
 
margin：上 右 下 左;
注意 
1、外邊距的那一部分是沒有背景顏色的
2、外邊距合並現象
   在默認布局的水平方向上，默認兩個盒子的外邊距會疊加
   而在垂直方向上，默認情況下兩個盒子的外邊距是不會疊加的，會出現合並現象，誰的外邊距比較大，就聽誰的

 

 

 

 

 

 

 

 

 

 

4、內邊距vs外邊距

#1、在企業開發中，一般情況下如果需要控制嵌套關系盒子之間的距離
       應該首先考慮padding
       其次再考慮margin

       margin本質上是用於控制兄弟直接的關系的，padding本質才是控制父子關系的關系 

#2、如果兩個盒子是嵌套關系，那么設置了里面一個盒子頂部的外邊距，那么外面一個盒子也會被頂下來
       如果外面的盒子不想被遺棄頂下來，，那么可以給外面的盒子設置一個邊框屬性

5、盒子居中與內容居中

（1）內容居中

1、讓一行內容在盒子中水平且垂直居中
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 500px;

2、讓多行內容在盒子中垂直居中（水平居中與單行內容一樣）
讓行高與盒子高度一樣，只能讓一行內容垂直居中，如果想讓多行內容垂直居中，

比如下面這種，想讓div中的多行內容垂直居中，一看div中的文字是兩行，每一行
的行高為20，加起來就是40，80-40=40，需要讓文字距離頂部pading為20，底部padding為20
*/
height: 80px;
line-height: 20px;

padding-top: 20px;
padding-bottom: 20px;
box-sizing: border-box;

（2）盒子居中

text-align center；只能讓盒子中存儲的文字、圖片水平居中
如果想讓盒子自己相對於父元素水平居中，需要用到
margin: 0 auto;

（3）舉例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 200px;
            height: 600px;
            background-color: red;

            text-align: center;
            line-height: 25px;
            padding-top: 250px;
            padding-bottom: 250px;
            box-sizing: border-box;

            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="box1">
    你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
</div>
</body>
</html>
盒子居中&內容居中

6、防止文字溢出word-break: break-all;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>歡迎界面</title>
    <style type="text/css">

        div {
            width: 200px;
            height: 200px;

            /*字母、數字溢出，可以用下列屬性控制自動換行：允許在單詞內換行。
            http://www.w3school.com.cn/cssref/pr_word-break.asp
            */
            word-break: break-all;
        }

        .box1 {
            background-color: red;


        }
        .box2 {
            background-color: green;
        }

        .box3 {
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>asdfasdfsadfasdfasdfasdfad sfasdfsadasDSfafsafaasdfasdfasfdqwerqwerwqersdfqerwrsdf你好我的啊啊啊啊啊啊啊啊啊啊啊啊</p>

</div>


<div class="box2">遺憾白鷺上青天兩個黃鸝鳴翠柳啊哈哈哈

</div>

<div class="box3">我是12312312312312312312312312312312312312312312312312312312312我
</div>
</body>
</html>

 

7、清除默認邊距

#1、為什么要清空默認邊距（外邊距和內邊距）
瀏覽器會自動附加邊距，在企業開發中為了更好的控制盒子的寬高和計算盒子的寬高等等
編寫代碼之前的第一件事情就是清空默認的邊距

#2、如何清空默認的邊距
        * {
            margin: 0px;
            padding: 0px;
        }

#3、注意點：
    通配符選擇器會找到（遍歷）當前界面中所有的標簽，所以性能不好，參考：https://yuilibrary.com/yui/docs/cssreset/
  
    拷貝代碼：
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

    可以查看京東，bat主頁也是這么做的，在企業開發中也應該像上面

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSS--盒子模型詳解 CSS盒子模型 CSS（10）盒子模型 CSS 盒子模型屬性 CSS盒子模型與怪異盒模型 CSS布局(一) 盒子模型基礎 CSS盒子模型小剖析 使用css彈性盒子模型 css中的盒子模型是什么? CSS盒子模型中的Padding屬性
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM