一、標(biāo)準(zhǔn)流和浮動(dòng)

1.標(biāo)準(zhǔn)流

標(biāo)準(zhǔn)流布局：
在標(biāo)準(zhǔn)流中，塊級(jí)標(biāo)簽是一個(gè)占一行，默認(rèn)寬度是父標(biāo)簽的寬度，默認(rèn)高度是內(nèi)容的高度并且可以設(shè)置寬度和高度。
行內(nèi)標(biāo)簽，一行可以顯示多個(gè)，默認(rèn)寬度和高度都是內(nèi)容的寬度和高度；設(shè)置寬高無效。
行內(nèi)塊標(biāo)簽，一行可以顯示多個(gè)，默認(rèn)寬度和高度都是內(nèi)容的寬度和高度；設(shè)置寬高有效。

塊級(jí)標(biāo)簽：h1-h6，p，hr，ol,ul,dl,li,table,tr,div
行內(nèi)標(biāo)簽：a，img,td,input,select,option,textarea,span

代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>標(biāo)準(zhǔn)流和浮動(dòng)</title>
    </head>
    <body>
        <!-- 解決方案1：使用display-->
        <div style="height: 200px;background-color: chocolate;"></div>
        
        <div style="height: 400px;background-color: yellow;">
            
            <div style="display: inline-block; background: blanchedalmond; ;width: 400px,height:300px;"></div>
            <div style="display: inline-block; background-color: slateblue;width: 400px,height:300px;"></div>
            <div style="display: inline-block; background-color: aqua;width: 400px,height:300px;"></div>
            
        </div>
        
        <div style="height: 200px; background-color: yellowgreen;"></div>
    </body>
</html>

測試結(jié)果

1.PNG

二、display屬性

1.display(設(shè)置標(biāo)簽的性質(zhì))

block -> 將標(biāo)簽設(shè)置為塊級(jí)標(biāo)簽
inline-block -> 將標(biāo)簽設(shè)置為行內(nèi)塊元素(注意：一般不會(huì)通過將標(biāo)簽轉(zhuǎn)換成行內(nèi)塊來解決問題，因?yàn)樾袃?nèi)塊標(biāo)簽在顯示的時(shí)候左右中間會(huì)有不能消除的空隙)
inline -> 將標(biāo)簽設(shè)置為行內(nèi)標(biāo)簽

代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display屬性</title>
    </head>
    <body>
        <a href="" style="display: block; background-color: hotpink;width: 200px;">abc</a>
        <a href="" style="display: inline-block; background-color: darkcyan;width: 300px;">123</a>
        <a href="" style="background-color: darkkhaki;width: 300px;">456</a>
        
        <p style="display: inline; background-color: lightblue;width: 200px;">我是段落1</p>
        <p style="display: inline; background-color: lightblue;">我是段落2</p>
    </body>
</html>

測試結(jié)果

2.PNG

三、float屬性

1.浮動(dòng)原理

a.浮動(dòng)會(huì)讓標(biāo)簽脫離標(biāo)準(zhǔn)流進(jìn)行布局(脫流)。
b.沒有浮動(dòng)的標(biāo)簽既占池底的位置，也占水面位置。浮動(dòng)后只占水面位置。

2.float屬性

left -> 左浮動(dòng)
right -> 右浮動(dòng)

3.脫流后的布局規(guī)則

不管什么標(biāo)簽，脫流后都是一行可以顯示多個(gè)，并且可以設(shè)置寬度和高度。

代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float屬性</title>
        <style type="text/css">
            p{
                background-color: chartreuse;
                float: left;
                width: 200px;
            }
            
            a{
                background-color: sandybrown;
                width: 200px;
                float: left;
            }
            
            /*div{
                width: 200px;
            }*/
        </style>
    </head>
    <body>
        <!--<p>我是段落1</p>
        <p>我是段落2</p>
        <a href="">aaa</a>
        <a href="">aaa</a>
        
        <div style="float: right; background-color: hotpink; height: 300px;">div1</div>
        <div style="background-color: goldenrod; height: 200px">div2</div>
        <div style="float: left; background-color: yellow; height: 400px;">div3</div>-->
        
        <div style="background-color: slateblue;width: 100%;height: 100px;"></div>
        <div style="float:left; background-color: gold;width: 30%;height: 200px;"></div>
        <div style="float: left; background-color:red; width: 60%; height: 200px; "></div>
        <div style="float: right; background-color: greenyellow ;width: 10%;height: 500px;"></div>
        <div style="float: left; background-color: greenyellow ;width: 65%;height: 300px;"></div>
        <div style="float: left; background-color: gold ;width: 25%;height: 300px;"></div>
        <div style="float: left; background-color: black; width: 100%; height: 100px;" ></div>
    </body>
</html>

測試結(jié)果

3.PNG

四、清除浮動(dòng)

1.清除浮動(dòng)

清除浮動(dòng)指的是清除因?yàn)楦?dòng)而產(chǎn)生的高度塌陷問題。

2.高度塌陷

當(dāng)父標(biāo)簽不浮動(dòng)，并且不設(shè)置高度；但是子標(biāo)簽浮動(dòng)的時(shí)候就會(huì)產(chǎn)生高度塌陷問題。

3.清除浮動(dòng)的方法：

a.添加空的div：在父標(biāo)簽的最后添加一個(gè)空的div，并且設(shè)置樣式clear屬性的值為both。
b.在會(huì)塌陷的標(biāo)簽中添加樣式，將overflow屬性的值設(shè)置為hidden。

代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>清除浮動(dòng)</title>
        <style type="text/css">
            #div2{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div style="background-color: hotpink;height: 100px;"></div>
        <div id="div2" style="background-color: yellow;">
            <div style="background-color: peru; width:200px; height: 300px;float: left;"></div>
            <div style="background-color: seagreen; width:200px; height: 200px;float: right;"></div>
            <!--<div style="clear: both;">  </div>-->
        </div>
        <div style="background-color: lightblue;height: 120px;"></div>
    </body>
</html>

測試結(jié)果

4.PNG

五、文字環(huán)繞效果

1.文字環(huán)繞

文字環(huán)繞：被環(huán)繞的標(biāo)簽(例如圖片對(duì)應(yīng)的標(biāo)簽)：浮動(dòng)；文字對(duì)應(yīng)的標(biāo)簽不浮動(dòng)。

代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文字環(huán)繞效果</title>
    </head>
    <body>
        <!-- 圖片對(duì)應(yīng)的塊 -->
        <div style="float:left; background-color: sandybrown;">
            <img src="img/aaa.ico"/>
        </div>
        
        <!-- 文字對(duì)應(yīng)的塊-->
        <div style="background-color: yellow;">
            但愛奇藝創(chuàng)始人兼CEO龔宇有話在前——至少“第三季度可能還無法實(shí)現(xiàn)盈利”，事實(shí)也的確如此。今日凌晨，愛奇藝公布了截至今年9月30日，公司未經(jīng)審計(jì)的第三季度財(cái)報(bào)。財(cái)報(bào)顯示，愛奇藝該季度總營收為人民幣69億元（約合10億美元），同比增長48%；凈虧損為人民幣31億元（約合4.573億美元），去年同期為人民幣11億元，同比擴(kuò)大虧損。
        </div>
    </body>
</html>

測試結(jié)果

5.PNG

六、定位

CSS可以通過left，right，top，bottom來對(duì)標(biāo)簽進(jìn)行定位。前提是設(shè)置好參考對(duì)象。

1.定位屬性：

left -> 標(biāo)簽左邊距
right -> 標(biāo)簽右邊距
top -> 標(biāo)簽上邊距
bottom -> 標(biāo)簽下邊距

注意：
a.定位需要通過position屬性設(shè)置參考對(duì)象。 b.當(dāng)標(biāo)簽的寬度固定的時(shí)候，同時(shí)設(shè)置left和right只有l(wèi)eft有效。 c.可以同時(shí)設(shè)置left和right，不設(shè)置寬度或者寬度值為auto的時(shí)候，標(biāo)簽會(huì)自動(dòng)拉伸。 c.可以同時(shí)設(shè)置top和bottom，不設(shè)置高度或者高度值為auto的時(shí)候，標(biāo)簽會(huì)自動(dòng)拉伸。

2.position

initial -> 默認(rèn)值
static -> 默認(rèn)值，不希望自己的子標(biāo)簽相對(duì)自己定位的時(shí)候才是用

absolute -> 相對(duì)第一個(gè)非static和非initial的父標(biāo)簽進(jìn)行定位
relative -> 相對(duì)于自己在標(biāo)準(zhǔn)流中的位置定位；如果一個(gè)標(biāo)簽希望自己的子標(biāo)簽?zāi)軌蛳鄬?duì)自己定位，就設(shè)置這個(gè)標(biāo)簽的position為relative(自己不定位)。
fixed -> 相對(duì)于瀏覽器定位
sticky -> 粘性定位，只針對(duì)網(wǎng)頁底部的標(biāo)簽定位，如果網(wǎng)頁內(nèi)容超過一屏(需要滾動(dòng))的時(shí)候相對(duì)瀏覽器定位；
否則相對(duì)標(biāo)準(zhǔn)流定位。

代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定位</title>
        <style type="text/css">
            #div1{
            width: 600px;
            height: 600px;
            background-color: hotpink;
            
            }
        
            #div2{
            width: 400px;
            height: 400px;
            background-color: navajowhite;
            /*裁掉自己的子標(biāo)簽超出自己的范圍的部分*/
            overflow: hidden;
            position: relative;
            }
            
            #div3{
            background-color: green;
            
            /*1.absolute定位*/
            /*width: auto;
            height: auto;
            position: absolute;
            left: 50px;
            right: 50px;
            top: 20px;
            bottom: 30px;*/
            
            /*2.relative定位*/
            /*width: 100px;
            height: 100px;
            
            position: relative;
            top: 50px;*/
            
            /*3.fixed定位*/
            /*width: 100px;
            height: 100px;
            position: fixed;
            bottom: 50px;
            right: 50px;*/
            
            /*4.sticky定位*/
            /*width: 100%;
            height: 100px;
            
            position: sticky;
            bottom: 0px;*/
            
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            right: -50px;
            
            }
        </style>
        
    </head>
    <body>
        
        <div id="div1">
            <div id="div2">
                <!--<div style="width: 100px; height: 100px; background-color: honeydew;"></div>-->
                <div id="div3">
                    
                </div>
            </div>
        </div>
        
        <div id="" style="height: 2000px; background-color: slategray;">    
        </div>
        
        <!--<div id="div3">
                    
        </div>-->
    </body>
</html>

測試結(jié)果

6.PNG

七、盒子模型

html中所有可見的標(biāo)簽都是盒子模型。有固定的結(jié)構(gòu)，包括：內(nèi)容、padding、border、margin四個(gè)部分。

1.內(nèi)容

內(nèi)容 -> 可見的，設(shè)置width和height實(shí)質(zhì)就是設(shè)置內(nèi)容的大小，默認(rèn)大小是內(nèi)容；
添加子標(biāo)簽或者設(shè)置文字內(nèi)容都是添加或者顯示在內(nèi)容部分的；
設(shè)置background-color會(huì)作用于內(nèi)容部分。

2.padding

padding -> 可見的，分上下左右四個(gè)部分，一般默認(rèn)都是0；
設(shè)置background-color也會(huì)作用于padding。

3.border

border -> 可見的，分上下左右四個(gè)部分，一般默認(rèn)都是0；
border的背景顏色需要單獨(dú)設(shè)置。

4.margin

margin -> 不可見，按時(shí)占位置；分上下左右四個(gè)部分，一般默認(rèn)是0。

代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style type="text/css">
            #div1{
                /*設(shè)置內(nèi)容部分和padding部分的背景顏色*/
                background-color: hotpink;
                
                /*設(shè)置內(nèi)容的大小*/
                width: 100px;
                height: 100px;
                
                /*設(shè)置padding*/
                /*a.分開設(shè)置*/
                /*padding-left: 50px;
                padding-top: 20px;
                padding-right: 20px;
                padding-bottom: 30px;*/
                
                /*b.一起設(shè)置*/
                padding: 20px; /*同時(shí)設(shè)置四個(gè)padding值都為20px*/
                
                /*3.設(shè)置border*/
                /*
                 border值的格式 -> 線的樣式 顏色 寬度
                 線的樣式： solid(實(shí)線)\double(雙實(shí)線)\dashed(點(diǎn)劃線)\dotted(虛線)
                */
                /*border-left: solid blue 3px;
                border-top: solid yellow 4px;
                border-right: solid yellowgreen 5px;
                border-bottom: solid rosybrown 6px;*/
                
                /*同時(shí)設(shè)置*/
                border: solid lightblue 5px;
                
                /*4.設(shè)置圓角*/
                border-radius: 20px;
                
                /*分開切每個(gè)角的圓角*/
                /*border-top-left-radius: 50px;
                border-bottom-right-radius: 50px;*/
                
                /*5.添加margin*/
                margin-left: 20px;
                margin-top: 30px;
    
            }
        </style>
    </head>
    <body>
        <div id="div1" style="">
            <div id="" style="width: 20px; height: 20px; background-color: yellowgreen;">
                
            </div>
        </div>
        
        姓名：<input type="" name="" id="" value="" style="padding-left: 20px;"/>
    </body>
</html>

測試結(jié)果

7.PNG

8.練習(xí)

代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>練習(xí)</title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 100px;
                background-color: green;
                float: left;
                margin-left: 20px;
                margin-top: 20px;
                
            }
        </style>
    </head>
    <body>
        <div id="" style="width: 360px; height: 100px;" >
            <div id='div1'>a</div>
            <div id='div1'>b</div>
            <div id='div1'>c</div>
            
            <div id='div1'>d</div>
            <div id='div1'>e</div>
            <div id='div1'>f</div>
        </div>
            
    </body>
</html>

測試結(jié)果

8.PNG

八、作業(yè)

代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>作業(yè)</title>
        <style type="text/css">
            #head{
                width: 1208px;
                height: 80px;
                margin: 0 auto;
                overflow: hidden;
            }
            
            #head-left{
                float: left;
                background-color: palevioletred;
            }
            
            #head-right{
                float: right;
                width: 300px;
                height: 80px;
            }
            
            #seek{
                width: 200px;
                margin-left: 20px;
                margin-top: 30px;
                float: right;
            }
            
            #seekbox{
                width: 170px;
                height: 25px;
                padding-left: 10px;
                background-color: #F5F5F5;
            }
            
            #bt{
                width: 1208px;
                height: 50px;
                background-color:black;
                margin: 0 auto;
                
            }
            
            #div1{ 
                width: 150px;
                height: 36px;
                color: white;
                list-style: none;
                float: left;
                padding-top: 13px;
                border-right: solid #696969 1px;
                margin-top: 1px;
            }
            
            #image1{
                width: 1208px; 
                height: 500px;
                background-color: blanchedalmond;
                margin: 0 auto;
            }
            
            #div2{
                width: 1208px;
                height: 200px;
                background-color: darkkhaki;
                margin: 0 auto;
            }
            
            #content1{
                width: 500px;
                height: 200px;
                background-color: #F4A460;
                float: left;
            }
            
            #content2{
                width: 368px;
                height: 200px;
                background-color: #F4A460;
                float: right;
            }
            
            #content3{
                width: 340px;
                height: 200px;
                background-color: #f0f0ef;
                float: right;
            }
            
            #content4{
                width: 500px;
                height: 200px;
                background-color: #f0f0ef;
                float: left;
            }
            
            #content5{
                width: 368px;
                height: 200px;
                background-color: #f0f0ef;
                float: right;
            }
            
            #ct{
                padding-left: 20px;
            }
            
            #bt2{
                padding-top: 20px;
                padding-left: 20px;
                padding-bottom: 20px;
            }
            
            #div3{
                width: 1208px;
                height: 300px;
/*              background-color: blueviolet;*/
                margin: 0 auto;
            }
            
            #image2{
                width:277px;
                height: 170px;
                background-color: red;
                margin-left: 20px;
                float: left;
            }
            
            #bt3{
                padding-top: 20px;
                padding-left: 20px;
                padding-bottom: 5px;
            }
            
            #ct2{
                margin-left: 20px;
                margin-right: 20px;
                padding-top: 10px;
                border-top: solid #DCDCDC 2px;
            }
            
        </style>
    </head>
    <body>
        <div id="head">
            <div id="head-left">
                <img src="img/image1.PNG" width="300px" height="80px"/>
            </div>
            <div id="head-right">
                <div id="seek">
                    <input type="text" id="seekbox" name="" value="" placeholder="SEARCH..." />
                </div>
            </div>
        </div>
        
        <div id="bt" align="center">
            <div id="div1">集團(tuán)介紹</div>
            <div id="div1">產(chǎn)品中心</div>
            <div id="div1">臥龍市場</div>
            <div id="div1">技術(shù)研發(fā)</div>
            <div id="div1">國際合作</div>
            <div id="div1">投資者關(guān)系</div>
            <div id="div1">新聞資訊</div>
            <div id="div1">人力資源</div>
        </div>

        <div id="image1">
            <img src="img/image3.jpg" width="1208px;" height="500px"/>
        </div>
        
        <div id="div2">
            <div id="content1">
                <div id="bt2">
                    新聞資訊
                </div>
                <div id="ct">
                    內(nèi)容
                </div>
            </div>
            <div id="content2">
                <div id="bt2">
                    人才招聘
                </div>
                <div id="ct">
                    內(nèi)容
                </div>
            </div>
            <div id="content3">
                <div id="bt2">
                    臥龍介紹
                </div>
                <div id="ct">
                    內(nèi)容
                </div>
            </div>
        </div>
        <div id="div3">
            <div>
                <div id="bt2">
                    臥龍市場
                </div>
                <div id="image2">
                    <img src="img/image2.PNG" width="277px" height="170px"/>
                </div>
            </div>
            <div>
                <div id="image2">
                    <img src="img/image2.PNG" width="277px" height="170px"/>
                </div>
            </div>
            <div>
                <div id="image2">
                    <img src="img/image2.PNG" width="277px" height="170px"/>
                </div>
            </div>
            <div>
                <div id="image2">
                    <img src="img/image2.PNG" width="277px" height="170px"/>
                </div>
            </div>
        </div>
        <div id="div2">
            <div id="content4">
                <div id="bt3">
                    產(chǎn)品中心
                </div>
                <div id="ct2">
                    內(nèi)容
                </div>
            </div>
            <div id="content5">
                <div id="bt3">
                    技術(shù)研發(fā)
                </div>
                <div id="ct2">
                    內(nèi)容
                </div>
            </div>
            <div id="content3">
                <div id="bt3">
                    營銷網(wǎng)絡(luò)
                </div>
                <div id="ct2">
                    內(nèi)容
                </div>
            </div>
        </div>
    </body>
</html>

測試結(jié)果

1.PNG

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

day24-CSS屬性

一、標(biāo)準(zhǔn)流和浮動(dòng)

1.標(biāo)準(zhǔn)流

代碼

測試結(jié)果

二、display屬性

1.display(設(shè)置標(biāo)簽的性質(zhì))

代碼

測試結(jié)果

三、float屬性

1.浮動(dòng)原理

2.float屬性

3.脫流后的布局規(guī)則

代碼

測試結(jié)果

四、清除浮動(dòng)

1.清除浮動(dòng)

2.高度塌陷

3.清除浮動(dòng)的方法：

代碼

測試結(jié)果

五、文字環(huán)繞效果

1.文字環(huán)繞

代碼

測試結(jié)果

六、定位

1.定位屬性：

2.position

代碼

測試結(jié)果

七、盒子模型

1.內(nèi)容

2.padding

3.border

4.margin

代碼

測試結(jié)果

8.練習(xí)

代碼

測試結(jié)果

八、作業(yè)

代碼

測試結(jié)果

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频