2. 程式人生 > >前端之CSS：屬性操作1 css之操作屬性

前端之CSS：屬性操作1 css之操作屬性

阿新 • • 發佈：2018-12-20
css之操作屬性

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="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屬性

 

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="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屬性

 

相關推薦

前端之CSS：屬性操作1 css之操作屬性

css之操作屬性 1.文字 1.文字顏色：color 顏色屬性被用來設定文字的顏色。 顏色是通過CSS最經常的指定：

Centos 學習之路：基礎（1）

格式 鍵盤 平臺 處理 eight ctrl+ 環境 rehel 主機 馮·諾伊曼計算機模型： 采用二進制數表示程序和數據； 能存儲程序和數據，並能自動控制程序的執行； 具備運算器、控制器、存儲器、輸入設備和輸出設備5個基本部分。 CPU：是控制器及運算器 CPU的架

基於java的收藏排行功能之五：Dao層對資料庫的操作&資料表設計

接上一篇 11：dao介面 package cn.itcast.travel.dao; import cn.itcast.travel.domain.Route; import java.util.List; public interface RouteDao { public

Java併發程式設計系列之十：synchronized（1）

在多執行緒併發訪問資源（這類資源稱為臨街資源）的時候，由於割裂來了原子操作，所以會導致資料不一致的情況。為了避免這種情況，需要使用同步機制，同步機制能夠保證多執行緒併發訪問資料的時候不會出現資料不一致的情況。 一種同步機制是使用synchronized關鍵字，

python之旅：並發編程之多進程

全部 rep start OS 運行時間 默認 sse a star top命令 一 multiprocessing模塊介紹 python中的多線程無法利用多核優勢，如果想要充分地使用多核CPU的資源（os.cpu_count()查看），在python中大部分情況

Python之旅：並發編程之協程

有一個 線程 切換 .com 主題 多個 並發編程 時間 bsp 一 引子 本節的主題是基於單線程來實現並發，即只用一個主線程（很明顯可利用的cpu只有一個）情況下實現並發，為此我們需要先回顧下並發的本質：切換+保存狀態 cpu正在運行一個任務，會在兩種

《Android 之美 從0到1 -- 高手之路》

Android 之美 從0到1 – 高手之路 隨著Android 面試題總結，已經形成比較多的篇幅，為了方便大家閱讀，本篇將作為面試題總結導讀，也將成為Android 面試題的大綱，也只是Android 之美 從0到1 的一部分，陸續補充和完善，希望大家

JQuery：DOM操作、屬性操作、CSS操作的常用方法

ndt mar dom pin disable cli top .text acea DOM操作 1.append在div1的內部最後追加一個圖片 　　$("#div1").append("<img src=‘........‘/>"); 2.appendTo把

前端實戰專案操作：如何用純 CSS 創作一個變色旋轉動畫

程式碼解讀 定義 dom，容器中包含 9 個元素： <div class="container"> <span></span> <span></span> <spa

前端之CSS：CSS選擇器 前端之css樣式（選擇器）。。。

前端之css樣式（選擇器）。。。 一、css概述 CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，對html標籤的渲染和佈局

前端之JQuery：JQuery屬性操作

lec 圖片 code info boot class clas url 如果 Jquery2--屬性相關的操作 知識點總結 1、屬性 屬性（如果你的選擇器選出了多個對象，那麽默認只會返回出第一個屬性）、 attr(屬性名|

前端之JQuery：JQuery屬性操作 Jquery2--屬性相關的操作

Jquery2--屬性相關的操作   知識點總結  1、屬性 屬性（如果你的選擇器選出了多個物件，那麼預設只會返回出第一個屬性）

CSS系列——前端進階之路：初涉Less

前言：最近幫一個朋友解決點問題，在檢視元件原始碼的時候涉及到了less語法，這可難倒博主了。沒辦法，既然用到就要學唄，誰讓咱是無所不能的程式猿呢！所以今天來學習下Less，算是筆記，也希望給初學less的園友提供參考，如果你是前端大神，此文就沒必要看了哈。算了，扯遠了哈，進入正題。 一、Less介紹

CSS知識點整理（1）：CSS語法，層疊次序，選擇器，其他重要方面。

屬性。 偽類選擇器 css語法 wid cape image 整理 樣式 以及 1. css的全稱 2. CSS的層疊次序：優先級由低到高 ·瀏覽器設置 ·外部樣式表 ·內部樣式表 ·內聯樣式 3. CSS的3種形式，以及每種形式的語法格式 ——註意樣式表的為什麽常

2018.7.1 css項目之模仿滿屋花首頁css+idv布局實現

log 註冊 align set 生日 lac color 會員中心 size 可以分開寫 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF

前端學習JQuery篇05——基本操作（CSS）

eight out 需要 名稱 整型 基本 osi 隱藏元素 基本操作 CSS css(name|pro|[,val|fn])1.9*訪問或設置匹配元素的樣式屬性。 一個參數為訪問 兩個參數為設置 jQuery.cssHooks直接向 jQuery 中添加鉤子，用於覆蓋

CSS基礎學習（一） 之 line-height && height 屬性區別

  官方定義： height：定義了了元素的高度。預設情況下，該屬性訂了 content area（內容區域） 的高度。如果box-sizing屬性設定為 border-box，那麼height就表示border-area的高度。 line-height：用來設定多行元素的空間量，比如文字。對

掘金 AMA：我是《CSS 揭祕》譯者 & 前端 + 區塊鏈的跨界者-- CSS魔法，你有什麼問題要問我？

掘金 AMA（ask me anything) 是掘金沸點的一個話題，掘金團隊會邀請一位技術大牛通過「你問我答」的形式回答你的問題，讓大家在技術、工作、生活方面有所成長。 AMA 嘉賓 掘金 AMA 第十二期嘉賓是我是《CSS 揭祕》譯者 & 前端 + 區塊鏈的跨界者-

前端每日實戰：2.純 CSS 創作一個矩形旋轉 loader 特效

原文地址：2.純 CSS 創作一個矩形旋轉 loader 特效 擴充套件後地址：https://scrimba.com/c/cNJVWUR  擴充套件地址：https://codepen.io/pen/   HTML程式碼： <div class="loader"&g

前端每日實戰：135# 視訊演示如何用純 CSS 創作一個懸停時右移的按鈕特效

效果預覽 按下右側的“點選預覽”按鈕可以在當前頁面預覽，點選連結可以全屏預覽。 可互動視訊 此視訊是可以互動的，你可以隨時暫停視訊，編輯視訊中的程式碼。 請用 chrome, safari, edge 開啟觀看。 原始碼下載 每日前端實戰系列的全部原始碼請從