整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          "深入解析CSS基礎:全面掌握元素

          "深入解析CSS基礎:全面掌握元素尺寸調整秘籍-heig

          深入解析CSS基礎:全面掌握元素尺寸調整秘籍——height/width、max-height/max-width、min-height/min-width及line-height實戰應用

          ## 引言

          在Web前端開發的世界中,CSS是賦予網頁形態與樣式的靈魂。準確而巧妙地運用CSS屬性,尤其是對元素尺寸的控制,是構建美觀、響應式界面的關鍵。本文將帶領您深入解析CSS基礎中的核心尺寸屬性——`height`/`width`、`max-height`/`max-width`、`min-height`/`min-width`以及`line-height`,并通過豐富的實例和代碼演示,助您全面掌握這些屬性的實戰應用。

          ##

          一、基本尺寸屬性:height/width

          1.1 定義與計算

          css
          div {
            height: 200px; /* 絕對單位 */
            width: 50%; /* 相對單位 */
          }
          

          `height`和`width`屬性用于設置元素的高度和寬度。它們可以接受絕對單位(如像素px、厘米cm等)或相對單位(如百分比%、視窗單位vw/vh等),也可以設置為`auto`,讓瀏覽器根據內容自動計算尺寸。

          1.2 內容填充與邊距影響

          css
          /* 計算元素總高度 */
          元素總高度=height + padding-top + padding-bottom + border-top-width + border-bottom-width;
          
          /* 計算元素總寬度 */
          元素總寬度=width + padding-left + padding-right + border-left-width + border-right-width;
          

          `height`和`width`只包含元素的內容區域,不包括內邊距(padding)、邊框(border)和外邊距(margin)。若需計算元素總尺寸,需加上這些額外空間:

          1.3 `box-sizing`屬性的影響

          css
          div {
            box-sizing: border-box; /* 包含內邊距和邊框 */
            height: 200px;
            width: 50%;
            padding: 20px;
            border: 1px solid #ccc;
          }
          

          此時,元素的總高度和寬度不再隨內邊距和邊框值的變化而變化。

          ##

          二、尺寸限制屬性:max-height/max-width、min-height/min-width

          2.1 定義與作用

          css
          div {
            max-height: 400px; /* 最大高度限制 */
            max-width: 80%; /* 最大寬度限制 */
            min-height: 100px; /* 最小高度保證 */
            min-width: 300px; /* 最小寬度保證 */
          }
          

          `max-height`和`max-width`屬性用于限制元素的最大高度和最大寬度,防止其超出預設范圍。同樣,`min-height`和`min-width`則用于設定元素的最小高度和最小寬度,確保其在任何情況下都不小于指定值。

          2.2 與`height`/`width`的關系與優先級

          當同時設置`height`/`width`與對應的限制屬性時,實際應用的尺寸將是兩者之間的較?。▽τ赻max-`屬性)或較大(對于`min-`屬性)值。

          2.3 響應式設計與自適應布局

          `max-height`/`max-width`與`min-height`/`min-width`在響應式設計中尤為重要。通過設置合適的限制值,可確保元素在不同屏幕尺寸下保持良好的視覺效果和用戶體驗。

          ##

          三、行高屬性:line-height

          3.1 定義與作用

          css
          p {
            line-height: 1.5; /* 行間距為字體大小的1.5倍 */
          }
          

          `line-height`屬性用于設置元素內文本行間的垂直間距。它不僅影響文本行間距,還決定了元素的基線對齊方式,以及內聯元素垂直居中對齊的基礎。

          3.2 單位與計算

          `line-height`可以接受數值(表示相對于字體大小的倍數)、長度單位(如px、em等)或百分比。數值是最常用的設置方式,便于根據字體大小動態調整行間距。

          3.3 實戰應用:垂直居中對齊

          css
          .centered-text {
            height: 70px;
            line-height: 70px; /* 等于元素高度,實現垂直居中 */
            text-align: center; /* 水平居中對齊 */
          }
          

          利用`line-height`與元素高度相等的特性,可實現單行文本的垂直居中對齊:

          3.4 實戰應用:多行文本容器的垂直居中

          css
          .container {
            display: flex;
            align-items: center; /* 垂直居中 */
          }
          
          .container::before {
            content: "";
            flex: 1;
            margin-bottom: -webkit-line-clamp(2); /* 調整負值以適應多行文本 */
            line-height: 1.5; /* 文本行間距 */
          }
          

          ##

          四、綜合實戰:打造響應式卡片組件

          4.1 需求分析

          創建一個響應式卡片組件,要求如下:

          - 卡片寬度不超過父容器的80%,且最小寬度為300px。

          - 卡片高度根據內容自適應,但最大不超過500px。

          - 卡片內文字采用1.5倍行距,標題居中對齊。

          4.2 代碼實現

          html
          <div class="card">
            <h2 class="card-title">卡片標題</h2>
            <p class="card-content">卡片內容...</p>
          </div>
          
          <style>
            .card {
              box-sizing: border-box;
              max-width: 80%;
              min-width: 300px;
              margin: 0 auto;
              padding: 20px;
              border: 1px solid #ccc;
            }
          
            .card-title {
              font-size: 1.2rem;
              line-height: 1.5;
              text-align: center;
            }
          
            .card-content {
              line-height: 1.5;
            }
          </style>
          

          4.3 效果展示與總結

          通過上述代碼,我們成功創建了一個滿足需求的響應式卡片組件。本案例充分展示了`height`/`width`、`max-height`/`max-width`、`min-height`/`min-width`以及`line-height`屬性的實際應用價值。熟練掌握這些基礎尺寸屬性,將使您在Web前端開發中游刃有余,輕松應對各種界面布局挑戰。

          ---

          本文詳細解讀了CSS基礎中的核心尺寸屬性,通過理論講解、代碼示例與實戰演練,幫助您全面掌握了`height`/`width`、`max-height`/`max-width`、`min-height`/`min-width`以及`line-height`的用法與技巧。希望這些知識能助您在日常開發中更加得心應手,打造出更優雅、更響應式的Web界面。如果您有任何疑問或建議,歡迎在評論區留言交流!

          作自己的網頁鏈接, 及制作網站的流程

          制作自己的網頁鏈接是一個相對簡單的過程,下面將介紹一種常見的方法。

          首先,你需要有一個網頁或者一個網站,這可以是一個你自己設計的靜態網頁,或者是一個動態的內容管理系統(CMS)網站(比如 WordPress)。無論選擇哪種方式,你都需要有一個網頁編輯器,比如 Visual Studio Code 或者 Dreamweaver。這些工具可以幫助你編輯和管理網頁的代碼。

          接下來,你需要為你的網頁或網站選擇一個域名。域名是網站的地址,比如 。你可以在各大域名注冊商(如 GoDaddy 或者 Namecheap)購買一個合適的域名。

          一旦你有了域名,你就需要將其綁定到一個服務器上。服務器是你的網頁或網站存儲在互聯網上的位置。你可以購買一個虛擬專用服務器(VPS),也可以使用共享主機,這取決于你的預算和需求。

          在服務器上,你需要安裝一個網頁服務器軟件,如 Apache 或 Nginx,并配置好你的域名和網站的根目錄。通過 FTP 或 SSH 等協議,你可以將你的網頁文件上傳到服務器上。

          現在,你的網頁或網站已經可以通過域名訪問了,但是如果沒有建立相應的網頁鏈接,訪問者不知道如何跳轉到其他頁面。要創建一個網頁鏈接,你需要在 HTML 代碼中添加一個``標簽。

          例如,如果你有一個名為 "about.html" 的頁面,你可以在其他頁面添加一個鏈接到這個頁面的代碼,如下所示:

          ```htmlAbout```

          這段代碼會在頁面中顯示一個名為 "About" 的鏈接,當點擊它時,瀏覽器會跳轉到 "about.html" 頁面。

          你還可以在鏈接中添加其他屬性,如 `target="_blank"`,以在新的標簽頁或窗口中打開鏈接。另外,你還可以使用 CSS 來美化鏈接,例如修改字體顏色、大小和樣式。

          制作一個網頁或一個完整的網站需要經歷以下流程:

          1. 網站規劃 - 確定所需的頁面和內容,以及設計和功能要求。

          2. 頁面設計 - 使用設計工具或圖形編輯軟件創建網站的視覺布局和元素,包括標志、圖像、導航欄等。

          3. 內容編寫 - 編寫網站內容,包括文字、圖片、視頻等。

          4. 網頁開發 - 在網頁編輯器中編寫 HTML、CSS 和 JavaScript 代碼,實現頁面的結構、樣式和交互功能。

          5. 圖片和媒體制作和優化 - 調整和優化網站使用的圖片和其他媒體文件,以提高頁面加載速度。

          6. 網站測試 - 在不同的瀏覽器和設備上測試網站的功能和兼容性,并修復可能出現的問題。

          7. 網站部署 - 將網站文件上傳到服務器上,并配置域名和服務器設置。

          8. SEO 優化 - 優化網站的內容和結構,以提高搜索引擎排名。

          9. 網站上線 - 將網站公開發布,以便訪問者可以訪問和瀏覽。

          10. 網站維護 - 定期更新網站內容和功能,修復漏洞和錯誤,并定期備份網站數據。

          以上是制作自己的網頁鏈接和制作網站的大致流程,其中每個步驟都可能涉及進一步的細節和工具選擇,具體取決于你的需求和技能水平。希望這些信息對你有幫助!

          ello,大家好,我是AbnerMing,從這篇文章起,我們開始進入為期10天的網頁制作學習,具體怎么學習,及未來的就業前景,還請大家去看上一篇文章《零基礎10天學會網頁制作之前言》,這篇文章已經很詳細的介紹了,廢話不多說,進入正題吧。

          第一天的課程,比較簡單,基本上沒有很難的知識點,目錄如下:

          1、簡單介紹網頁制作及市場前景

          2、接下來如何學習,定好目標

          3、網頁是怎么制作的

          4、什么是Html

          5、什么是Css

          6、如何進行開發(IDE的選擇)

          7、認識網頁結構html,head,body

          8、h1~h6標簽

          9、p標簽

          10、img標簽

          11、今日總結及作業

          1、簡單介紹網頁制作及市場前景

          這個在昨天的前言中已經很詳細的介紹了,這里再重復一遍,什么是網頁制作,顧名思義,就是在互聯網上開發網頁,對于互聯網中網頁,我們肯定司空見慣,你所瀏覽的任何網站,比如,百度,頭條,淘寶,京東,大學網站,公司官網等等,都是網頁,也就是說,你在Pc端或移動端中的瀏覽器,或者APP嵌套的H5,所看到的,都是一個網頁,與我們的生活息息相關。

          市場前景,像在一線城市,北上廣深,需求量很大,中等的前端工程師,起碼都在12K以上這個水平,當然了高級的更高,30多K,40多K的也大有人在,所以,只要學得扎實,實力雄厚,那么薪資這個也不在話下,大家可以去智聯,Boss,拉鉤等招聘渠道,自己搜一搜這個行業的薪資,是不是我說的這樣,可以去驗證一下。

          2、接下來如何學習,定好目標

          還是如昨天說的一樣,學習,特別是自學,這個是需要很大毅力的,堅持是很重要的,一定要知道,學習是為自己而學,不是為了別人,想要拿到一個高薪,必定要付出更多的努力;給自己定好一個目標,比如學成后,我要找多少的錢的工作,這個很有必要的,因為它可以時長地去鞭策你前進。

          3、網頁是怎么制作的

          我們在網上所看到的百度,淘寶,京東,等等,這些網頁是怎么制作呢?這里先給大家一個定義,不需要刻意地去記,因為接下來的課程,都會一一地講解,首先呢,肯定是由人進行開發的,這里的人一般都是指程序員,也就是以后對于我們的定義,說的高大尚些,就是前端工程師,通過使用IDE(開發工具),編寫代碼,完成的一個個網頁,通過上傳到服務器,再由域名解析后,就是我們所看的各個網頁,當然,中間還有一些流程,這些呢我們后續再說,畢竟我們才剛入門,先了解再說。

          編寫的是什么代碼,才能組成的一個網頁呢,不妨我們以百度為例子,打開百度的官網,點擊鼠標右鍵,點擊查看網頁源代碼。

          查看網頁源代碼圖

          我們看到了什么,是不是如下圖:

          源代碼圖

          當然了,不止百度,你打開任何的網站,查看源代碼后,基本上都是如上圖,這就是組成網頁的代碼,前端里俗稱標簽。

          4、什么是Html

          通過上述第三項,我們在網頁源代碼中不難發現,都是有一個一個的“<>”組成的,這里的左右尖括號,就是書寫網頁的代碼,俗稱標簽,這些就是Html,是描述網頁的一種語言,叫,超文本標記語言,英文是:HyperText Markup Language,簡稱:HTML。

          這里簡單的概述一下,HTML呢, 不是一種編程語言,而是一種標記語言,所謂的標記語言就是由一套標記標簽組成的,和上述我們看到的源代碼里類似,對于這些概念性的東西,大家不用死記硬背,只需要了解即可。

          HTML發展至今,已經經歷了很多版本的更新迭代,每個版本的出現,都是一次革故鼎新。

          HTML發展史

          5、什么是Css

          上述我們知道了什么是Html,知道了網頁都是用Html進行開發的,那么什么是css呢?簡單來說,就是樣式。我們可以看到,很多的網站做得都比較高端,大氣,上檔次,非常漂亮,其實這些絕大數都是用css來開發修飾的,也就是說,通過css,我們可以控制頁面的美觀,文字的大小,顏色,各個標簽的位置,動效等,使得html變得美觀,大方。用一個很簡單的例子,用人來比喻,HTML就好比是一個裸體,CSS呢就是各種不同的衣服,用房子來比喻,HTML是一個毛坯,CSS就是精裝修所用的材料。

          6、如何進行開發(IDE的選擇)

          俗話說的好,工欲善其事必先利其器,我們如何去書寫代碼呢,當然了,開始學的話,用記事本是最好的,因為記事本沒有任何的聯想提示,必須一個一個進行書寫,特別能鍛煉我們的標簽意識,加深我們的代碼能力,這個我是比較推薦的,后續如果對標簽熟練了,我們可以再轉到其他工具上。

          熟練之后,我們選擇的工具就比較多了,比如Dreamweaver,WebStorm,IntelliJ,pycharm等等,任何一個開發編程語言的IDE(開發工具),幾乎都支持web開發,那么具體選擇哪一款,主要是看個人喜好,目前市面上用的最多的是WebStorm,接下來的課程,我們也主要是選擇這款開發工具進行開發,如何進行下載和安裝,到時,我們選擇它開發的時候會一點一點講到,前邊兩三天,我們還是用原始的記事本進行開發,主要目的只有一個,加深大家對標簽的熟練,多培養代碼感。

          7、認識網頁結構html,head,body

          前邊,通過查看各個網頁源代碼,我們是不是發現了一個共同的問題,可以看看下面幾個圖:

          源代碼截圖:

          百度源代碼部分截圖:

          Android干貨鋪源代碼截圖:

          源代碼太多了,截圖并沒有截全,希望大家可以實際去看下各個源代碼,通過查看源代碼,我們發現了一個什么現象,是不是都有這幾個標簽,這就一個網頁的組成結構,如下圖:

          網絡上有很多不同的文件,如果能夠正確聲明HTML的版本,瀏覽器就能正確顯示網頁內容,聲明有助于瀏覽器中正確顯示網頁。

          通用的聲明如下:

          HTML5

          HTML 4.01

          "http://www.w3.org/TR/html4/loose.dtd">

          XHTML 1.0

          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          head標簽,顧名思義,就是頭部元素,在head里,我們可以聲明文檔的編碼,標題,作者,描述,引入外部的css,JavaScript等資源,這個是個很重要的元素。

          中文編碼,我們就可以這樣在head里去寫

          body標簽是我們的主體內容,我們日后所有的標簽代碼都要書寫在這里

          雖然說標簽的書寫,不區分大小字母,但是html4.0后,一般規定使用小寫字母,我們可以去看那些主流的網站,也基本采用的是小寫字母,這個我們一定要注意。

          還有一個需要注意的,HTML標簽中,絕大部分標簽,都是雙標簽,有開始有結尾,類似,也就說是成對出現的,當然了也有單標簽,這個日后會介紹。

          不妨,我們花個幾分鐘,在記事本上,把網頁的主體結構給寫一寫吧,在視頻中,我也會帶著大家去寫一寫,在頭條(北漂程序員老李),微信公眾號(一個北漂程序員),視頻,文字教程,我會同步更新,記得關注我哦~

          8、h1~h6標簽

          了解了網頁的主體結構后,我們已經知道了,body標簽里是書寫網頁內容的,我們在網上經??吹揭恍┖谏臉祟}文字,那么這些內容,我們該如何顯示呢?h1到h6就可以滿足我們需求,來,我們一起來寫一寫吧,新建一個記事本文件,這里我起名“day_01.txt”,如下圖:

          文件

          打開文檔,在文檔里我寫上標簽內容,如下圖:

          代碼

          點擊保存后,更改后綴為“.html”:

          更改

          右鍵,選擇打開方式,在瀏覽器中打開,我們就看到了下圖:

          效果

          上邊就是h1到h6所展示的效果,簡單吧,以后比如在文章中定義標題,我們就可以選擇對應的來寫,在head里我們定義了一個title標簽,其實就是網頁的標題,我用紅色箭頭標了出來。

          9、p標簽

          我們經常看新聞,一個新聞,除了標題之外,還有什么,新聞內容,對吧,也就是每段的內容,我們就可以使用p標簽寫展示。

          實例

          我們還在,原來那個文件里寫,右鍵,打開方式,選擇記事本打開。

          代碼

          寫好后,點擊保存,右鍵,打開方式,使用瀏覽器打開。

          效果

          對于p標簽,也是一個很簡單的標簽,大家多練習一下,試著,多寫幾個段落吧。

          10、img標簽

          當我們已經掌握了h標簽和p標簽后,基本上一個無圖的新聞列表,我們就可以搞定了,有的朋友就要問了,我想加入圖片,該如何實現呢,哎,加入圖片就要說到這個img標簽了,img標簽是個單標簽,這個我們注意一下,語法如下:

          <img src="" />

          src呢,是img的固有屬性,指向的是一個圖片路徑,這個圖片路徑呢,可以是網上的一個圖片鏈接,也可以是本地的一張圖片。

          比如我們要實現下圖的效果,該怎么實現呢?

          效果

          這里我們分析一下,一共兩部分組成,上邊是標題,下面是圖片,標題,我們可以使用h系列標簽實現,圖片呢,我們就可以使用img來實現,這里使用本地的圖片吧,后續我們會講到,遠程和本地圖片,還有圖片相關路徑的選擇,圖片資源如下,大家可以右鍵選擇保存。

          素材

          這里我把圖片保存到了同級的目錄下,如下圖:

          文件目錄

          接著,我們更改day_01.html:

          代碼

          效果如下圖:

          實現效果

          11、今日總結及作業

          畢竟第一天,內容還是比較簡單的,一是認識網頁結構,知道一個網頁都有哪些標簽組成,是干什么的,二是掌握,h,p,img標簽的使用。

          今天作業,實現一個新聞列表:

          新聞列表

          圖片素材如下(可右鍵保存):

          素材

          好了,第一天的課程就到這里吧,我是AbnerMing,一個北漂的程序員,期待您的關注!


          主站蜘蛛池模板: 人妻av无码一区二区三区| 无码视频一区二区三区在线观看 | 午夜视频一区二区三区| 性色av闺蜜一区二区三区| 无码人妻精品一区二区三区蜜桃| 亚洲一区在线免费观看| 免费无码一区二区三区| 亚洲免费视频一区二区三区| 一区二区三区AV高清免费波多| 午夜DV内射一区区| 国产成人无码一区二区三区在线 | 一区二区乱子伦在线播放| 日韩AV无码一区二区三区不卡毛片| 亚洲一区二区三区国产精华液| 精品无码综合一区二区三区| 日本精品一区二区三区在线视频| 日本一区频道在线视频| 精品国产免费一区二区三区| 四虎成人精品一区二区免费网站| 一区二区三区日本视频| 国产成人一区二区精品非洲| 99精品一区二区三区无码吞精| 久久中文字幕一区二区| 久久国产一区二区| 精品一区二区三区色花堂| 中文字幕一区在线播放| 插我一区二区在线观看| 久久综合一区二区无码 | 一区免费在线观看| 精品一区二区三区免费毛片| 国产成人精品一区二三区| 在线精品日韩一区二区三区| 无码丰满熟妇浪潮一区二区AV| ...91久久精品一区二区三区| 久久国产一区二区三区| 久久国产免费一区二区三区| 久久久av波多野一区二区| 亚洲毛片αv无线播放一区| 亚洲色婷婷一区二区三区| 亚洲国产一区二区三区青草影视| av无码人妻一区二区三区牛牛 |