2. 程式人生 > 其它 >P53-前端基礎CSS-行高設定

P53-前端基礎CSS-行高設定

阿新 • • 發佈：2021-01-30

技術標籤：最美前端# 前端【H5+Css3】

P53-前端基礎CSS-行高設定

1.概述

行高（line height）

  • 行高指的是文字佔有的實際高度
  • 可以通過line-height來設定行高
    • 行高可以直接指定一個大小（px em）
    • 也可以直接為行高設定一個整數
    • 如果是一個整數的話，行高將會是字型的指定的倍數
  • 行高經常還用來設定文字的行間距
    • 行間距 = 行高 - 字型大小

字型框

  • 字型框就是字型存在的格子，設定font-size實際上就是在設定字型框的高度
  • 行高會在字型框的上下平均分配

2.行高設定

<!DOCTYPE html>
<html>
  <head
 
>
    <meta charset="UTF-8">
    <title>行高</title>
    <style>
      div {
        /* 
                行高（line height）
                    - 行高指的是文字佔有的實際高度
                    - 可以通過line-height來設定行高
                        行高可以直接指定一個大小（px em）
                        也可以直接為行高設定一個整數
                            如果是一個整數的話，行高將會是字型的指定的倍數
                    - 行高經常還用來設定文字的行間距
                        行間距 = 行高 - 字型大小

                字型框
                    - 字型框就是字型存在的格子，設定font-size實際上就是在設定字型框的高度

                行高會在字型框的上下平均分配

            */
 

            
        font-size: 50px;
        border: 1px solid red;
        
        /* 指定行高的單位為px */
        line-height: 100px;

        /* 指定行高的單位是em，1個em大小就是當前font-size設定的px大小。 */
        line-height: 2em;

        /* 可以將行高設定為和高度一樣的值，使單行文字在一個元素中垂直居中 */
        height: 100px;
        line-height: 100px;
        
      }
 

    </style>
  </head>
  <body>
    <div>今天天氣這不錯 Hello hello </div>
  </body>
</html>

3.效果展示

在這裡插入圖片描述

相關推薦

P53-前端基礎CSS-行高設定

技術標籤：最美前端# 前端【H5+Css3】 P53-前端基礎CSS-行高設定 1.概述 行高（line height）

CSS行高

行高的構成及行高的作用：行高不決定元素的高度，但是它決定元素所佔的空間大小，所以，經常會看到設定了line-height的元素有留白的情況。

前端基礎 | CSS

1. 為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆分開,CSS由此思想而誕生.

2020年12月-第01階段-前端基礎-CSS初識

CSS層疊樣式表 理解 css的目的作用 css的三種引入方式 1.HTML的侷限性 說起HTML，這其實是個非常單純的傢伙， 他只關注內容的語義，

2020年12月-第01階段-前端基礎-CSS字型樣式

CSS字型樣式屬性除錯工具 應用 使用css字型樣式完成對字型的設定 使用css外觀屬性給頁面元素新增樣式

2020年12月-第01階段-前端基礎-CSS Day02

CSS Day02 複合選擇器 後代選擇器 並集選擇器 1. CSS複合選擇器 理解 理解css複合選擇器分別的應用場景

2020年12月-第01階段-前端基礎-CSS Day03

CSS Day03 盒子模型（CSS重點） css學習三大重點： css 盒子模型、浮動、定位 主題思路：

P9-前端基礎-CSS簡介

技術標籤：最美前端# 前端【H5+Css3】 P9-前端基礎-CSS簡介 1.概述 網頁分成三個部分：

P63-前端基礎CSS-電影卡片練習圖文佈局

技術標籤：最美前端# 前端【H5+Css3】 P63-前端基礎CSS-電影卡片練習圖文佈局 1.概述

P62-前端基礎CSS-背景圖片位移之雪碧圖效果

技術標籤：最美前端# 前端【H5+Css3】 P62-前端基礎CSS-背景圖片位移之雪碧圖效果

P21-前端基礎-CSS顏色四種表示方式

技術標籤：最美前端# 前端【H5+Css3】 P21-前端基礎-CSS顏色四種表示方式 1.概述 顏色單位： 在CSS中可以直接使用顏色名來設定各種顏色 比如：red、orange、yellow、blue、green … … 但是在css中直接使用顏色

P18-前端基礎-CSS樣式的繼承

技術標籤：最美前端# 前端【H5+Css3】 P18-前端基礎-CSS樣式的繼承 1.概述 樣式的繼承，我們為一個元素設定的樣式同時也會應用到它的後代元素上 繼承是發生在祖先後後代之間的 繼承的設計是為了方便我們的開發，

P17-前端基礎-CSS偽元素選擇器

技術標籤：最美前端# 前端【H5+Css3】 P17-前端基礎-CSS偽元素選擇器 1.概述 偽元素，表示頁面中一些特殊的並不真實的存在的元素（特殊的位置） 偽元素使用 :: 開頭

P23-前端基礎-CSS盒子模型

技術標籤：最美前端# 前端【H5+Css3】 P23-前端基礎-CSS盒子模型 1.概述 盒模型、盒子模型、框模型（box model）

前端基礎-CSS層疊樣式表

CSS CSS被用來同時控制多重網頁的樣式和佈局。 通過使用 CSS，所有的格式化均可從 HTML 中剝離出來，並存儲於一個獨立的檔案中。

css規範、行高、三大特性、背景、盒子模型

CSS書寫規範 空格規範 選擇器 與 {}之間必須包含空格 示例 ： .selector{} 屬性名與之後的 : 之間不允許包含空格，: 與屬性值之間必須包含空格

前端之css屬性設定等相關內容-53

CSS屬性設定 1.字型屬性 1.1 font-weight：文字粗細 取值描述 normal 預設值，標準粗細

前端基礎小知識：常用的選擇器的一些運用，及匯入CSS的四種方法

1.這裡我們運用不同選擇器來製作炫彩logo 我們用到了，標籤選擇器，類選擇器，ID選擇器，分別給予不同屬性值，來變化下面字型的顏色和大小，具體程式碼如下：

前端基礎篇：CSS文字屬性集合

一、字型屬性 font-family：‘微軟雅黑’指定字型Css屬性設定樣式 font-size: 12px/em/rem

Flutter 圖片和多行文字中的第一行對齊，文字行高、行距、偏移設定

技術標籤：# Flutterflutter 眾所周知，圖片和文字對齊有很多種實現方式，並且基於中軸線對的很齊