04 - CSS3知識(shí)點(diǎn)匯總二

本文是針對(duì)剛學(xué)編程的小白,都是一些基礎(chǔ)知識(shí),如果想了解更多深層一點(diǎn)的東西,歡迎移步本人博客!!

博客地址點(diǎn)擊跳轉(zhuǎn)

文章中我所提到的快捷鍵是用的webstrom編輯器,如果你用的不是webstrom的話,那你也改成webstorm吧,初學(xué)者還是用這款編輯器比較好

背景相關(guān)的所有屬性

背景顏色

示例代碼 :

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: rgb(0,255,0);
        }
        .box3{
            background-color: rgba(0,0,255,1);
        }
        .box4{
            background-color: #0ff;
            opacity: 0.5;
        }
    </style>

背景圖片

如何設(shè)置背景圖片
background-image:url();的屬性專門設(shè)置背景圖片
注意點(diǎn):

1.圖片地址必須放在url中圖片的地址可以是本地的也可以是外部鏈接的
2.如果網(wǎng)頁(yè)上出現(xiàn)了圖片瀏覽器會(huì)再次發(fā)送請(qǐng)求獲取圖片
3.如果圖片沒有指定的寬高那么大的話那么他會(huì)自動(dòng)拉伸平鋪

示例代碼 :

<div class="box1"></div>
    <style>
        div{
            width: 400px;
            height: 400px;
        }
        .box1{
            background-image: url(images/girl.jpg);
            /*background-image: url(https://www.baidu.com/img/bd_logo1.png);*/

        }
    </style>

背景平鋪

在CSS中有一個(gè)background-repeat屬性
取值:

**1.repeat:默認(rèn) 在水平和垂直都需要平鋪
2.no-repeat:在水平和垂直都不需要平鋪
3.repeat-x:水平平鋪

4.repeat-y:垂直平鋪**

示例代碼 :

<div class="box1"></div>
    <style>
        div{
            width: 500px;
            height: 500px;
        }
        .box1{
            background-image: url(images/girl.jpg);
            background-repeat: repeat-x;
        }
        body{
            background-image: url(images/bg2.jpg);
        }
    </style>

背景定位屬性

CSS中有個(gè)background-position: 0 0;屬性專門控制背景圖片位置
格式:
background-position: 水平方向垂直方向;
取值

具體的方位名稱
1.水平方向:left center right
2.垂直方向:top bottom center
具體的像素
1.background-position: 100px 200px;
2.一定要記住寫單位(px) 可以寫負(fù)值

注意點(diǎn):
同一個(gè)標(biāo)簽可以同時(shí)設(shè)置背景顏色和背景圖片如果同時(shí)存在那么圖片會(huì)覆蓋顏色
示例代碼 :

<div class="box1"></div>
    <style>
        div{
            width: 500px;
            height: 500px;
        }
        .box1{
            background-color: green;
            background-image: url(images/girl.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            background-position: 100px 200px;
            background-position: -20px -50px;
        }
        body{
            background-repeat: no-repeat;
            background-image: url(images/yxlm.jpg);
            background-position: center 0;
        }
    </style>

背景定位屬性

背景的縮寫

格式
background：背景顏色背景圖片平鋪方式關(guān)聯(lián)方式定位方式眷蜓；
background: green url(images/girl.jpg) no-repeat left bottom;
注意點(diǎn):
background屬性中任何一個(gè)屬性都可以被省略
什么是背景的關(guān)聯(lián)方式
默認(rèn)情況下背景圖片會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng) 那么我們就可以修改背景圖片和滾動(dòng)條的關(guān)聯(lián)方式
如何修改背景的關(guān)聯(lián)方式
CSS中有個(gè)background-attachment屬性來(lái)修改關(guān)聯(lián)方式
格式:
background-attachment:fixed;
取值:
fixed: 不會(huì)隨著滾動(dòng)而滾動(dòng)
scroll: 會(huì)隨著滾動(dòng)條而滾動(dòng)
示例代碼 :

    <style>
        div{

            width: 500px;
            height: 500px;
            background-color: green;
            background-image: url(images/girl.jpg);
            background-repeat: no-repeat;
            background-position: left bottom;
            background: green url(images/girl.jpg) no-repeat left bottom;
        }
        body{
            background-image: url(images/girl.jpg);
            background-repeat: no-repeat;
            background-attachment:fixed;
        }
    </style>

背景圖片和插入圖片區(qū)別

區(qū)別:
1.背景圖片僅僅是一個(gè)裝飾不會(huì)占用位置插入圖片會(huì)占用一個(gè)位置
2.背景圖片有定位屬性很方便的控制圖片的位置
3.插入圖片沒有定位屬性控制不了圖片的位置
4.插入圖片的語(yǔ)義比背景圖片的語(yǔ)義要強(qiáng) 所以在企業(yè)開發(fā)中如果你的圖片想被搜索引擎收錄
示例代碼 :

<div class="box1">我是文字</div>
<div class="box2">
    ![](images/girl.jpg)
    我是文字
</div>
    <style>
        div{
            /*width: 150px;*/
            /*height: 170px;*/
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .box1{
            background-image: url(images/girl.jpg);
            background-repeat:no-repeat;
            background-position: right bottom;
        }
    </style>

CSS精靈圖

CSS的精靈圖是一種合成技術(shù)

CSS精靈圖的作用

可以減少請(qǐng)求的次數(shù) 可以降低服務(wù)器處理的壓力

如果使用CSS精靈圖

CSS的精靈圖需要配合背景圖片和背景定位來(lái)使用
示例代碼 :

div class="box1"></div>
    <style>
        div{
            width: 86px;
            height: 28px;
            background-image: url(images/weibo.png);
            background-position: -425px -200px;
        }
    </style>

**精靈圖**

精靈圖

邊框?qū)傩?

邊框就是環(huán)繞在標(biāo)簽寬度和高度周圍的線條

格式

連寫(同時(shí)設(shè)置四條邊的邊框)
border:邊框的寬度邊框的樣式邊框的顏色;
快捷鍵:
bd+ border: 1px solid #000;
注意點(diǎn):

1.連寫格式中顏色可以省略默認(rèn)是黑色
2.連寫格式中樣式不可以省略省略之后就看不到邊框了
3.連寫格式中寬度可以省略省略之后還是可以看到
4.連寫(分別設(shè)置四條邊的邊框)
**border-top:邊框的寬度邊框的樣式邊框的顏色;
border-bottom:邊框的寬度邊框的樣式邊框的顏色;
border-left:邊框的寬度邊框的樣式邊框的顏色;
border-right:邊框的寬度邊框的樣式邊框的顏色;
快捷鍵:
bt+
br+
bb+
bl+
**

示例代碼 :

<div class="box1"></div>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color:red;
            /*border: 5px solid blue;*/
            border-top: 5px solid yellow;
            border-right: 10px dashed green;
            border-bottom: 15px dotted purple;
            border-left: 20px double pink;
        }
    </style>

邊框

邊框?qū)傩?

連寫(分別設(shè)置四條邊的邊框)

border-width: 上右下左
border-style: 上右下左
border-color: 上右下左

注意點(diǎn):

**1.這三個(gè)屬性的取值是按照順時(shí)針賦值的也就是按照上右下左
2.這三個(gè)屬性的取值省略時(shí)的規(guī)律
2.1 上右下左 > 上右下 > 左邊的取值和右邊的一樣
2.2 上右下左 > 上右 > 左邊的取值和右邊的一樣下邊的和上邊的一樣
2.3 上右下左 > 上 > 右下左和上邊的一樣
**

非連寫(方向+樣式)

border-top-width:;
border-top-style:;
border-top-color: #000;
以此類推 ..

示例代碼 :

<div class="box"></div>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*border-width: 5px 10px 15px 20px;*/
            /*border-style:solid dashed dotted double;*/
            /*border-color: blue green purple pink;*/
            border-top-width:;
            border-top-style:;
            border-top-color: #000;
        }
    </style>

內(nèi)邊距屬性

邊框和內(nèi)容之間的距離就是內(nèi)邊距

格式
非連寫
padding-top
padding-bottom
padding-right
padding-left
連寫
padding:上右下左
這三個(gè)屬性的取值省略時(shí)的規(guī)律
2.1 上右下左 > 上右下 > 左邊的取值和右邊的一樣
2.2 上右下左 > 上右 > 左邊的取值和右邊的一樣下邊的和上邊的一樣
2.3 上右下左 > 上 > 右下左和上邊的一樣
注意點(diǎn):

1.給標(biāo)簽設(shè)置內(nèi)邊之后標(biāo)簽占有的原有寬度和高度會(huì)發(fā)生變化
2.給標(biāo)簽設(shè)置背景顏色內(nèi)邊距也會(huì)有背景顏色

外邊距屬性

標(biāo)簽和標(biāo)簽之間的距離就是外邊距

格式
非連寫
margin-top:;
margin-right:;
margin-bottom:;
margin-left:;
連寫
margin:上右下左;
這三個(gè)屬性的取值省略時(shí)的規(guī)律
2.1 上右下左 > 上右下 > 左邊的取值和右邊的一樣
2.2 上右下左 > 上右 > 左邊的取值和右邊的一樣下邊的和上邊的一樣
2.3 上右下左 > 上 > 右下左和上邊的一樣
注意點(diǎn):
外邊距的那一部分是沒有背景顏色的

外邊距的合并現(xiàn)象

在默認(rèn)布局的垂直方向默認(rèn)情況下外邊距是不會(huì)疊加的會(huì)出現(xiàn)合并現(xiàn)象誰(shuí)的外邊距比較大就顯示誰(shuí)的注意點(diǎn):在盒子浮動(dòng)的時(shí)候脫離標(biāo)準(zhǔn)流的時(shí)候他們的外邊距在垂直方向是疊加的
示例代碼 :

<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1"></div>
<div class="box2"></div>
    <style>
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        .hezi1{
            margin-right: 50px;

        }
        .hezi2{
            margin-left: 100px;
        }
        .box1{
            margin-bottom:50px;

        }
        .box2{
            margin-top: 100px;
        }
    </style>

盒子模型

盒子只是一個(gè)形象的比喻在HTML中所有的標(biāo)簽都是盒子

結(jié)論:

在HTML中所有的標(biāo)簽都可以設(shè)置
寬度/高度 == 指定可以存放內(nèi)容區(qū)域
內(nèi)邊距 == 填充物
邊框 == 手機(jī)盒子自己
外邊距 == 盒子與盒子之間的間隙

示例代碼 :

<span>我是Span</span>
<a href="#">我是超鏈接</a>
<b>我是加粗</b>
<strong>我是強(qiáng)調(diào)</strong>
    <style>
        span,a,b,strong{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 5px solid #000;
            margin: 20px;
            padding: 20px;
        }
    </style>

盒子模型

盒子模型寬度和高度

內(nèi)容的寬度和高度

通過(guò)標(biāo)簽的width和height屬性設(shè)置的寬度和高度

元素的寬度和高度

寬度 = 左邊的邊框+內(nèi)邊距+內(nèi)容的寬度+右邊內(nèi)邊距+右邊邊框
高度同理可證

元素空間的寬度和高度

寬度 = 左邊的外邊距+左邊框+左內(nèi)邊距+內(nèi)容的寬度

盒子的box-sizing屬性

示例代碼 :

<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>
    <style>
        .content{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .aside{
            width: 100px;
            height: 200px;
            background-color: green;
            float: left;
        }
        .article{
            /*
            1.CSS3中新增了一個(gè)box-sizing屬性 這個(gè)屬性可以保證我們給盒子新增padding和border之后 盒子元素的自身寬度和高度不會(huì)發(fā)生改變
            2.box-sizing屬性是如何保證盒子的padding和border之后.盒子元素的寬度和高度不變
            原理還是減去內(nèi)容的寬度和高度
            3.box-sizing
            3.1 content-box
            元素的寬高 = 邊框 + 內(nèi)邊距 + 內(nèi)容寬高
            3.2 border-box
            元素的寬高 = width屬性
            */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: blue;
            float: right;
            border: 20px solid #000;
            padding: 20px;
        }

    </style>

盒子居中和內(nèi)容居中

1.text-align:center;和margin:0 auto;之間的區(qū)別
1.1 text-align: center;
作用:設(shè)置盒子中存儲(chǔ)的文字和圖片水平居中
2.margin: 0 auto;
作用:讓盒子自己居中
注意點(diǎn):
2.1 使用margin:0 auto;的盒子必須要width 有明確的width 如果沒有的話就通欄了
2.2 只有標(biāo)準(zhǔn)流的盒子才能使用 margin:0 auto; 浮動(dòng)流和定位流都不能使用

<div class="father">
    我是文字<br>
    ![](images/girl.jpg)
    <div class="son"></div>
    <style>
        .father{
            width: 800px;
            height: 500px;
            background-color: green;
            text-align: center;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 0 auto;
        }
    </style>

- #### 清空默認(rèn)邊距

1.為什么清空默認(rèn)邊距(外邊距和內(nèi)邊距)
在企業(yè)開發(fā)中為了更好的控制盒子的寬高和計(jì)算盒子的寬高所以在開發(fā)中編寫代碼之前第一件事就是清空系統(tǒng)默認(rèn)的邊距
2.格式:

        *{
            margin: 0;
            padding: 0;
        }

3.注意點(diǎn):
3.1 通配符的選擇器會(huì)遍歷當(dāng)前界面中所有的標(biāo)簽所以性能不好
3.2 企業(yè)開發(fā)中可以直接在這個(gè)網(wǎng)站中拷貝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

    <style>
        /*
        *{
            margin: 0;
            padding: 0;
        }
        */
        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;
        }
        p{
            width: 610px;
            height: 110px;
            background-color: #cdcdcd;
            border: 1px solid #020202;
        }
    </style>

- #### 行高和字號(hào)

1.什么是行高
在CSS中所有的行都有它自己的行高
注意點(diǎn):
行高和盒子的高不是同一個(gè)概念
規(guī)律:
文字在行高中是默認(rèn)垂直居中的
在企業(yè)開發(fā)中我們經(jīng)常把盒子的高度和文字的行高設(shè)置成一樣這樣可以保證一行文字在盒子的高度中垂直居中簡(jiǎn)言而之就是要想一行文字在盒子中垂直居中那么只需要設(shè)置這行文字的行高即可
在企業(yè)開發(fā)中如果一個(gè)盒子中有多行文字那么我們就不能通過(guò)設(shè)置盒子高等于行高來(lái)實(shí)現(xiàn)文字垂直居中只能通過(guò)padding來(lái)實(shí)現(xiàn)居中

    <style>
        /*
        *{
            margin: 0;
            padding: 0;
        }
        */
        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;
        }
        p{
            width: 610px;
            height: 110px;
            background-color: #cdcdcd;
            border: 1px solid #020202;
        }
        div{
            box-sizing: border-box;
            width: 100px;
            height: 80px;
            border: 1px solid #000;
            /*line-height: 80px;*/
            line-height: 20px;
            padding-top: 20px;
            padding-bottom: 20px;

        }
    </style>

- #### 還原字體和字號(hào)

注意點(diǎn):
1.在企業(yè)開發(fā)中如果一個(gè)盒子中存儲(chǔ)的是文字那么一般情況下我們會(huì)以盒子左邊的內(nèi)邊距為準(zhǔn) 因?yàn)橛疫叺膬?nèi)邊距有誤差
2.誤差就是當(dāng)右邊的文字和邊框之間的距離不夠存放一個(gè)文字的時(shí)候就會(huì)自動(dòng)換行所以導(dǎo)致的誤差
3.頂部的內(nèi)邊距并不是從邊框到文字頂部的距離而是從邊框到行高頂部的距離

    <style>
        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;
        }
        p{
            box-sizing: border-box;
            width: 610px;
            height: 110px;
            background-color: #cdcdcd;
            border: 1px solid #020202;
            font-family:"黑體";
            font-size: 20px;
            line-height: 40px;
            color: #67676d;
            padding: 10px;
        }
    </style>

- #### 文章界面

<div>
    <h1>我是標(biāo)題/<span>New Articles</span>></h1>
    <ul>
        <li>我是第一行,我是第一行</li>
        <li>我是第二行,我是第一行</li>
        <li>我是第三行,我是第一行</li>
        <li>我是第四行,我是第一行</li>
        <li>我是第五行,我是第一行</li>
    </ul>
</div>
    <style>
     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;
        }
        body{
            background-color: #efefef;
        }
        div{
            box-sizing: border-box;
            width: 372px;
            height: 232px;
            border: 1px solid #666;
            margin: 0 auto;
            padding: 15px;
        }
        h1{
            font-family:"微軟雅黑";
            font-size: 18px;
            border-bottom: 1px solid #666;
            padding-bottom:10px;
        }
        span{
            font-size: 14px;
        }
        ul{
            list-style:none;
            margin-top: 10px;
        }
        ul li{
            line-height:30px;
            border-bottom: 1px dashed #666;
            font-family:"微軟雅黑";
            font-size:12px;
            color: #242424;
            padding-left:20px;
        }
    </style>

文章界面

- #### 網(wǎng)頁(yè)布局方式

1.什么是網(wǎng)頁(yè)布局方式
就是指瀏覽器是如何對(duì)網(wǎng)頁(yè)中的元素進(jìn)行排版的
1.標(biāo)準(zhǔn)流(文檔流/普通流)的排版方式
1.1 瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)流
1.2 在CSS中元素分為三類塊級(jí)/行內(nèi)/行內(nèi)塊級(jí)
1.3 標(biāo)準(zhǔn)流中有兩種排版方式垂直(塊級(jí)標(biāo)簽都是垂直排版)和水平(行內(nèi)和行內(nèi)塊級(jí)都是水平)排版
2.浮動(dòng)流的排版方式
2.1 浮動(dòng)流是一種半脫離標(biāo)準(zhǔn)流的排版方式
2.2 浮動(dòng)流只有一種排版方式就是水平排版只能設(shè)置某個(gè)元素的左對(duì)齊和右對(duì)齊
```
注意點(diǎn):
```

1.沒有居中對(duì)齊 沒有center取值
2.在浮動(dòng)流中不可以使用margin:0 auto;的 是無(wú)效的

```
特點(diǎn):
```

1.在浮動(dòng)流中是不區(qū)分 塊級(jí)標(biāo)簽/行內(nèi)標(biāo)簽/行內(nèi)塊級(jí)標(biāo)簽 都可以水平排版
2.在浮動(dòng)流中無(wú)論是塊級(jí)標(biāo)簽/行內(nèi)標(biāo)簽/行內(nèi)塊級(jí)標(biāo)簽都可以設(shè)置寬高
3.綜上所述 浮動(dòng)流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級(jí)元素很像\

3.定位流的排版方式

<div class="box1"></div>
<div class="box2"></div>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            display: inline-block;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            display: inline-block;
            float: right;
        }
    </style>

- #### 浮動(dòng)元素的脫標(biāo)

1.什么是浮動(dòng)元素脫標(biāo)
脫標(biāo):脫離標(biāo)準(zhǔn)流
當(dāng)某個(gè)元素浮動(dòng)之后那這個(gè)元素看上去就像被從標(biāo)準(zhǔn)流刪除一樣這就是浮動(dòng)元素脫標(biāo)
2.浮動(dòng)元素脫標(biāo)之后會(huì)有什么影響
如果前面一個(gè)元素浮動(dòng)了而后面一個(gè)元素沒有浮動(dòng) 那么這時(shí)候前面的一個(gè)元素就會(huì)蓋住后面的一個(gè)

<div class="box1"></div>
<div class="box2"></div>
    <style>
        .box1{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: blue;
        }
    </style>

脫標(biāo)的盒子

- #### 浮動(dòng)元素的排序規(guī)則

1.浮動(dòng)元素的排序規(guī)則
1.1 相同方向上的浮動(dòng)元素先浮動(dòng)的元素會(huì)顯示在前面后浮動(dòng)的元素會(huì)顯示在后面
1.2 不同方向上的浮動(dòng) 左浮動(dòng)會(huì)找左浮動(dòng) 右浮動(dòng)會(huì)找右浮動(dòng)
1.3 浮動(dòng)元素浮動(dòng)之后的位置由浮動(dòng)元素浮動(dòng)之前的標(biāo)準(zhǔn)流的位置來(lái)確定

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
    <style>
        .box1{
            width: 50px;
            height: 50px;
            background-color: red;
            float: left;
        }
        .box2{
            /*float: left;*/
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .box4{
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>

浮動(dòng)的排序規(guī)則

- #### 浮動(dòng)元素的貼靠現(xiàn)象

<div class="father">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>
    <style>
        .father{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        .box1{
             float: left;
             width: 50px;
             height: 300px;
             background-color: red;
         }
        .box2{
            float: left;
            width: 50px;
            height: 100px;
            background-color: green;
        }
        .box3{
            float: left;
            width: 250px;
            height: 100px;
            background-color: blue;
        }
    </style>

浮動(dòng)元素的貼靠

- #### 浮動(dòng)元素字圍現(xiàn)象

![](images/picture.jpg)<p>養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)賬空賬率超九成 將來(lái)兌現(xiàn)或入不敷出養(yǎng)老金個(gè)</p>
    <style>
        div{
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
        }
        p{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        img{
            float: left;
        }
    </style>

自圍現(xiàn)象

- #### 浮動(dòng)練習(xí)

<div class="header">
    <div class="logo"></div>
    <div class="language"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="aside"></div>
    <div class="article">
        <div class="articleTop">
            <div class="articleTopLeft">
                <div class="xinwen1"></div>
                <div class="xinwen2"></div>
            </div>
            <div class="articleTopRight"></div>
        </div>
        <div class="articleBottom"></div>
    </div>
</div>
<div class="footer"></div>
    <style>
        body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 980px;
            height: 100px;
            margin: 0 auto;
        }
        .header .logo{
            float: left;
            width: 250px;
            height: 100px;
            background-color: pink;
        }
        .header .language{
            float: right;
            width: 150px;
            height: 50px;
            background-color: skyblue;
        }
        .header .nav{
            float: right;
            width: 650px;
            height: 50px;
            background-color: purple;
        }
        .content{
            width: 980px;
            height: 400px;
            margin: 0 auto;
            margin-top: 10px;
        }
        .content .aside{
            float: left;
            width: 320px;
            height: 400px;
            background-color: yellow;
        }
        .content .article{
            float: right;
            width: 650px;
            height: 400px;
        }
        .content .article .articleTop{
            width: 650px;
            height: 350px;
        }
        .content .article .articleTop .articleTopLeft{
            width: 400px;
            height: 350px;
            float: left;
        }
        .content .article .articleTop .articleTopLeft .xinwen1{
            width: 400px;
            height: 200px;
            background-color: deepskyblue;
        }
        .content .article .articleTop .articleTopLeft .xinwen2{
            width: 400px;
            height: 140px;
            background-color: deeppink;
            margin-top: 10px;
        }
        .content .article .articleTop .articleTopRight{
            width: 240px;
            height: 350px;
            background-color: blueviolet;
            float: right;
        }
        .content .article .articleBottom{
            width: 650px;
            height: 40px;
            background-color: brown;
            margin-top: 10px;
        }
        .footer{
            width: 980px;
            height: 40px;
            background-color: tomato;
            margin: 0 auto;
            margin-top: 10px;
        }
    </style>

浮動(dòng)練習(xí)

書山有路勤為徑學(xué)海無(wú)涯苦作舟

更多精彩內(nèi)容請(qǐng)點(diǎn)擊跳轉(zhuǎn)

最后編輯于：2017.12.06 01:40:58

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末隔崎，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌耕驰，老刑警劉巖痰驱，帶你破解...
沈念sama閱讀 218,941評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異晕翠，居然都是意外死亡喷舀，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,397評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門淋肾，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)硫麻，“玉大人，你說(shuō)我怎么就攤上這事樊卓∧美ⅲ” “怎么了？”我有些...
開封第一講書人閱讀 165,345評(píng)論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵碌尔，是天一觀的道長(zhǎng)浇辜。經(jīng)常有香客問(wèn)我券敌，道長(zhǎng)，這世上最難降的妖魔是什么柳洋？我笑而不...
開封第一講書人閱讀 58,851評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任待诅，我火速辦了婚禮，結(jié)果婚禮上熊镣，老公的妹妹穿的比我還像新娘卑雁。我一直安慰自己，他們只是感情好绪囱，可當(dāng)我...
茶點(diǎn)故事閱讀 67,868評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布测蹲。她就那樣靜靜地躺著，像睡著了一般毕箍。火紅的嫁衣襯著肌膚如雪弛房。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,688評(píng)論 1贊 305
城市分裂傳說(shuō)
那天而柑，我揣著相機(jī)與錄音文捶，去河邊找鬼。笑死媒咳，一個(gè)胖子當(dāng)著我的面吹牛粹排，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播涩澡，決...
沈念sama閱讀 40,414評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼顽耳，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了妙同？” 一聲冷哼從身側(cè)響起射富，我...
開封第一講書人閱讀 39,319評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎粥帚，沒想到半個(gè)月后胰耗，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,775評(píng)論 1贊 315
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡芒涡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,945評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年柴灯，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片费尽。...
茶點(diǎn)故事閱讀 40,096評(píng)論 1贊 350
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡赠群，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出旱幼，到底是詐尸還是另有隱情查描，我是刑警寧澤，帶...
沈念sama閱讀 35,789評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站冬三，受9級(jí)特大地震影響鸯两，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜长豁，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,437評(píng)論 3贊 331
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望忙灼。院中可真熱鬧匠襟，春花似錦、人聲如沸该园。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,993評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)里初。三九已至啃勉，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間双妨，已是汗流浹背淮阐。一陣腳步聲響...
開封第一講書人閱讀 33,107評(píng)論 1贊 271
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留刁品，地道東北人泣特。一個(gè)月前我還...
沈念sama閱讀 48,308評(píng)論 3贊 372
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像挑随，于是被迫代替她去往敵國(guó)和親状您。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,037評(píng)論 2贊 355

04 - CSS3知識(shí)點(diǎn)匯總二

本文是針對(duì)剛學(xué)編程的小白,都是一些基礎(chǔ)知識(shí),如果想了解更多深層一點(diǎn)的東西,歡迎移步本人博客!!

博客地址 點(diǎn)擊跳轉(zhuǎn)

文章中我所提到的快捷鍵是用的webstrom編輯器,如果你用的不是webstrom的話,那你也改成webstorm吧,初學(xué)者還是用這款編輯器比較好

背景相關(guān)的所有屬性

背景顏色

背景圖片

背景平鋪

背景定位屬性

背景的縮寫

背景圖片和插入圖片區(qū)別

CSS精靈圖

CSS的精靈圖是一種合成技術(shù)

CSS精靈圖的作用

如果使用CSS精靈圖

邊框?qū)傩?

邊框就是環(huán)繞在標(biāo)簽寬度和高度周圍的線條

格式

邊框?qū)傩?

連寫(分別設(shè)置四條邊的邊框)

非連寫(方向+樣式)

內(nèi)邊距屬性

邊框和內(nèi)容之間的距離就是內(nèi)邊距

外邊距屬性

標(biāo)簽和標(biāo)簽之間的距離就是外邊距

外邊距的合并現(xiàn)象

盒子模型

盒子只是一個(gè)形象的比喻 在HTML中所有的標(biāo)簽都是盒子

盒子模型寬度和高度

內(nèi)容的寬度和高度

元素的寬度和高度

元素空間的寬度和高度

盒子的box-sizing屬性

盒子居中和內(nèi)容居中

書山有路勤為徑 學(xué)海無(wú)涯苦作舟

更多精彩內(nèi)容 請(qǐng)點(diǎn)擊跳轉(zhuǎn)

推薦閱讀更多精彩內(nèi)容

博客地址點(diǎn)擊跳轉(zhuǎn)

盒子只是一個(gè)形象的比喻在HTML中所有的標(biāo)簽都是盒子

書山有路勤為徑學(xué)海無(wú)涯苦作舟

更多精彩內(nèi)容請(qǐng)點(diǎn)擊跳轉(zhuǎn)