CSS基礎part2

時間  2019-12-10
標籤 css 基礎 part2 欄目 CSS 简体版
原文   原文鏈接

CSS屬性操做-文本css

文本顏色html

<head>
    <style>
        p{
            /*color:#8B5742 ;色碼錶*/    
            color: RGBA(255,0,0,0.5);    /*調色，紅綠藍透明度*/
            /*color: blue;顏色名*/
        }
    </style>
</head>
<body>
    <p>i am p</p>
</body>

 

水平對齊方式：text-align 屬性規定元素中的文本的水平對齊方式python

<head>
    <style>
        div{
            /**/
            /*width: 100%;*/
            /*height: 300px;*/
            /*line-height: 300px;*/
            text-align: center;     /*居中顯示*/
            /*text-align: left;居左顯示*/
            /*text-align: right;居右顯示*/
            /*text-align:justify;兩端對齊*/
        }
    </style>
</head>
<body>
    <div>Everyone has their own dreams, I am the same. But my dream is not a lawyer, not a doctor, not actors, not even an industry. Perhaps my dream big people will find it ridiculous, but this has been my pursuit! My dream is to want to have a folk life! I want it to become a beautiful painting, it is not only sharp colors, but also the colors are bleak, I do not rule out the painting is part of the black, but I will treasure these bleak colors! Not yet, how about, a colorful painting, if not bleak, add color, how can it more prominent American? Life is like painting, painting the bright red color represents life beautiful happy moments. Painting a bleak color represents life difficult, unpleasant time. You may find a flat with a beautiful road is not very good yet, but I do not think it will. If a person lives flat then what is the point? Life is only a short few decades, I want it to go Finally, Each memory is a solid.</div>
</body>

 

文本其餘屬性api

<!--font-size: 10px; 　　字體大小-->

<!--line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比，底線基線中線頂線概念-->

<!--vertical-align:－4px  設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效-->

<!--text-decoration:none       text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除連接的下劃線-->

<!--font-family: 'Lucida Bright'    字體-->

<!--font-weight: lighter/bold/border/   字體寬度-->

<!--font-style: oblique 　　字體樣式斜體-->

<!--text-indent: 150px;      首行縮進150px-->

<!--letter-spacing: 10px;  字母間距-->

<!--word-spacing: 20px;  單詞間距-->

<!--text-transform: capitalize/uppercase/lowercase ; 　　文本轉換，用於全部字句變成大寫或小寫字母，或每一個單詞的首字母大寫-->

 

CSS屬性操做-背景屬性瀏覽器

<head>
    <style>
        .c1{
            border: 1px solid red;      /*邊框：1像素、實線、紅色*/
            /*   背景色*/
            width: 100%;
            height: 600px;
            background-image: url("http://dig.chouti.com//images/logo.png");      /*背景圖片*/
            background-repeat: no-repeat;     /*平鋪方式，默認橫向縱向同時鋪*/
            background-position:center center;     /*對齊方式，居中。 */
            /*background: url("http://dig.chouti.com//images/logo.png") no-repeat center center;  簡寫方式*/
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>right top（20px20px）

 

CSS屬性操做-邊框屬性app

<head>
    <style>
        .c1{
            width: 100px;
            height: 200px;
            /*border-style: dashed;     類型*/
            /*border-color: red;    紅色*/
            /*border-width: 5px;    寬度*/
            /*border:3px dashed red;    簡寫方式：寬度、類型、顏色*/
            border-right: 3px dashed red;   /*單獨的方向*/
　　　　　　　/*border-radius： 20%  圓潤*/
            /*border-top-style:dotted;*/
            /*border-right-style:solid;*/
            /*border-bottom-style:dotted;*/
            /*border-left-style:none;*/
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>

 

CSS屬性操做-列表屬性ide

<head>
    <style>
        ul{
            /*list-style-type: square;    列表項標誌類型*/
            /*list-style-image: url("a.jpg");     將圖像設置爲列表項標誌*/
            /*list-style-position：inside;   !*默認outside，設置列表中列表項標誌的位置。*!*/
            list-style: none;   /*簡寫屬性，設置爲空*/
        }
    </style>
</head>
<body>
<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
</ul>
</body>

 

補充：a標籤錨：相似於目錄的跳轉佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .chapter1{
            width: 100%;
            height: 800px;
            background-color: wheat;
        }

         .chapter2{
            width: 100%;
            height: 800px;
            background-color: green;
        }
         .chapter3{
            width: 100%;
            height: 800px;
            background-color: goldenrod;
        }
    </style>
</head>
<body>

    <ul>
        <li><a href="#c1">第一章</a></li>
        <li><a href="#c2">第二章</a></li>
        <li><a href="#c3">第三章</a></li>
    </ul>
    <div class="chapter1" id="c1">第一章</div>
    <a href="#">返回</a>
    <div class="chapter2" id="c2">第二章</div>
    <div class="chapter3" id="c3">第三章</div>
    <a href="#">返回</a>
</body>
</html>

 

 

CSS屬性操做-display屬性字體

隱藏標籤網站

p{display:none;}

注意與visibility:hidden的區別：

visibility:hidden能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

display:none能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。

 

內聯標籤設置爲塊級標籤

span{display:block;}

注意：一個內聯元素設置爲display:block是不容許有它內部的嵌套塊元素。

 

塊級標籤設置爲內聯標籤

li{display:inline;}

 

 

lnline-block佈局

經過display:inline-block對一個對象指定inline-block屬性，能夠將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。

display:inline-block可作列表佈局，其中的相似於圖片間的間隙小bug能夠經過以下設置解決：

outer{
            border: 3px dashed;
            word-spacing: -5px;
        }

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }
        .c1{
            width: 100px;
            height: 200px;
            background-color: darkorange;
            display: inline-block;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: green;
            /*display: none;*/
            display: inline-block;
            margin-left: -6px;
        }
        .c3{
            width: 300px;
            height: 200px;
            background-color: rebeccapurple;
            display: inline-block;
            margin-left: -6px;
        }

        ul li{
            list-style: none;
        }
        ul li a{
            width: 20px;
            height: 20px;
            float: left;
            padding: 20px;
            margin-left: 5px;
            background-color: wheat;

        }
    </style>

</head>


<body>
<a class="c1"></a>
<div class="c2"></div>
<div class="c3"></div>

<ul>
    <li class="item"><a href="">1</a></li>
    <li class="item"><a href="">2</a></li>
    <li class="item"><a href="">3</a></li>
    <li class="item"><a href="">4</a></li>
    <li class="item"><a href="">5</a></li>
    <li class="item"><a href="">6</a></li>
    <li class="item"><a href="">7</a></li>
    <li class="item"><a href="">8</a></li>
</ul>
</body>
</html>
lnline-block示例

 

 

CSS屬性操做-外邊距和內邊距

盒子模型

margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。

padding: 用於控制內容與邊框之間的距離；

Border(邊框): 圍繞在內邊距和內容外的邊框。

Content(內容): 盒子的內容，顯示文本和圖像。

margin屬性

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
單邊外邊距屬性 
margin:10px 20px 20px 10px；

        上邊距爲10px
        右邊距爲20px
        下邊距爲20px
        左邊距爲10px

margin:10px 20px 10px;

        上邊距爲10px
        左右邊距爲20px
        下邊距爲10px

margin:10px 20px;

        上下邊距爲10px
        左右邊距爲20px

margin:25px;

        全部的4個邊距都是25px
簡寫屬性

居中：margin: 0 auto;

 

padding屬性

單獨使用填充屬性能夠改變上下左右的填充。縮寫填充屬性也可使用，一旦改變一切都改變。

設置同margine；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer{
            margin: 0 auto;
            width: 80%;

        }

        .content{
            background-color: darkgrey;
            height: 500px;

        }

        a{
            text-decoration: none;
        }

        .page-area{

            text-align: center;
            padding-top: 30px;
            padding-bottom: 30px;
            background-color: #f0ad4e;

        }

        .page-area ul li{
            display: inline-block;
        }


       .page-area ul li a ,.page-area ul li span{

            display: inline-block;
            color: #369;
            height: 25px;
            width: 25px;
            text-align: center;
            line-height: 25px;

            padding: 8px;
            margin-left: 8px;

            border: 1px solid #e1e1e1;
            border-radius: 15%;

        }

       .page-area ul li .page-next{
           width: 70px;
           border-radius:0
       }


       .page-area ul li span.current_page{
           border: none;
           color: black;
           font-weight:900;
       }

       .page-area ul li a:hover{

           color: #fff;
           background-color: #2459a2;
       }


    </style>
</head>
<body>

<div class="outer">

<div class="content"></div>

<div class="page-area">

             <ul>

                 <li><span class="current_page">1</span></li>
                 <li><a href="#" class="page-a">2</a></li>
                 <li><a href="#" class="page-a">3</a></li>
                 <li><a href="#" class="page-a">4</a></li>
                 <li><a href="#" class="page-a">5</a></li>
                 <li><a href="#" class="page-a">6</a></li>
                 <li><a href="#" class="page-a">7</a></li>
                 <li><a href="#" class="page-a">8</a></li>
                 <li><a href="#" class="page-a">9</a></li>
                 <li><a href="#" class="page-a">10</a></li>
                 <li><a href="#" class="page-a page-next">下一頁</a></li>

             </ul>

</div>

</div>


</body>
</html>
頁碼實例

 

思考1:body的外邊距

       邊框在默認狀況下會定位於瀏覽器窗口的左上角，可是並無緊貼着瀏覽器的窗口的邊框，這是由於body自己也是一個盒子（外層還有html），在默認狀況下，   body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，因此body中的盒子不會緊貼瀏覽器窗口的邊框了，爲了驗證這一點，加上：

body{
    border: 1px solid;
    background-color: cadetblue;
}

 

>>>>解決方法：

body{
    margin: 0;
}

思考2：margin collapse（邊界塌陷或者說邊界重疊）

一、兄弟div：
上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下二者margin裏最大值做爲顯示值

二、父子div：
若是父級div中沒有border，padding，inline content，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content中的其中一個，而後按此div進行margin，若是找到父級的兄弟，會帶着父級一塊兒往外margin；

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            margin: 0px;
        }

        .div1{
            background-color: rebeccapurple;
            width: 300px;
            height: 300px;
            overflow: hidden;

        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            margin-bottom: 40px;
            margin-top: 20px;
        }
        .div3{
            background-color:teal;
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div style="background-color: bisque;width: 300px;height: 300px"></div>

<div class="div1">

   <div class="div2"></div>
   <div class="div3"></div>
</div>

</body>

</html>
View Code

>>>> 解決方法：防止溢出

overflow: hidden;　
/*其餘解決方案，只要碰到規定的屬性便可*/
border: 1px solid rebeccapurple;
padding: 1px;

 

 

CSS屬性操做-float屬性

文檔流，指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。

脫離文檔流，也就是將元素從普通的佈局排版中拿走，其餘盒子在定位的時候，會當作脫離文檔流的元素不存在而進行定位。

塊級元素和內聯元素在文檔流中的排序方式：

block元素一般被現實爲獨立的一塊，獨佔一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素能夠設置width、height、margin、padding屬性

　　常見的塊級元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。

inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效

　　常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

浮動

假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)；若是A元素上一個元素是標準流中的元素，A的頂部老是和上一個元素的底部對齊。此外，浮動的A元素以後的普通文檔流的block元素會認爲A元素不存在，但block元素中的的文本依然會爲A元素讓出位置。 浮動的框以後的inline元素，會爲這個框空出位置，而後按順序排列。

<head>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 200px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            float: left;
        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            /*float: left;*/
        }
    </style>
</head>
<body>
    <div class="r1">aaaaaaaaa</div>
    <div class="r2"></div>
    <div class="r3"></div>
</body>

 

 

半脫離文檔流（非徹底脫離文檔流）

浮動屬於半脫離文檔流，也就是除了盒子外，裏面的內容如文本、圖片會被所有擠出去。

問題：左右結構的div盒子出現重疊現象，通常是因爲相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有致使DIV不是在同個「平面」上，但內容不會形成覆蓋現象，只有DIV造成覆蓋現象。

<head>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 100px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2">region2</div>
</body>
</html>

>>>>解決方法：要麼都不使用浮動；要麼都使用float浮動；要麼對沒有使用float浮動的DIV設置margin樣式。

父級浮動對象坍塌

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;padding:0;
         }
        .container{
            border:1px solid red;width:300px;
        }
        #box1{
            background-color:green;float:left;width:100px;height:100px;
        }
        #box2{
            background-color:deeppink; float:right;width:100px;height:100px; 
        }
         #box3{
             background-color:pink;height:40px;
         }
</style>
</head>
<body>

        <div class="container">
                <div id="box1">box1 向左浮動</div>
                <div id="box2">box2 向右浮動</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>
坍塌示例

例子如上：.container和box3的佈局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個緣由是由於第一個大盒子裏的子元素使用了浮動，脫離了文檔流，致使.container沒有被撐開。box3認爲.container沒有高度（未被撐開），所以跑上去了。

>>>>解決方法：

一、固定高度

給.container設置固定高度，通常狀況下文字內容不肯定多少就不能設置固定高度，因此通常不能設置「.container」高度(固然能肯定內容多高，這種狀況下「.container是能夠設置一個高度便可解決覆蓋問題。

或者給.container加一個固定高度的子div：

<div class="container">
                <div id="box1">box1 向左浮動</div>
                <div id="box2">box2 向右浮動</div>
                <div id="empty" style="height: 100px"></div>
</div>
<div id="box3">box3</div>

二、clear清除浮動(推薦)。

清除浮動並不是字面意思取消浮動屬性，clear只會對本身自己生效，不會影響其餘的對象

none : 默認值。容許兩邊均可以有浮動對象
left : 不容許左邊有浮動對象
right : 不容許右邊有浮動對象
both : 不容許有浮動對象

 

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            float: left;
            clear: left;

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>

</body>
</html>

 

注意：

一、元素是從上到下、從左到右依次加載的，後邊加載的元素不會關心已經加載完成的元素的屬性

二、clear: left;  對自身起做用，一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據這一點解決父級塌陷問題。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            float: left;
            clear: both;

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>
思考

解決父級塌陷：

    .clearfix:after {             <----在類名爲「clearfix」的元素內最後面加入內容；
    content: ".";                 <----內容爲「.」就是一個英文的句號而已。也能夠不寫。
    display: block;               <----加入的這個元素轉換爲塊級元素。
    clear: both;                  <----清除左右兩邊浮動。
    visibility: hidden;           <----可見度設爲隱藏。注意它和display:none;是有區別的。
                                       visibility:hidden;仍然佔據空間，只是看不到而已；
    line-height: 0;               <----行高爲0；
    height: 0;                    <----高度爲0；
    font-size:0;                  <----字體大小爲0；
    }
    
    .clearfix { *zoom:1;}         <----這是針對於IE6的，由於IE6不支持:after僞類，這個神
                                       奇的zoom:1讓IE6的元素能夠清除浮動來包裹內部元素。


整段代碼就至關於在浮動元素後面跟了個寬高爲0的空div，而後設定它clear:both來達到清除浮動的效果。
之因此用它，是由於，你沒必要在html文件中寫入大量無心義的空標籤，又能清除浮動。
<div class="head clearfix"></div>

三、overflow:hidden

overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，可是他是浮動在普通流之上的，能夠把普通流元素+浮動元素想象成一個立方體。若是沒有明確設定包含容器高度的狀況下，它要計算內容的所有高度才能肯定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。

 

position定位

static

默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的的。

position: relative相對定位（半脫離文檔流）

相對定位是相對於該元素在文檔流中的原始位置，即以本身原始位置爲參照物。有趣的是，即便設定了元素的相對定位以及偏移值，元素還佔有着原來的位置，即佔據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置，覆蓋指定的位置。而其層疊經過z-index屬性定義。

注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

position:absolute絕對定位（絕對脫離文檔流）

絕對脫離文檔流：和文檔流沒有任何關係 

定義：設置爲絕對定位的元素框從文檔流徹底刪除，並相對於最近的已定位祖先元素定位，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

重點：若是父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角爲原始點進行定位。這樣能很好的解決自適應網站的標籤偏離問題，即父級爲自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，而後Top、Right、Bottom、Left用百分比寬度表示。

另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .outet{
            /*position: relative;*/

        }
        .item{
            width: 200px;
            height:200px ;
        }
        .r1{
            background-color: #7A77C8;
        }
        .r2{
            background-color: wheat;
            /*position: relative;*/
            position: absolute;
            top: 200px;
            left: 200px;
        }
        .r3{
            background-color: darkgreen;
        }
    </style>
</head>
<body>

<div class="item r1"></div>
<div class="outet">

    <div class="item r2"></div>
    <div class="item r3"></div>
</div>


</body>
</html>
示例

總結：參照物用相對定位，子元素用絕對定位，而且保證相對定位參照物不會偏移便可。

 

position:fixed（絕對脫離文檔流）

fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。

在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .back{
            background-color: wheat;
            width: 100%;
            height: 1200px;
        }
        span{
            display: inline-block;
            width: 80px;
            height: 50px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: rebeccapurple;
            color: white;
            text-align: center;
            line-height: 50px;

        }
    </style>
</head>
<body>


<div class="back">
    <span>返回頂部</span>
</div>
</body>
</html>
示例
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程