整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線(xiàn):

          用 CSS 實(shí)現(xiàn)傾斜的背景顏色

          們?cè)谠O(shè)計(jì)網(wǎng)站的時(shí)候,有時(shí)候?yàn)榱梭w現(xiàn)出別具一格的風(fēng)格,往往會(huì)設(shè)計(jì)出一些特殊的風(fēng)格。這里就舉一個(gè)比較常見(jiàn)的例子 —— 傾斜的背景顏色。

          在CSS中,沒(méi)有某一個(gè)屬性能夠直接實(shí)現(xiàn)傾斜的背景顏色,而是需要通過(guò)一些“手段”來(lái)實(shí)現(xiàn)。最常想到的方案就是在內(nèi)容的底部放置一個(gè)div,給這個(gè)div設(shè)定一個(gè)背景顏色,然后讓這個(gè)div傾斜一個(gè)角度,從而實(shí)現(xiàn)傾斜的背景顏色。比如像下圖所示的案例:

          那么下面就來(lái)用一個(gè)基本的實(shí)例來(lái)解釋并實(shí)現(xiàn)傾斜背景的效果:

          首先要說(shuō)明一下,頁(yè)面導(dǎo)航條是固定在頁(yè)面頂部的,導(dǎo)航條不會(huì)隨著頁(yè)面的滾動(dòng)而移動(dòng)。這個(gè)效果的實(shí)現(xiàn)非常簡(jiǎn)單,就是利用了 position 這個(gè)屬性的 fixed 值來(lái)實(shí)現(xiàn)的。

          我下面的代碼實(shí)例中,HTML用來(lái)給頁(yè)面上添加元素,而在 CSS 部分需要精細(xì)化的設(shè)定屬性的參數(shù)值,而且需要若干個(gè)HTML標(biāo)簽的CSS來(lái)配合,從而實(shí)現(xiàn)傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來(lái)描述這些屬性的效果和目的,大家在閱讀的時(shí)候可以將 CSS 結(jié)合著 HTML 一起來(lái)理解。或者可以直接拿我的這個(gè)實(shí)例作為一個(gè)模板來(lái)使用。

          HTML

          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Document</title>
              <link rel="stylesheet" href="index.css">
          </head>
          
          <body>
          
              <div class="navbar-bg">
                  <ul class="navbar">
                      <li class="item">
                          <a href="https://www.baidu.com">Home</a>
                      </li>
                      <li class="item">
                          <a href="https://www.baidu.com">Home</a>
                      </li>
                      <li class="item">
                          <a href="https://www.baidu.com">Home</a>
                      </li>
                      <li class="item">
                          <a href="https://www.baidu.com">Home</a>
                      </li>
                      <li class="item sign">
                          <a href="https://www.baidu.com">Sign</a>
                      </li>
                  </ul>
              </div>
          
              <div class="box-bg">
                  <div class="box">
                      <div class="item">
                          <h1>Title</h1>
                          <p>This is the description for title.</p>
                          <button>click me</button>
                      </div>
                      <div class="item">
                          <h1>Title</h1>
                          <p>This is the description for title.</p>
                          <button>click me</button>
                      </div>
                      <div class="item">
                          <h1>Title</h1>
                          <p>This is the description for title.</p>
                          <button>click me</button>
                      </div>
                  </div>
              </div>
          
              <div class="content">
                  <h1>This is content</h1>
              </div>
          
              <div class="footer">
                  <div class="footer-bg">
                      <ul class="list">
                          <li>
                              <a href="https://greatfrank.cn">Link</a>
                          </li>
                          <li>
                              <a href="https://greatfrank.cn">Link</a>
                          </li>
                          <li>
                              <a href="https://greatfrank.cn">Link</a>
                          </li>
                          <li>
                              <a href="https://greatfrank.cn">Link</a>
                          </li>
                          <li>
                              <a href="https://greatfrank.cn">Link</a>
                          </li>
                          <li>
                              <a href="https://greatfrank.cn">Link</a>
                          </li>
                      </ul>
                  </div>
              </div>
          
          </body>
          
          </html>

          為了讓導(dǎo)航條和其他元素都能夠與頁(yè)面的兩邊留出距離,我在實(shí)際內(nèi)容標(biāo)簽的外圍又包裹了一層div,主要在這個(gè)包裹的div里設(shè)定左右內(nèi)間距,從而實(shí)現(xiàn)兩邊留白的效果。這些外圍包裹的 div 的 class 名稱(chēng)一般都會(huì)有一個(gè)后綴 "-bg"

          在實(shí)際內(nèi)容的排列時(shí),我采用了更加方便靈活的彈性布局,這樣會(huì)相對(duì)的減少HTML和CSS的代碼量。

          另外,如果想要實(shí)現(xiàn)傾斜的背景顏色,那么這些帶有 bg 后綴的 div 就是需要傾斜的標(biāo)簽。傾斜這些 div 其實(shí)很簡(jiǎn)單,只需要設(shè)定一個(gè) transform: skew(0deg, -9deg) 這樣的CSS代碼即可,但是我們可以想象一下,原本是長(zhǎng)方形的 div 按照 Y 軸逆時(shí)針旋轉(zhuǎn)了一個(gè)弧度(-9deg)后,它會(huì)變成一個(gè)平行四邊形,這個(gè)平行四邊形是左邊低右邊高。這樣就會(huì)露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過(guò)多個(gè) CSS 屬性的配合來(lái)遮住露出的白色的body部分。下面就來(lái)看一下這個(gè)HTML對(duì)應(yīng)的 CSS 代碼部分。

          在大家閱讀 CSS 的代碼之前,我給出一個(gè)原理圖來(lái)解釋一下其中的原理:

          當(dāng)外圍的 div 傾斜了之后,就需要把內(nèi)容部分的div的上部的內(nèi)間距增大,以此來(lái)遮住平行四邊形的左側(cè)露出的白色區(qū)域。這是頁(yè)面上部區(qū)域的原理。

          那么頁(yè)面底部也同樣需要實(shí)現(xiàn)這樣傾斜背景顏色的設(shè)計(jì),這樣才能將風(fēng)格一致,產(chǎn)生美感。原理還是這個(gè)原理圖所示的邏輯,不同的地方在于,底部最外圍的 div 不傾斜,而是需要兩個(gè)屬性,height 和 overflow-y,并且這個(gè) div 不能帶有背景顏色。它們的作用是當(dāng)它里面的內(nèi)容超出這個(gè) div 的區(qū)域時(shí)就不顯示,這樣就會(huì)讓上圖中藍(lán)色的平行西變形的左下角區(qū)域被紅色的框線(xiàn)裁剪掉,從而讓這個(gè)div 乖乖的呆在頁(yè)面的底部。而這個(gè) div 里面一層的 div 需要讓它傾斜,而且還帶有一個(gè)背景顏色。這樣組合出來(lái)的效果就是一個(gè)看似是左右兩邊是豎線(xiàn),下部是橫線(xiàn),只有上部是斜線(xiàn)的帶有背景顏色的四邊形,這個(gè)四邊形里面是實(shí)際的頁(yè)面內(nèi)容。

          最終的樣子在這篇 CSS 代碼的最后展示出來(lái)了。

          CSS

          TML是超文本標(biāo)記語(yǔ)言。

          web標(biāo)準(zhǔn)是由W3C和其它標(biāo)準(zhǔn)化組織制成集合。

          web標(biāo)準(zhǔn)的構(gòu)成

          結(jié)構(gòu)(對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類(lèi)-HTML)

          表現(xiàn)(設(shè)置網(wǎng)頁(yè)元素的版式,顏色,大小等外觀(guān)樣式-CSS)

          行為(模型的定義及交互的表現(xiàn)-JS)

          HTML常用標(biāo)簽

          加粗:<strong>和<b>

          傾斜:<em>和<i>

          刪除線(xiàn):<del>和<s>

          下劃線(xiàn):<ins>和<u>

          <div>分割分區(qū)<span>跨度跨距

          圖片標(biāo)簽<img/>

          屬性: src圖片路徑

          alt替換文本,圖片無(wú)法正常顯示

          title提示文本,鼠標(biāo)放到圖像顯示

          width寬度,height高度(只需要修改其中一個(gè))

          border邊框(無(wú)需單位直接寫(xiě)數(shù)值)

          注意:

          ①圖像標(biāo)簽可以擁有多個(gè)屬性,必須寫(xiě)在標(biāo)簽名后面

          ②屬性之前不分先后順序,標(biāo)簽名與屬性,屬性與屬性之間需要空格分開(kāi)

          ③屬性采取鍵值對(duì)的格式

          相對(duì)路徑:以引用文件所在位置為參考基礎(chǔ)

          (同一級(jí)路徑,下一級(jí)路徑/,上一級(jí)路徑../)

          絕對(duì)路徑:從盤(pán)符開(kāi)始的路徑(\)

          常用屬性

          img ——vspace垂直邊距 ,hspace水平邊距 align對(duì)齊

          details,summary,鼠標(biāo)點(diǎn)擊時(shí)顯示或隱藏

          mark 文本中高亮顯示,和strong相似

          cite 用于引用標(biāo)記,斜體顯示

          draggable true選中后可以拖動(dòng)操作

          font定義 font-style font-weight font-size/line-height font-family 順序不能改變

          word-wrap break-word長(zhǎng)單詞或url地址自動(dòng)換行

          letter-spacing字間距

          word-spacing單詞間距

          line-height行間距

          text-decorantion文本裝飾unline下劃線(xiàn),overline上劃線(xiàn),line-through刪除線(xiàn)

          text-indent 2em 首行縮進(jìn)兩個(gè)字符

          white-space空白符處理 pre

          box-sizing:content-box當(dāng)widthh和height的時(shí)候不包括margin和panding

          更換圖層位置,z軸偏移z-index:-10

          align-items:center居中對(duì)齊

          align-self:center


          超鏈接標(biāo)簽<a>

          href鏈接目標(biāo)地址

          target鏈接頁(yè)面打開(kāi)的方式(_self當(dāng)前窗口打開(kāi),_blank新窗口中打開(kāi)方式)

          外部鏈接,內(nèi)部鏈接,空鏈接,下載鏈接,網(wǎng)頁(yè)元素鏈接,錨點(diǎn)鏈接(快速定位到頁(yè)面的某個(gè)位置- 添加id屬性)

          去除超鏈接樣式:text-decoration:none


          特殊字符

          空格符 &nbsp;

          小于號(hào)&lt; 大于號(hào)&gt;


          表格標(biāo)簽

          align對(duì)齊方式

          bolder表格邊框

          cellpadding單元格與內(nèi)容之間空白

          cellspacing單元格與單元格之前空白

          合并單元格:rowspan colspan


          列表標(biāo)簽

          無(wú)序列表:ul li

          有序列表:ol li

          自定義列表:dl dt dd


          表單標(biāo)簽

          完整表單:表單域<form>,表單控件,提示信息

          <form>

          ——action(指定接受并處理表單數(shù)據(jù)的服務(wù)器程序的url地址)

          ——method(get/post設(shè)置表單數(shù)據(jù)的提交方式)

          ——name(指定表單名稱(chēng))


          <input>輸入元素

          type屬性:button(點(diǎn)擊按鈕)checkbox(復(fù)選框)file(輸入字段和“瀏覽”按鈕)hidden(隱藏輸入字段)image(圖片形式提交按鈕)password(密碼字段)radio(單選按鈕)reset(重置按鈕)sumbit(提交按鈕)text(單行輸入字段,默認(rèn)20個(gè)字符)

          name屬性:(相同的名字——單選框和復(fù)選框)區(qū)別不同表單元素

          value屬性:定義input元素值

          checked屬性:頁(yè)面首次加載是否選中

          maxlength屬性:輸入字段的最大值


          <lable>標(biāo)簽

          用于綁定一個(gè)表單元素,當(dāng)點(diǎn)擊<lable>標(biāo)簽內(nèi)的文本時(shí),瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到或者選擇對(duì)應(yīng)的表單元素上,用來(lái)增加用戶(hù)體驗(yàn)。

          <lable>標(biāo)簽的for屬性與相關(guān)元素的id屬性相同

          <select>下拉列表元素

          -<option>

          -selected="selected"默認(rèn)選中

          <textarea>文本域

          -cols rows (每行每列字?jǐn)?shù))

          這里是云端源想IT,幫你輕松學(xué)IT”

          嗨~ 今天的你過(guò)得還好嗎?

          睡眠等同于希望

          每次醒來(lái)都是一個(gè)新的開(kāi)始

          一個(gè)新的希望


          - 2024.03.22 -


          在Web開(kāi)發(fā)的世界中,CSS(層疊樣式表)是構(gòu)建視覺(jué)吸引力和定義網(wǎng)頁(yè)布局的不可或缺的工具。

          掌握如何恰當(dāng)?shù)匾隒SS樣式以及理解它們的優(yōu)先級(jí)規(guī)則,對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)至關(guān)重要。今天,我們就來(lái)深入探討CSS的四種引入方式,以及選擇器的優(yōu)先級(jí)之謎,了解常用的CSS樣式及使用方法!



          一、CSS四種樣式引入方式

          CSS(層疊樣式表)為網(wǎng)頁(yè)提供了豐富的樣式定義,允許開(kāi)發(fā)者通過(guò)多種方式將樣式應(yīng)用到HTML文檔中。以下是四種主要的CSS引入方式:


          1.1 行內(nèi)樣式

          這是最直接也最簡(jiǎn)單的方法,通過(guò)在HTML元素的style屬性中直接編寫(xiě)CSS規(guī)則。

          示例:

          <p style="color: red; font-size: 20px;">這是一段紅色的文字。</p>


          這種方式的優(yōu)點(diǎn)是簡(jiǎn)單快捷,但缺點(diǎn)是它使得HTML代碼與樣式混合,不夠純凈,且不利于樣式的復(fù)用和維護(hù)。


          1.2 內(nèi)嵌樣式

          在一個(gè)HTML文檔中使用<style>標(biāo)簽將CSS規(guī)則嵌入到HTML的head部分。這種方式適用于定義特定于某一頁(yè)面的樣式。

          示例:

          <head>
          <style>
          body {background-color: powderblue;}
          h1 {color: blue;}
          p {color: red;}
          </style>
          </head>
          <body>
          <h1>This is a heading</h1>
          <p>This is a paragraph.</p>
          </body>



          1.3 外部樣式

          這是最常用的方法,它通過(guò)<link>標(biāo)簽將外部的CSS文件鏈接到HTML文檔中。這種方法的優(yōu)勢(shì)在于可以在多個(gè)頁(yè)面間共享同一個(gè)樣式文件,有助于保持代碼的整潔和一致性。

          示例:

          <head>
          <link rel="stylesheet" type="text/css" href="mystyle.css">
          </head>
          <body>
          <h1>This is a heading</h1>
          <p>This is a paragraph.</p>
          </body>
          其中,mystyle.css的內(nèi)容可能如下:
          body {background-color: powderblue;}
          h1 {color: blue;}
          p {color: red;}


          1.4 導(dǎo)入樣式

          使用@import語(yǔ)句在CSS文件中導(dǎo)入另一個(gè)CSS文件。盡管這種方法可以分離樣式表,但它通常不被推薦使用,因?yàn)槠浼虞d時(shí)序可能會(huì)影響頁(yè)面渲染效率。

          示例:

          @import url('https://fonts.googleapis.com/css?family=Roboto');
          body {
          font-family: 'Roboto', sans-serif;
          }


          1.5 樣式單優(yōu)先級(jí)

          作用域范圍:外部樣式表>內(nèi)部樣式表>行內(nèi)樣式表


          優(yōu)先級(jí):

          • 行內(nèi)樣式表>內(nèi)部樣式表>外部樣式表
          • 相同的樣式作用在同一個(gè)標(biāo)簽上:就近原則;不同的樣式作用在同一個(gè)標(biāo)簽上:疊加。
          • 加載外部樣式表或者內(nèi)部樣式表時(shí)候,需要注意加載順序:加載html文件是從上向下加載的,也就是后面加載的樣式會(huì)覆蓋前面的樣式。


          二、CSS常用樣式

          2.1 字體樣式

          normal - 文字正常顯示

          italic - 文本以斜體顯示

          oblique - 文本為“傾斜”(傾斜與斜體非常相似,但支持較少)

          font-weight 屬性指定字體的粗細(xì)

          示例:

          <!DOCTYPE html>
          <html>
          <head>
          <style>
          .sp1{
          color: darkorange;
          font-size: 20px;
          font-weight: bolder; /* bolder 字體是否加粗*/
          
          font-style: italic; /* italic 字體是否傾斜*/
          
          font-family: "宋體"; /* 設(shè)置字體樣式*/
          }
          
          .sp2{
          /* 簡(jiǎn)寫(xiě) */
          /* 順序不能能變:style-weigth-size-family */
          font:italic bolder 15px 宋體 ;
          color:rgb(28, 235, 97);
          }
          </style>
          <body>
          <span>
          編程學(xué)習(xí),從云端源想開(kāi)始!
          </span><br>
          <span>
          讓知識(shí)觸手可及
          </span>
          <p>讓知識(shí)觸手可及</p>
          </body>
          </html>



          2.2 文本樣式

          color: 字體顏色

          text-align: center; - - 文本對(duì)齊方式

          text-decoration:none; - - 文本的線(xiàn)

          text-shadow: pink 5px 5px 2px; - - 文本的陰影 【陰影顏色-水平方向的偏移量-垂直方向的偏移量-模糊距離】

          line-height: - - 行高 (文本在標(biāo)簽內(nèi)所占的高度)

          width:

          height:

          border: 1px #ffffff solid; - - 盒子邊框【邊框粗細(xì)-顏色-邊框線(xiàn)樣式】

          示例:

          <style>
          .p{
          color: rgb(0, 255, 21); /* 字體顏色 */
          text-align: center; /* 文本對(duì)齊方式 */
          text-decoration:none; /* 文本的線(xiàn) */
          text-shadow: pink 5px 5px 2px; /* 文本的陰影 【陰影顏色-水平方向的偏移量-垂直方向的偏移量-模糊距離】*/
          line-height: 400px; /* 行高 (文本在標(biāo)簽內(nèi)所占的高度)*/
          width: 400px;
          height: 300px;
          border: 1px rgb(76, 14, 223) solid; /* 盒子邊框【邊框粗細(xì)-顏色-邊框線(xiàn)樣式】 */
          }
          </style>
          </head>
          
          <body>
          <p>歡迎來(lái)到云端源想!</p>
          <a href="https://www.baidu.com"></a>
          </body>


          2.3 背景樣式

          width: 500px;

          height: 1200px;

          background-color: pink; - - 背景顏色

          background-image: url(…/img/background.jpg); - - 背景圖片

          background-repeat: no-repeat; - - 背景圖片是否平鋪

          background-position: left top; - - 指定背景圖片的位置

          background-attachment: fixed; - - 背景圖片是否隨著標(biāo)簽滾動(dòng) 【fixed-固定 scroll-滾動(dòng)】

          示例:

          <style>
          .d{
          width: 500px;
          height: 1200px;
          background-color: pink; /* 背景顏色 */
          background-image: url(../img/background.jpg); /* 背景圖片 */
          background-repeat: no-repeat; /* 背景圖片是否平鋪 */
          background-position: left top; /* 指定背景圖片的位置 */
          background-attachment: fixed; /* 背景圖片是否隨著標(biāo)簽滾動(dòng) 【fixed-固定 scroll-滾動(dòng)】 */
          }
          </style>
          </head>
          <body>
          <div>
          
          </div>


          2.4 列表樣式

          <!DOCTYPE html>
          <html>
          <head>
          <style>
          li{
          background-color: lemonchiffon;
          /*列表樣式:常用取值:none-無(wú)樣式 square-正方形 circle-空心圓 decimal-數(shù)字*/
          list-style-type: circle;
          /*列表樣式為自定義圖片*/
          list-style-image: url(../img/2.jpg);
          /*列表樣式的放置位置*/
          list-style-position: inside;
          /*列表樣式縮寫(xiě)*/
          list-style: square url(../img/2.jpg) inside;
          /*常用的列表樣式*/
          list-style: none;
          }
          </style>
          </head>
          <body>
          <ul>
          <li>列表項(xiàng)1</li>
          <li>列表項(xiàng)2</li>
          <li>列表項(xiàng)3</li>
          </ul>
          </body>
          </html>


          2.5 邊框樣式

          <!DOCTYPE html>
          <html>
          <head>
          <style>
          .border{
          /*邊框?qū)挾?/
          border-width: 2px;
          /*邊框顏色*/
          border-color: red;
          /*邊框樣式:solid 實(shí)線(xiàn) dotted 點(diǎn)線(xiàn) dashed 虛線(xiàn)*/
          border-style: dashed;
          /*邊框樣式縮寫(xiě):樣式 顏色 寬度*/
          border:solid green 5px;
          /*邊框可以為4個(gè)方向分別設(shè)置*/
          border-top: dashed black 4px;
          border-right: dashed #FF00FF 4px;
          border-bottom: dotted darkblue 4px;
          border-left: solid fuchsia 5px;
          /*沒(méi)有邊框*/
          border: none;
          /*常用的細(xì)邊框樣式*/
          border: solid 1px #ccc;
          }
          </style>
          </head>
          <body>
          <div class="border">這是一個(gè)帶有邊框的元素</div>
          </body>
          </html>


          2.6 盒子模型

          所有的html元素可以看做是盒子,在css中,"box model"是用來(lái)設(shè)計(jì)和布局時(shí)使用。

          CSS盒子模型本質(zhì)是一個(gè)盒子,封裝周?chē)膆tml元素,它包括:邊框、邊距、填充、實(shí)際內(nèi)容。

          盒子模型允許我們?cè)谄渌睾椭車(chē)剡吙蛑g的空間放置元素。

          • margin:外邊距,清除邊框外區(qū)域,外邊距是透明的。
          • border:邊框,圍繞在內(nèi)邊距和內(nèi)容外的邊框。
          • padding:內(nèi)邊距,清除內(nèi)容周?chē)鷧^(qū)域內(nèi)邊距是透明的。
          • content:內(nèi)容,顯示文字和圖像。

          想要快速入門(mén)前端開(kāi)發(fā)嗎?推薦一個(gè)前端開(kāi)發(fā)基礎(chǔ)課程,這個(gè)老師講的特別好,零基礎(chǔ)學(xué)習(xí)無(wú)壓力,知識(shí)點(diǎn)結(jié)合代碼,邊學(xué)邊練,可以免費(fèi)試看試學(xué),還有各種輔助工具和資料,非常適合新手!點(diǎn)這里前往學(xué)習(xí)哦!云端源想

          示例:

          <head>
          <meta charset="UTF-8">
          <title></title>
          <style>
          /* border:邊框,分4個(gè)方向,同理margin、padding也分為四個(gè)方向
          * margin:元素與元素之間對(duì)的距離
          * padding:內(nèi)容與邊框之間的距離
          * 設(shè)置的時(shí)候順序:上 右 下 左
          */
          .div{
          border: solid red 10px;
          /*四個(gè)方向上的元素與元素之間的距離都是50px*/
          margin: 50px;
          /*兩個(gè)值的時(shí)候:第一個(gè)參數(shù)表示上下距離都是50px,第二個(gè)參數(shù)表示左右距離都是100px*/
          margin: 50px 100px;
          padding: 50px;
          /*
          一個(gè)元素真正的寬度=width+左右padding值+左右的border值
          一個(gè)元素的真正高度=height+上下的padding值+上下的border值
          * */
          }
          </style>
          </head>
          <body>
          <div>111111111112222222222223333333333333333</div>
          </body>

          1)盒子的寬高

          元素的實(shí)際寬度和高度:

          • 計(jì)算一個(gè)元素在實(shí)際在頁(yè)面占據(jù)的總寬度=元素寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
          • 元素實(shí)際在頁(yè)面占據(jù)的總高度=元素高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距



          2)設(shè)置寬度=元素實(shí)際寬度,box-sizing屬性。

          <head>
          <meta charset="UTF-8">
          <title></title>
          <style>
          /* box-sizing:確認(rèn)元素的大小
          content-box: 實(shí)際寬度=width+左右的psdding值+上下的border值
          實(shí)際高度=height+上下的padding值+上下的border值
          border-box:實(shí)際寬度=width;實(shí)際高度=height
          padding和border不會(huì)影響元素的實(shí)際寬高
          * */
          .box{
          width: 100px;
          height: 200px;
          border: 5px solid;
          padding: 5px;
          box-sizing: content-box;
          }
          </style>
          </head>
          <body>
          <div>你好中國(guó)</div>
          </body>


          CSS的世界博大精深,以上只是冰山一角,希望通過(guò)這些基礎(chǔ)的常用樣式可以幫助你快速進(jìn)入CSS世界的大門(mén)。


          掌握CSS的引入方式和選擇器優(yōu)先級(jí)是構(gòu)建高效、可維護(hù)網(wǎng)站的關(guān)鍵。通過(guò)這些知識(shí),你可以更好地管理和優(yōu)化你的樣式代碼,創(chuàng)造出既美觀(guān)又專(zhuān)業(yè)的網(wǎng)頁(yè)設(shè)計(jì)。現(xiàn)在,準(zhǔn)備好邁入CSS的世界,開(kāi)啟你的創(chuàng)意之旅吧!


          我們下期再見(jiàn)!


          END

          文案編輯|云端學(xué)長(zhǎng)

          文案配圖|云端學(xué)長(zhǎng)

          內(nèi)容由:云端源想分享


          主站蜘蛛池模板: 久久伊人精品一区二区三区 | 精品一区二区三人妻视频| 女女同性一区二区三区四区| 日本美女一区二区三区| 亚洲av一综合av一区| av在线亚洲欧洲日产一区二区| 一区二区亚洲精品精华液| 国产免费无码一区二区| 亚洲一区视频在线播放| 国产精品538一区二区在线| 国产手机精品一区二区| 亚洲无删减国产精品一区| 国产一区二区精品| 国产精品主播一区二区| 人妻无码一区二区视频| 精品国产日韩亚洲一区在线| 日本无卡码一区二区三区| 亚洲香蕉久久一区二区| 无码乱人伦一区二区亚洲| 亚洲AV综合色一区二区三区| 亚洲AV无码一区二区乱孑伦AS | 精品人妻系列无码一区二区三区 | 三上悠亚日韩精品一区在线| 一区 二区 三区 中文字幕| 日韩视频在线一区| 国产一区二区三区免费在线观看| 成人久久精品一区二区三区| 成人H动漫精品一区二区| 亚洲一区二区无码偷拍| 成人免费一区二区三区在线观看| 日韩一区二区三区不卡视频| 精品一区二区三区无码视频| 日本人真淫视频一区二区三区| 韩国一区二区三区视频| 蜜桃AV抽搐高潮一区二区| 国产一区二区三区四| 日本一区午夜爱爱| 另类免费视频一区二区在线观看| 亚洲国产一区在线| 在线精品一区二区三区| 国产精品乱码一区二区三|