Web前端開發與設計04-布局和定位

本文轉載自查看原文 2020-03-02 14:33 647 Web

學習要點

盒子模型
標准文檔流
網頁布局
浮動
清除浮動
溢出處理
定位在網頁中的應用
position屬性
z-index屬性

盒子模型

定義

https://www.cnblogs.com/rask/p/9913070.html

盒子模型的三維立體層次結構圖

在網頁中看到的網頁內容，都是盒子模型的三維立體結構多層疊加的最終效果。從這里可以看出，如果對某個頁面元素同時設置背景圖像和背景顏色，則背景圖像將在背景顏色的上方顯示（實際設計時候可以考慮背景色和背景圖片顏色相近，避免背景圖片丟失導致體驗感下降）。

盒子模型屬性介紹

1、邊框
邊框共有三個屬性：color，width，style

border-color

屬性	說明	示例
border-top-color	邊框顏色	border-top-color:#369;
border-right-color	邊框顏色	border-right-color:#369;
border-bottom-color	邊框顏色	border-bottom-color:#fae45b;
border-left-color	左邊框顏色	border-left-color:#efcd56;
border-color	四個邊框為同一顏色	border-color:#eeff34;
	上、下邊框顏色：#369 左、右邊框顏色：#000	border-color:#369 #000;
	上邊框顏色：#369 左、右邊框顏色：#000 下邊框顏色：#f00	border-color:#369 #000 #f00;
	上、右、下、左邊框顏色：#369、#000、#f00、#00f	border-color:#369 #000 #f00 #00f;

border-width
值：thin，medium，thick，像素值
設置方式與border-color設置方式類似。
示例：

border-style

值：none，solid，dotted……
設置方式與border-color設置方式類似。

示例：

border屬性簡寫

border-bottom: 9px #F00 dashed ;

border: 9px #F00 dashed ;

參數順序沒有強制要求，建議順序：粗細、顏色、樣式

2、外邊距

margin-top、margin-right
margin-bottom、margin-left
margin
示例：

外邊距的重要應用，網頁居中對齊：（元素要先設置寬度，否則無效）

margin：0px auto;

3、內邊距

padding-left、padding-right

padding-top、padding-bottom

padding

示例：

盒子模型尺寸計算

盒子模型總尺寸=border-width+padding+margin+內容寬度

注意：默認情況下，在樣式表中設置的width和height屬性是指內容的寬度和高度。

box-sizing

1、語法

box-sizing: content-box | border-box | inherit:

2、解釋

盒子模型的總尺寸是是按照默認方式還是按照內容尺寸計算。

3、參數說明

4、示例代碼

<head lang="en">
    <meta charset="UTF-8">
    <title>box-sizing</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            padding: 5px;
            margin: 10px;
            border: 1px solid #000000;
            box-sizing: border-box;
            /*box-sizing: content-box;  /!* 默認值*!/*/
        }
        #div2{
            width: 100px;
            height: 100px;
            padding: 5px;
            margin: 10px;
            border: 1px solid #000000;
            /*box-sizing: border-box;*/
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
<br>
    <div id="div2"></div>
</body>

圓角邊框

1、語法

border-radius;

2、示例代碼

border-radius: 20px  10px  50px  30px;

3、效果

4、使用border-radius制作特殊圖形

4.1 圓形

利用border-radius屬性制作圓形的兩個要點：元素的寬度和高度必須相同；圓角的半徑為元素寬度的一半，或者直接設置圓角半徑值為50%。

div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}

效果：

4.2 半圓形
利用border-radius屬性制作半圓形的兩個要點：制作上半圓或下半圓時，元素的寬度是高度的2倍，而且圓角半徑為元素的高度值；制作左半圓或右半圓時，元素的高度是寬度的2倍，而且圓角半徑為元素的寬度值。

<head lang="en">
    <meta charset="UTF-8">
    <title>border-radius制作半圓形</title>
    <style>
        div{
            background: red;
            margin: 30px;
        }
        div:nth-of-type(1){
            width: 100px; 
            height: 50px;
            border-radius: 50px 50px 0 0;
        }
        div:nth-of-type(2){
            width: 100px;
            height: 50px;
            border-radius:0 0 50px 50px;
        }
        div:nth-of-type(3){
            width: 50px;
            height: 100px;
            border-radius:0 50px 50px  0;
        }
        div:nth-of-type(4){
            width: 50px;
            height: 100px;
            border-radius: 50px 0 0 50px;
        }
    </style>
</head>
<body>
    <div></div><div></div>
    <div></div><div></div>
</body>

效果圖：

4.3 扇形
利用border-radius屬性制作扇形遵循“三同，一不同”原則：“三同”是元素寬度、高度、圓角半徑相同；“一不同”是圓角取值位置不同。

<head lang="en">
    <meta charset="UTF-8">
    <title>border-radius制作扇形</title>
    <style>
        div{
            background: red;
            margin: 30px;
        }
        div:nth-of-type(1){
            width: 50px;
            height: 50px;
            border-radius: 50px 0 0 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            border-radius:0 50px 0 0;
        }
        div:nth-of-type(3){
            width: 50px;
            height: 50px;
            border-radius:0 0 50px 0;
        } 
        div:nth-of-type(4){
            width: 50px;
            height: 50px;
            border-radius: 0 0 0 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

效果圖：

盒子陰影

1、語法

box-shadow:inset x-offset y-offset blur-radius color;

2、參數說明
inset：陰影類型——內陰影。不指定則為外陰影。
x-offset：X軸位移，指定陰影水平位移量
y-offset：Y軸位移，用來指定陰影垂直位移量
blur-radius：陰影模糊半徑陰影向外模糊的模糊范圍
color：陰影顏色，定義繪制陰影時所使用的顏色

3、瀏覽器兼容性

4、示例代碼

<head lang="en">
<meta charset="UTF-8">
<title>box-shadow的使用</title>
<style>
  div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      border-radius: 8px;
      margin: 20px;
      /*box-shadow: 20px 10px 10px #06c;*/ /*外陰影*/
      /*box-shadow: 0px 0px 20px #06c;*/ /*只設置模糊半徑的外陰影*/
      box-shadow: inset 3px 3px 10px #06c;   /*內陰影*/
       }
</style>
</head> 
<body>
<div></div></body>

5、效果圖

網頁布局

常見布局

網頁常見構成部分：網站導航、網頁主題內容、網站版權3個部分。
網頁布局類型有：“國”字形，拐角形，標題正文型，左右框架型，綜合框架型，封面型，Flash型，變化型。
最常見類型：“國字型”，也稱為1-3-1型；“拐角型”，1-2-1型。
1-3-1型網頁：京東、天貓超市、當當、鐵路客服中心、廈門人才網、鳳凰網……
1-2-1型網頁：孔夫子舊書網、科學公園……

塊元素排一行方法

可以使用什么屬性使塊元素排在一行？

inline-block
float

浮動

1、問題：如何網頁布局？

在標准文檔流中，一個塊級元素在水平方向上回自動伸展，直到包含它的元素的邊界，在豎直方向和其他塊級元素依次排列。

2、浮動在網頁中的應用

橫向導航

商品列表

3、float屬性

示例代碼html

<body>
<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="圖書" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div  class="layer04">浮動的盒子可以向左浮動，也可以向右浮動，直到它的外邊緣碰到包含框或另一個浮動盒子為止。本網頁中共有三個圖片，分別代表日用品圖片、圖書圖片和鞋子圖片。這里使用這三個圖片和本段文字來演示講解浮動在網頁中的應用，根據需要圖片所在的div分別向左浮動、向右浮動，或者不浮動。</div>
</div>
</body>

示例代碼css：

@charset "gb2312";
/* CSS Document */
div {
   margin:10px;
   padding:5px;
}
#father {
   border:1px #000 solid;
   /*overflow: hidden;*/
}
.layer01 {
   border:1px #F00 dashed;
   float: left;
}
.layer02 {
   border:1px #00F dashed;
   float: left;
}
.layer03 {
   border:1px #060 dashed;
   float: right;
}
.layer04 {
   border:1px #666 dashed;
   font-size:12px;
   line-height:23px;
/* float: left;
   clear: both;*/
}

示例步驟
1) 設置layer01左浮動
2) 設置layer02左浮動
3) 設置layer03左浮動
4) 設置layer01右浮動
5) 設置layer02右浮動

邊框塌陷

layer04設置寬度和右浮動后，father邊框塌陷了，如何解決？

原因：浮動元素脫離標准文檔流

解決方案：清除浮動

清除浮動

1、清除浮動影響-clear屬性

2、清除兩側浮動：

.layer04 {clear:both;}

3、示例
浮動演示示例繼續演示，文本div的clear屬性設置
1) 清除左側浮動
2) 清除右側浮動
3) 清除兩側浮動

擴展盒子高度（解決父級元素邊框塌陷）

1、父級元素邊框塌陷

網頁中的浮動元素脫離了標准流，導致影響父層高度。

示例中的文本div左浮動，導致id為father的div高度縮成條狀。換句話說，一個div的范圍是由它里面的標准文檔流的內容決定的，與里面的浮動內容更無關。

那么，如何在視覺上讓father包圍浮動元素呢？

2、解決方案一：添加div

在所有浮動的div之后添加一個div，這個div的css的clear屬性設置為：both。

特點：簡單，空div會造成HTML代碼冗余。

3、解決方案二：設定父級元素高度

#father {height: 400px; border:1px #000 solid; }

特點：簡單，元素固定高會降低擴展性。

4、解決方案三：父級元素添加overflow屬性

overflow屬性下一小節詳細講解

#father {overflow: hidden;border:1px #000 solid; }

特點：簡單，下拉列表框的場景不能用。

5、解決方案四：父級添加偽類after（推薦方案）

示例代碼：

<div id="father" class="clear">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="圖書" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮動的盒子……</div>
</div>
.clear:after{
    content: '';          /*在clear類后面添加內容為空*/
    display: block;      /*把添加的內容轉化為塊元素*/
    clear: both;         /*清除這個元素兩邊的浮動*/
}

特點：寫法稍微復雜一點，但是沒有副作用，推薦使用