Web前端篇：CSS經常使用格式化排版、盒模型、浮動、定位、背景邊框屬性

時間 2019-12-08

標籤 web 前端 css 經常使用格式化排版模型浮動定位背景邊框屬性欄目 HTML 简体版

原文原文鏈接

目錄css

Web前端篇：CSS經常使用格式化排版、盒模型、浮動、定位、背景邊框屬性

Web前端篇：CSS經常使用格式化排版、盒模型、浮動、定位、背景邊框屬性

1.經常使用格式化排版

1.字體的屬性

設置字體屬性：html

body{font-family:"Microsoft Yahei"}

body{font-family:"Microsoft Yahei","宋體","黑體"}
#備選字體能夠有無數個，那麼瀏覽器在去解析這個代碼的時候，是從左往右解析的，若是沒有微軟雅黑，再去找宋體，最後黑體。

字體大小：前端
- 最經常使用的像素單位：px、em、rem，這裏我們先介紹一種單位，px。
- px:像素是指由圖像的小方格組成的，這些小方塊都有一個明確的位置和被分配的色彩數值，小方格顏色和位置就決定該圖像所呈現出來的樣子。
字體顏色：css3
- 顏色表示方法在css中有三種方式：
  - 英文單詞表示法：red/green/blue
  - rgb表示法
  - 十六進制表示法

字體樣式font-styleweb

網站中的字體分爲了普通字體和斜體字體，咱們可使用font-style屬性來設置對應的字體樣式。瀏覽器

normal正常,italic斜體,oblique斜體服務器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-style:italic;
        }
    </style>
</head>
<body>
    <p>你好</p>

</body>
</html>

字體粗細網絡

font-weight佈局

屬性值	描述
normal	普通的字體粗細，默認
bold	加粗的字體粗細
lighter	比普通字體更細的字體
bolder	比bold更粗的字體
100~900	400表示normal

文本屬性：性能

text-decoration

屬性值	描述
none	無文本的修飾
underline	文本下劃線
overline	文本上劃線
line-through	穿過文本的線，~~能夠模擬刪除線~~。

文本縮進
- 咱們一般寫文章的時候，首字母要空兩格。那麼咱們須要使用
- text-indent,它的屬性值是像素(px、em、rem)單位。
行間距
line-height:數值px/em
縱紋字間距/字母間距
- letter-spacing:數值px;
- word-spacing:數值px;

文本對齊

text-align

屬性值	描述
left	文本左對齊，默認
right	文本右對齊
center	中心對齊

2.px,em,rem

px單位的名稱爲像素，它是一個固定大小的單元，像素的計算是針對（電腦/手機）屏幕的，一個像素（1px）就是（電腦/手機）屏幕上的一個點，即屏幕分辨率的最小分割。
它是相對於當前對象內文本的字體尺寸；若是沒有人爲設置當前對象內文本的字體尺寸，那麼它相對的是瀏覽器默認的字體尺寸

rem只相對於根目錄，即HTML元素。因此只要在html標籤上設置字體大小，文檔中的字體大小都會以此爲參照標準，通常用於自適應佈局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        html{
            font-size:20px
        }
        .box{
            font-size:12px;
            width:20rem;
            height:20rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.CSS盒模型

經常使用塊元素由：
```
p,h1-h6,div,ul,ol,tr,li,form
```
經常使用內聯元素由：
```
a,span,em,i,strong,u,
```
常見的內聯塊元素
```
input img
```

標籤類別	特色
塊狀元素	1.獨自佔據整一行 2.能夠設置寬高
內聯元素	1.全部的內聯元素在一行內顯示 2.不能夠設置寬高
行內塊元素	1.在一行內顯示 2.能夠設置寬高

盒模型經常使用屬性：
- 盒子模型中有四個屬性：內容的寬高、內邊距、外邊距、邊框。

1.padding

padding有四個方向，分別描述四個方向的padding。

padding-top:10px;
padding-right:3px;
padding-bottom:50px;
padding-left:70px;

綜合屬性，多個屬性用空格隔開。

/*上 右 下 左 四個方向*/
padding: 20px 30px 40px 50px ;
/*上 左右  下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;

2.border

盒子模型的邊框，在樣式表中稱爲border。咱們知道呢，咱們用的手機，都會有手機殼。手機殼的樣式、顏色、薄厚程度等都是這個殼的形態。一樣呢，盒模型的邊框也有三要素：粗細線性樣式顏色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border的使用</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            /*1像素實線且紅色的邊框*/
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

按照三要素書寫border

border-width:3px;
border-style:solid;
border-color:red;
/*上面三句代碼至關於一句代碼：border:3px solid red;*/
/*一樣,也能夠分別設置邊框四個方向的粗細 線性樣式 顏色,跟padding的四個方向同樣。*/
/*上下5px  左右10px*/
border-width:5px 10px;
/*上：實現  右：點狀  下：雙線 左：虛線*/
border-style: solid dotted double dashed;
/*上：紅色 左右：綠色 下：黃色*/
border-color: red green yellow;

按照方向劃分

border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

至關於border:10px solid red;

清除默認邊框：border:none;或者border:0; outline:none;

3.margin

在盒子模型中稱爲外邊距，樣式表中叫margin。表示盒子到另外一個盒子的距離。既然是二者之間的距離，那麼就會產生水平之間的距離和垂直之間的距離。一樣狀況下，外邊距也有四個方向，跟padding相似。

水平方向的外邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向外邊距</title>
    <style type="text/css">
        span:nth-child(1){
            background-color: green;
            margin-right: 20px;
        }
        span:nth-child(2){
            background-color: red;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <span class="box_l">左盒子</span><span class="box_r">右盒子</span>
</body>
</html>
#nth-child(1)，獲取span子類，參數爲第1個。

垂直方向外邊距

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

        }
        #box1{
            background-color: red;
            margin-bottom: 30px;
        }
        #box2{
            background-color: black;
            margin-top: 100px
        }
        #box3{
            background-color: yellowgreen;
        }
        #box3 p{
            background-color: goldenrod;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<!-- margin 在垂直方向上會出現外邊距合併現象，塌陷。以設置的最大的magrin距離爲基準-->
  <div id="box1"></div>
    <div id="box2"></div>

注意：盒模型的外邊距水平方向上不會出現問題，在垂直方向上會出現「**外邊距合併**」的現象。

什麼是外邊距合併呢？在有些文獻中說這種現象叫塌陷問題。只有在垂直方向上，當兩個同級的盒子，在垂直方向上設置了margin以後，那麼以較大者爲準。

在網頁排版中，外邊距合併的問題也會時常出現，咱們如何避免出現這種問題呢？

很簡單，咱們若是想讓上下的兩個盒子中間有間距，只須要設置一個盒子的一個方向便可。不必去碰觸外邊距塌陷的問題，還得找解決問題的方法，得不償失。

3.浮動

浮動是網頁佈局中很是重要的一個屬性。那麼浮動這個屬性一開始設計的初衷是爲了網頁的文字環繞效果。

文字環繞現象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向外邊距</title>
    <style type="text/css">
        html{
            font-size:24px;
        }
        img{
            width:20rem;
        }
        #sep{
            float: left;
        }
        p{
            border:1px solid red;
            text-indent:2rem;
            font-size:1rem;
        }
    </style>
</head>
<body>
    <div id="sep">
        <img src="https://i1.mifile.cn/a4/xmad_15590487108559_JOpcA.jpg" alt="加載失敗" title="王源">
    </div>
    <p>
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
    </p>
</body>
</html>

1.浮動屬性

css樣式表中用float來表示，它有

屬性值	描述
none	表示不浮動，全部以前講解的HTML標籤默認不浮動
left	左浮動
right	右浮動
inherit	繼承父元素的浮動屬性

<meta charset="UTF-8"/>
    <title>浮動屬性用法</title>
    <style type="text/css">
        .left{
            width: 200px;
            height: 200px;
            background-color: red;
            color: #fff;
            /*左浮動*/
             float:left;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: green;
            color: #fff;
            /*右浮動*/
             float:right;
        }
    </style>
    <div class="left">左邊的盒子</div>
    <div class="right">右邊的盒子</div>

2.浮動現象

咱們以前說浮動的設計初衷是爲了作」文字環繞效果「。那麼咱們就來看一下若是對盒子設置了浮動，會產生什麼現象？
1浮動的元素脫離了標準文檔流，即脫標
2浮動的元素互相貼靠
3浮動的元素會產生」字圍「效果
4浮動元素有收縮效果

3.浮動的破壞性

浮動以後效果展現：
因而可知，浮動以後，盒子由於脫離了標準文檔流，它撐不起父盒子的高度，致使父盒子高度塌陷。若是網頁中出現了這種問題，會致使咱們整個網頁的佈局紊亂。咱們必定要去解決這種父盒子高度塌陷的問題。
那麼如何解決浮動給網頁帶來的問題？

4.清除浮動的方式

咱們知道浮動具備破壞性，它能使父盒子高度塌陷、致使頁面紊亂。那麼在css佈局中對於浮動的解決方案有四種：

1.父盒子設置固定高度

給父盒子設置固定高度，缺點不靈活，後期不易維護。應用領域導航欄。

2.內牆法

在浮動元素的後面加一個空的塊級元素(一般是div),而且該元素設置clear:both屬性。
clear屬性，字面意思就是清除，那麼both,就是清除浮動元素對我左右兩邊的影響。以下示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 800px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .child1{
            width: 200px;
            height: 400px;
            background-color: red;
            float: left;
        }
        .child2{
            width: 300px;
            height: 200px;
            background-color: green;
            float: right;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
<!--內牆法：給最後一個浮動元素的
後面添加一個空的塊級標籤，而且設
置該標籤的屬性爲clear:both;-->
    <div class="father">
        <div class="child1">A盒子</div>
        <div class="child2">B盒子</div>
        <div class="clear"></div>

    </div>

存在問題：冗餘過長。

3.僞元素清除法（推薦使用）

僞元素選擇器很簡單。就像僞類同樣，讓僞元素添加了選擇器，但不是描述特殊的狀態，他們容許您爲元素的某些部分設置樣式。在這裏只介紹一個。

語法：

p::after{
    /*p::after{}必定要有content。表示在p元素內部的最後面的添加內容*/
    content:'...'
}

示例：

...
 .clearfix::after{
            content:'';
            display: block;
            clear: both;
            /*visibility: hidden;*/
            /*height: 0;*/
        }

    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="child1">盒子A</div>
        <div class="child2">盒子B</div>

    </div>

4.overflow:hidden

CSS屬性overflow定義一個元素的內容太大而沒法適應盒子的時候該作什麼。它是overflow-x和overflow-y的簡寫屬性

屬性值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外
hidden	內容會被修剪，而且其他內容不可見
scroll	內容會被修剪，瀏覽器會顯示滾動條以便查看其他內容
auto	由瀏覽器定奪，若是內容被修剪，就會顯示滾動條
inherit	規定從父元素繼承overflow屬性的值

hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            overflow: hidden;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow: hidden;

        }
    </style>
</head>
<body>
    <div class="box">
    此處有一篇1萬字文章
    </div>
</body>
</html>
#注意：此處內容會被修建，而且其他內容不可見

overflow:hidden||auto|scroll屬性以後，它會造成一個BFC區域，咱們叫作它爲塊級格式化上下文。BFC只是一個規則。它對浮動定位都很重要。浮動定位和清除浮動只會應用於同一個BFC的元素。
浮動不會影響其它BFC中元素的佈局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 800px;
            margin: 100px auto;
            border: 1px solid #000;
            /*一旦設置一個Box盒子 除了overflow：visible；
            它會造成一個BFC,BFC它有佈局規則： 它會讓內部浮動元素計算高度*/
            overflow: hidden;
        }
        .child1{
            width: 200px;
            height: 400px;
            background-color: red;
            float: left;
        }
        .child2{
            width: 300px;
            height: 200px;
            background-color: green;
            /*float: right;*/
            /*overflow: hidden;*/
            float: left;
        }


    </style>
</head>
<body>

    <div class="father ">
        <div class="child1">A盒子</div>
        <div class="child2">B盒子</div>
    </div>



</body>
</html>

5.深刻理解BFC：

瞭解BFC
- （1）B: BOX即盒子，頁面的基本構成元素。分爲 inline 、 block 和 inline-block三種類型的BOX
  
  （2）FC: Formatting Context是W3C的規範中的一種概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。
  
  （3）常見的 Formatting Context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)

1.BFC佈局：

1.內部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3.每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
4.BFC的區域不會與float 元素重疊。
5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
6.計算BFC的高度時，浮動元素也參與計算

2.哪那些元素會生成BFC

1.根元素
2.float屬性不爲none
3.position爲absolute或fixed
4.display爲inline-block
5.overflow不爲visible

3.display屬性

display屬性設置元素如何顯示

值	描述
none	此元素不會被顯示
block	此元素將顯示爲塊級元素，此元素先後會帶有換行
inline	默認，此元素會被顯示爲內聯元素，元素先後沒有換行
inline-block	行內塊，將元素顯示爲行內塊元素，設置屬性後，其餘的行內塊級元素會排在同一行。
table-cell	此元素會做爲一個表格單元格顯示

4.定位

定位是一個至關複雜的話題，在去深刻理解定位以前，咱們先來聊一下以前咱們的標準文檔流下的佈局。
應用:網頁中小廣告，返回頂部的UI。

1.Position屬性

定位方式：top,right,bottom,left屬性決定該元素的最終位置。

屬性值	描述
static	默認。靜態定位，指定元素使用正常的佈局行爲，即元素在文檔常規流中當前的佈局位置。此時 `top`, `right`, `bottom`, `left` 和 `z-index`屬性無效。
relative	相對定位。元素先放置在未添加定位時的位置，在不改變頁面佈局的前提下調整元素位置（所以會在此元素未添加定位時所在位置留下空白）
absolute	絕對定位。不爲元素預留空間，經過指定元素相對於最近的非 static 定位祖先元素的偏移，來肯定元素位置。絕對定位的元素能夠設置外邊距（margins），且不會與其餘邊距合併
fixed	固定定位。不爲元素預留空間，而是經過指定元素相對於屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變

2.靜態定位

靜態定位意味着「元素默認顯示文檔流的位置」。沒有任何變化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>靜態定位</title>
    <style type="text/css">
        .positioned{
            position: static;
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="positioned">我是靜態定位的元素</p>
</body>
</html>

3.相對定位

相對定位的元素是在文檔中的正常位置的偏移，可是不會影響其餘元素的偏移。
參考點：以自身原來的位置進行定位，可使用top,left,right,bottom對元素進行偏移。
現象：
- 不脫離標準文檔流，單獨設置盒子相對定位以後，。不用top,left,right,bottom對元素進行偏移，那麼與普通的盒子沒什麼區別。
- 有壓蓋現象。用top,left,right,bottom對元素進行偏移以後，明顯定位的元素的層級高於沒有定位的元素(用top,left,right,bottom層級低)。

4.絕對定位

相對定位的元素並無脫離標準文檔流，而絕對定位的元素則脫離了文檔流。在標準文檔流中，若是一個盒子設置了絕對定位，那麼該元素不佔據空間。而且絕對定位元素相對於最近的非static祖先元素定位。當這樣的祖先元素不存在時，則相對於根元素頁面的左上角進行定位。
參考點：
- 相對於最近的非static祖先元素定位，若是沒有非static祖先元素，那麼以頁面左上角進行定位。

5.應用

相對定位的盒子，通常用於「子絕父相」，佈局模式參考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 400px;
            height: 500px;
            background-color:red;
            position: relative;
        }
        div .c1{
            width: 200px;
            height: 200px;
            background-color:blue;
            position: absolute;
            top: 20px;
            left: 20px;
        }
        div .c2{
            width: 100px;
            height: 100px;
            background-color:greenyellow;
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1">子1</div>
        <div class="c2">子2</div>

    </div>
</body>
</html>

子絕父相

6.z-index:

z-index有如下幾個規則：
- z-index只應用在定位元素，默認z-index:auto;
- z-index取值爲整數，數值越大，它的層級越高。
- 若是元素設置了定位，沒有設置z-index,那麼誰寫在後面的表示誰層級越高。
- 從父現象，一般佈局方案咱們採用子絕父相，比較的是父元素的z-index值，哪一個父元素的z-index值越大，表示子元素的層級越高。

5.背景屬性和邊框屬性

背景屬性值

屬性值	屬性值	描述
background-color	d單側顏色法，RGB，十六進制	s設置元素的背景顏色
background-image	url("wy.png")	給一個元素設置一個或多個背景圖像
background-position	top,left,center,百分比，px	爲每個背景圖片設置初始位置
background-repreat	repeat-x	repeat-y

background-image設置背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg{
            width: 400px;
            height: 400px;
            border:1px solid blue;
            background-image:url("wy.jpg")
        }
    </style>
</head>
<body>
    <div class="bg"></div>
</body>
</html>

background-repeat背景圖像

屬性值：

數值值	描述
repeat	默認值。表示背景圖水平和垂直方向都平鋪
no-repeat	表示背景圖水平和處置方向都不平鋪
repeat-x	表示背景圖只有水平方向上平鋪
repeat-y	表示背景圖只有垂直方向上平鋪

.bg{
    width: 1000px;
    height: 1000px;
    border:1px solid blue;
    background-image:url("sj6.jpg");
    background-repeat:repeat-x;/*沿着軸方向平鋪*/
}

bacground-position背景圖定位

語法：

background-position:x y;
background-position:position position

取值

關鍵字取值：
    top ,right,bottom,left,center
長度值取值：
    px,em
百分比：
    50%

示例

background-position:0 0;
/*左上角顯示*/

background-position:top right; /*背景圖像在右上角*/

background-position:top center; /*背景圖像上方居中顯示*/

background-position:center center;/*背景圖像居中顯示*/

設置長度單位：

background-position:50px 100px;

設置爲負值：

background-position:-20px -30px;

2.雪碧圖

CSS雪碧圖技術：即CSS Sprite,也有人叫它CSS精靈圖，是一種圖像拼合技術。該方法是將多個小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分。

優勢：
- 有效的減小HTTP請求數量
- 加速內容
雪碧圖的實現原理
- 它經過css的背景屬性的backrground-position的來控制雪碧圖的顯示。
- 控制一個層，可顯示的區域範圍大消息，經過一個窗口，進行背景圖的移動。

3.border-radius

傳統的圓角生成方案，必須使用多張圖片做爲背景圖案。css3的出現，使得咱們不再必浪費時間去製做這些圖片，而且還有其餘多個優勢：
- 減小維護的工做量。圖片文件的生成、更新、編寫網頁代碼，這些工做都再也不須要了。
- 提升網頁性能。因爲沒必要再發出多條的HTTP請求，網頁的載入速度將變快
- 增長視覺可靠性。（網絡擁堵、服務器出錯、網速過慢等等），背景圖片會下載失敗，致使視覺效果不佳。CSS3就不會發生這種狀況。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bor-radius{
            width: 400px;
            height: 400px;
            border-radius:20px;
            background-color: red;
    }
    </style>

</head>
<body>
    <div class="bor-radius"></div>
</body>
</html>

顯示效果以下：
單角設置：
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- 示例：
```
border-bottom-left-radius：
```

border-radius效果實現一個無邊框圓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cicle{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius:50%;
        }
    </style>

</head>
<body>
    <div class="cicle"></div>
</body>
</html>

製做一半的圓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cicle{
            width: 200px;
            height: 100px;
            background-color: red;
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
        }
    </style>

</head>
<body>
    <div class="cicle"></div>
</body>
</html>

4.盒子陰影

經過box-shadow屬性設置元素的陰影

語法：

box-shadow: h-shadow v-shadow blur color inset;

值	描述
h-shadow	必需。水平陰影的位置。容許負值
v-shadow	必需。垂直陰影的位置。容許負值。
blur	可選。模糊距離。
color	可選。陰影的顏色。
inset	可選。將外部陰影 (outset) 改成內部陰影。

.bg{
            width: 400px;
            height: 400px;
            border:1px solid blue;
            background-image:url("sj6.jpg");
            background-repeat:no-repeat;
            background-position:50px 100px;
            box-shadow:5px 5px 20px red;
        }

6.網頁中規範和錯誤問題

css命名規範：

參考連接http://www.divcss5.com/jiqiao/j4.shtml#no2
項目目錄規範：
肯定錯誤位置
- 假如錯誤影響了總體佈局，則能夠逐個刪除div塊，直到刪除某個div塊後顯示恢復正常，便可肯定錯誤發生的位置。這樣咱們能夠更精準的找到錯誤點，進行排錯。
是否重設了默認的樣式?
- 製做網頁時，咱們要清除掉默認的元素的padding和margin，使得咱們更易去計算盒模型的大小。

7.顯示方式

1.行內元素水平居中顯示

經過line-hinght + text-align

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            width: 200px;
            height: 200px;
            background-color: #666;
            color:red;
            line-height: 200px;
            text-align:center;
        }
    </style>

</head>
<body>
    <p>
        帥氣的阿凱哥
    </p>
</body>
</html>

經過給父元素設置display:table-cell,而且設置vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            width: 200px;
            height: 200px;
            background-color: #666;
            color:red;
            text-align:center;
            display: table-cell;
            vertical-align:middle;
        }
    </style>

</head>
<body>
    <span>
        <span>你好啊</span>
    </span>
</body>
</html>

2.塊級元素水平垂直居中

第一種：position+margin

position,子絕父相，margin自動設置外邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .child{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: blue;
            margin:auto;
            top:0;
            left:0;
            bottom:0;
            right:0;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">居中盒子</div>
    </div>
</body>
</html>

第二種：display:table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
            display:table-cell;
            vertical-align:middle;
            text-align:center;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: green;
            display:inline-block;
            vertical-align:middle;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">居中盒子</div>
    </div>
</body>
</html>

第三種：position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">我是個居中的盒子</div>
    </div>
</body>
</html>