221 前端之CSS：屬性操作1

本文轉載自查看原文 2019-12-19 08:32 2269 Django框架/ Linux運維知識/ drf框架講義/ ansible

1.文本

1.文本顏色：color

顏色屬性被用來設置文字的顏色。

顏色是通過CSS最經常的指定：

十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red

2.水平對齊方式

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

left 把文本排列到左邊。默認值：由瀏覽器決定。
right 把文本排列到右邊。
center 把文本排列到中間。
justify 實現兩端對齊文本效果。

2.文本其他操作

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 ; 文本轉換，用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫


*/

3.背景屬性

background-color
background-image
background-repeat
background-position

background-color: cornflowerblue
 
background-image: url('1.jpg');
 
background-repeat: no-repeat;(repeat:平鋪滿)
 
background-position: right top（20px 20px）;

簡寫：background:#ffffff url('1.png') no-repeat right top;

4.邊框屬性

5.列表屬性

6.外邊距（margin）和內邊距（padding）

1.盒子模型

margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離；
Border(邊框): 圍繞在內邊距和內容外的邊框。
Content(內容): 盒子的內容，顯示文本和圖像。

2.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;

3.padding(內邊距)

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

設置同margine；

思考1:body的外邊距

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

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

>>>>解決方法：

body{
    margin: 0;
}

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

1、兄弟div：
上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值

2、父子div：
if 父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content中的其中一個，然后按此div 進行margin；

溢出例子

 1 <!DOCTYPE html>
 2 <html lang="en" style="padding: 0px">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         body{
 9             margin: 0px;
10         }
11 
12         .div1{
13             background-color: rebeccapurple;
14             width: 300px;
15             height: 300px;
16             overflow: hidden;
17 
18         }
19         .div2{
20             background-color: green;
21             width: 100px;
22             height: 100px;
23             margin-bottom: 40px;
24             margin-top: 20px;
25         }
26         .div3{
27             background-color:teal;
28             width: 100px;
29             height: 100px;
30             margin-top: 20px;
31         }
32     </style>
33 </head>
34 <body>
35 <div style="background-color: bisque;width: 300px;height: 300px"></div>
36 
37 <div class="div1">
38 
39    <div class="div2"></div>
40    <div class="div3"></div>
41 </div>
42 
43 </body>
44 
45 </html>

父級塌陷問題

 解決方法：
overflow: hidden;

7.float屬性

布局關鍵點：如何能夠讓可以調節長度的元素（標簽）在一行顯示

如果上一個是浮動的，那么就緊貼這

如果上一個不是浮動的，那么就保持垂直距離不變

基本浮動規則

先來了解一下block元素和inline元素在文檔流中的排列方式。

　　block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；

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

常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

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

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

假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標准流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之后的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。浮動的框之后的inline元素，會為這個框空出位置，然后按順序排列。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0;
 9         }
10 
11         .r1{
12             width: 300px;
13             height: 100px;
14             background-color: #7A77C8;
15             float: left;
16         }
17         .r2{
18             width: 200px;
19             height: 200px;
20             background-color: wheat;
21             /*float: left;*/
22 
23         }
24         .r3{
25             width: 100px;
26             height: 200px;
27             background-color: darkgreen;
28             float: left;
29         }
30     </style>
31 </head>
32 <body>
33 
34 <div class="r1"></div>
35 <div class="r2"></div>
36 <div class="r3"></div>

示例

非完全脫離文檔流

左右結構div盒子重疊現象，一般是由於相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內容不會造成覆蓋現象，只有DIV形成覆蓋現象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>

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

8.position定位

6.dispaly屬性

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端-jq創建標簽/添加屬性/css屬性 230 前端之JQuery：JQuery屬性操作前端之CSS字體和文本類屬性前端——CSS [web前端] css3 transition屬性實現3d動畫效果 css3 屬性——calc() 用js控制css屬性 css計算屬性 calc() 【CSS學習】--- position屬性 Transition 所支持的css屬性