盒子模型

Paste_Image.png

盒子寬度=margin左右寬度+border左右邊框?qū)挾?padding左右寬度+content 的寬度
盒子高度=margin上下高度+border上下邊框高度+padding上下高度+content 的高度。
本章節(jié)主要介紹三個屬性：box-sizing、border-radius、box-shadow。

box-sizing

box-sizing有三個屬性：content-box（default），border-box，padding-box。
如果box-sizing的屬性為border-box，則表示盒子的width屬性包含border之內(nèi)的寬度。
代碼示例

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

border-radius

border-radius可以向div元素添加圓角邊框，有四個屬性：border-top-left-radius、 border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
代碼示例-半徑為50px的圓

div{
    width:100px;
    height:100px;
    background-color:#fc0;
    border-radius:50px 50px 50px 50px;
}

通過順序添加不同的圓角邊框值，可以讓div的邊框變得圓滑。

box-shadow

box-shadow屬性向框添加一個或多個陰影
語法為：box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow為水平陰影位置，v-shadow為垂直陰影位置，blur為模糊距離，spread為陰影的尺寸，color為陰影的顏色，insert可將外部陰影 (outset) 改為內(nèi)部陰影。前兩個屬性必選，后面三個屬性為可選屬性。
代碼示例：

div
{
   background-color:yellow;
   width:200px;
   height:100px;
   box-shadow:10px 10px 50px 20px pink inset;
}

居中

元素的居中分為水平居中和垂直居中

水平居中

常規(guī)流內(nèi)聯(lián)元素的居中

為父元素設(shè)置text-align:center即可

#myDiv{
   text-align:center;
}
<div id="myDiv">
    <span>內(nèi)聯(lián)元素水平居中</span>
</div>

常規(guī)流block元素居中

為塊元素設(shè)置寬度
設(shè)置左右的margin為auto

div{
       width:100px;
       margin:auto;
}

浮動元素的居中

為元素設(shè)置寬度
設(shè)置 position：relative;
left:50%；
margin-left:-1/2 width;
代碼示例：

div{
        width: 500px;         
        float: left;
        position: relative;   
        left: 50%;            
        margin-left: -250px; 
}

絕對定位元素的居中

方法一

為元素設(shè)置寬度；
偏移量設(shè)為50%；
margin-left:-1/2 width;
代碼示例：

div{
     position:absolute;
     width:100px;
     left:50%;
     margin-left:-50px;
}

方法二

為元素設(shè)置寬度；
設(shè)左右偏移量均為0；
設(shè)左右外邊距為auto;
代碼示例：

div{
    position:absolute;
    width:100px;
    left:0;
    right:0;
    margin:auto;
}

垂直居中

單行文本垂直居中—line-height方法

為父元素設(shè)置高度
設(shè)置父元素的line-height與高度一致

HTML:
<div id="parent">
      <p id="child"></p>
</div>
CSS:
#parent{
   height:100px;
   line-height:100px;
}

內(nèi)聯(lián)元素垂直居中

內(nèi)聯(lián)元素display：inline-block;
vertical-aline:middle;

HTML:
<div class="pic">  
        ![圖片垂直居中](https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png)  
   </div>  
CSS:
.pic{ 
       display:inline-block; //display:table-cell也可以，但不支持IE-6/7
       vertical-align:middle;}

塊級元素

絕對定位居中

設(shè)置Margin:auto;
為元素添加絕對定位；
上下左右偏移量均為0；
代碼示例：

div{
     margin:auto;
     position:absolute;
     left:0;top:0;right:0;bottom:0;
}

浮動元素垂直居中

為元素設(shè)置高度
設(shè)置 position：relative;
top:50%；
margin-top:-1/2 width;
代碼示例：

div{
        width: 500px;         
        float: left;
        position: relative;   
        top: 50%;            
        margin-top: -250px; 
}

絕對定位元素的居中

為元素設(shè)置高度；
偏移量設(shè)為50%；
margin-top:-1/2 width;
代碼示例：

div{
     position:absolute;
     width:100px;
     top:50%;
     margin-top:-50px;
}

絕對定位元素居中更多方法可參考這里。
flexbox布局也可以實現(xiàn)居中，這里先不做詳細介紹。

定位&浮動

利用定位和浮動，可以建立列式布局，實現(xiàn)將布局的一部分與另一部分重疊等效果。
CSS有三種定位機制：普通流、浮動和絕對定位，如果沒有特殊指定，所有框都在普通流中定位

position 定位

position有四種不同的屬性：static、relative、absolute、fixed。

static:元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。
relative:元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute:元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
4.fixed:元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。
CSS定位屬性除了position的四中屬性外，還有top、right、bottom、left、overflow、vertical-align、z-index、clip屬性。通過以上屬性可以具體定位元素的位置。

相對定位

相對定位元素中的相對是指想對自己，也就是將元素相對于自己進行重新布局，該元素原來的位置依然存在于文檔流中，不會被刪除，也即不會被別的元素覆蓋。
代碼示例：

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

絕對定位

絕對定位元素的位置與文檔流無關(guān)，即文檔流中已將該元素刪除，這一點與相對定位完全不同。
元素的絕對定位指的是相對于其祖先元素的絕對定位，如果沒有指定祖先元素，則該元素絕對定位的祖先元素則為window
代碼示例：

HTML:
<div class="parent">
        <div class="child"></div>
</div>

CSS:
.parent
{
      position:relative//為祖先元素設(shè)置定位為relative
}
.child
{
      position:absolute;
      left:100px;
      top:50px;
}

flex布局

.parent{display:flex;justify-content:center;align-items:center;}

浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到下一個浮動框或邊緣框就會停止浮動。
代碼示例：

<ul>
     <li><a >導(dǎo)航鏈接一</a></li>
     <li><a >導(dǎo)航鏈接二</a></li>
     <li><a >導(dǎo)航鏈接三</a></li>
     <li><a >導(dǎo)航鏈接四</a></li>
    </ul>

li {
        float:left;
        height:40px;
        margin-right:20px;
        list-style:none;
}

清除浮動

clear屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素。
代碼示例：

<html>
<head>
<style type="text/css">
img
  {
      float:left;
      clear:both;
  }
</style>
</head>
<body>
      ![](/i/eg_smile.gif)
      ![](/i/eg_smile.gif)
</body>
</html>

布局

display

display屬性規(guī)定元素應(yīng)該生成的框的類型。
display常見的屬性有：inline、block、inline-block、table、table-caption、table-cell、table-column、table-column-group、table-row、table-row-group、none。
display:inline是指元素以內(nèi)聯(lián)元素顯示，和其他元素都在一行上，高、行高及頂和底邊距不可改變。

水平方向上根據(jù)direction依次布局
不會在元素前后進行換行
受white-space控制
margin/padding在豎直方向上無效，水平方向上有效
width/height屬性對非替換行內(nèi)元素?zé)o效，寬度由元素內(nèi)容決定
非替換行內(nèi)元素的行框高由line-height確定，替換行內(nèi)元素的行框高由height,margin,padding,border決定
浮動或絕對定位時會轉(zhuǎn)換為block
vertical-align屬性生效

display:block是指元素以塊元素顯示

處于常規(guī)流中時，如果width沒有設(shè)置，會自動填充滿父容器
可以應(yīng)用margin/padding
在沒有設(shè)置高度的情況下會擴展高度以包含常規(guī)流中的子元素
處于常規(guī)流中時布局時在前后元素位置之間（獨占一個水平空間）
忽略vertical-align屬性。

display:inline-block將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。旁邊的內(nèi)聯(lián)對象會被呈遞在同一行內(nèi)，允許空格。(準(zhǔn)確地說，應(yīng)用此特性的元素呈現(xiàn)為內(nèi)聯(lián)對象，周圍元素保持在同一行，但可以設(shè)置寬度和高度地塊元素的屬性)。
display:none是會讓元素完全從渲染樹中消失，渲染的時候不占據(jù)任何空間。

詳細的布局可參考這里

CSS3

前面的章節(jié)已經(jīng)涉及到一些CSS3的知識了，比如border-radius、box-sizing等都屬于CSS3內(nèi)容。接下來主要對背景、2D/3D轉(zhuǎn)換、過渡、動畫等進行介紹！

背景新增屬性

CSS3新增的背景屬性有：background-size、background-origin

background-size

background-size屬性規(guī)定背景圖片的尺寸，可以以像素或百分比規(guī)定尺寸，如果用百分比那么是相對于父元素的寬度、高度。
代碼示例：

div
{
   background:url(bg_flower.gif);
   -moz-background-size:63px 100px; /* 老版本的 Firefox */
   background-size:63px 100px;
   background-repeat:no-repeat;
}

background-origin

background-origin屬性規(guī)定背景圖片的定位區(qū)域，背景圖片可以放置于content-box、padding-box或 border-box 區(qū)域。
代碼示例：

div
{
   background:url(bg_flower.gif);
   background-repeat:no-repeat;
   background-size:100% 100%;
   -webkit-background-origin:content-box; /* Safari */
   background-origin:content-box;
}

文本新增屬性

CSS3中文本的新增屬性有text-shadow、word-wrap。
text-shadow可向文本應(yīng)用陰影，規(guī)定水平陰影、垂直陰影、模糊距離以及陰影的顏色。
代碼示例：

h1
{
   text-shadow: 5px 5px 5px #FF0000;
}

word-wrap屬性允許文本強制換行。
p {word-wrap:break-word;}

2D 轉(zhuǎn)換

2D轉(zhuǎn)換方法主要有：translate()、rotate()、scale()、skew()、matrix()、

translate()

通過該方法，可以是元素從當(dāng)前位置移動，有l(wèi)eft(x坐標(biāo))和top(y坐標(biāo))兩個參數(shù)。
代碼示例：

div
{
   transform: translate(50px,100px);
   -ms-transform: translate(50px,100px);        /* IE 9 */
   -webkit-transform: translate(50px,100px);    /* Safari and Chrome */
   -o-transform: translate(50px,100px);     /* Opera */
   -moz-transform: translate(50px,100px);       /* Firefox */
}

rotate()

rotate()方法可以將元素按照順時針進行旋轉(zhuǎn)，如果值為負數(shù)，則按照逆時針旋轉(zhuǎn)。
代碼示例：

div
{
   transform: rotate(30deg);
   -ms-transform: rotate(30deg);        /* IE 9 */
   -webkit-transform: rotate(30deg);    /* Safari and Chrome */
   -o-transform: rotate(30deg);     /* Opera */
   -moz-transform: rotate(30deg);       /* Firefox */
}

scale()

scale()方法可以讓元素成倍的放大或縮小，從寬度和高度兩個方面不同程度的放大或縮小。
代碼示例：

div
{
    transform: scale(2,4);    /* 寬度放大2倍，高度放大4倍 */
   -ms-transform: scale(2,4);   /* IE 9 */
   -webkit-transform: scale(2,4);   /* Safari 和 Chrome */
   -o-transform: scale(2,4);    /* Opera */
   -moz-transform: scale(2,4);  /* Firefox */
}

skew()

skew()方法可以讓元素翻轉(zhuǎn)一定的角度，根據(jù)給定的水平線和垂直線的參數(shù)。
代碼示例：

div
{
  transform: skew(30deg,20deg);        /* 繞x軸旋轉(zhuǎn)30度，繞y軸旋轉(zhuǎn)20度 */
  -ms-transform: skew(30deg,20deg); /* IE 9 */
  -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
  -o-transform: skew(30deg,20deg);  /* Opera */
  -moz-transform: skew(30deg,20deg);    /* Firefox */
}

matrix()

matrix()方法把所有 2D 轉(zhuǎn)換方法組合在一起；matrix() 方法需要六個參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動以及傾斜元素。
代碼示例：

div
{
  transform:matrix(0.866,0.5,-0.5,0.866,0,0);
  -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);       /* IE 9 */
  -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);  /* Firefox */
  -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);   /* Safari and   
    Chrome */
  -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* Opera */
}

兼容

更新中

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS知識

盒子模型

box-sizing

border-radius

box-shadow

居中

水平居中

常規(guī)流內(nèi)聯(lián)元素的居中

常規(guī)流block元素居中

浮動元素的居中

絕對定位元素的居中

方法一

方法二

垂直居中

單行文本垂直居中—line-height方法

內(nèi)聯(lián)元素垂直居中

塊級元素

絕對定位居中

浮動元素垂直居中

絕對定位元素的居中

定位&浮動

position 定位

相對定位

絕對定位

flex布局

浮動

清除浮動

布局

display

詳細的布局可參考這里

CSS3

背景新增屬性

background-size

background-origin

文本新增屬性

2D 轉(zhuǎn)換

translate()

rotate()

scale()

skew()

matrix()

兼容

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av