前端學習第七天-css常用樣式設置

達標要求

  • 掌握元素的顯示與隱藏

  • 熟練應用溢出的文字隱藏

  • 熟練掌握版心和布局流程

1. 元素的顯示與隱藏

在CSS中有三個顯示和隱藏的單詞比較常見，我們要區分開，他們分別是 display visibility 和 overflow。

他們的主要目的是讓一個元素在頁面中消失，但是不在文檔源碼中刪除。 最常見的是網站廣告。

1.1 display 顯示

display 設置或檢索對象是否及如何顯示。

display : none 隱藏對象 與它相反的是 display:block 除了轉換為塊級元素之外，同時還有顯示元素的意思。

特點： 隱藏之后，不再保留位置。

1.2 visibility 可見性

設置或檢索是否顯示對象。

visible : 　對象可視

hidden : 　對象隱藏

特點： 隱藏之后，繼續保留原有位置。

1.3 overflow 溢出

檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。

visible : 　不剪切內容也不添加滾動條。

auto : 　 超出自動顯示滾動條，不超出不顯示滾動條

hidden : 　不顯示超過對象尺寸的內容，超出的部分隱藏掉

scroll : 　不管超出內容否，總是顯示滾動條

1.4顯示與隱藏總結

屬性區別用途
display隱藏對象，不保留位置配合后面js做特效，比如下拉菜單，原先沒有，鼠標經過，顯示下拉菜單， 應用極為廣泛
visibility隱藏對象，保留位置使用較少
overflow只是隱藏超出大小的部分1. 可以清除浮動 2. 保證盒子里面的內容不會超出該盒子范圍

2. CSS用戶界面樣式

所謂的界面樣式， 就是更改一些用戶操作樣式， 比如 更改用戶的鼠標樣式， 表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了。 防止表單域拖拽

2.1 鼠標樣式cursor

設置或檢索在對象上移動的鼠標指針采用何種系統預定義的光標形狀。

cursor :  default  小白 | pointer  小手  | move  移動  |  text  文本 | not-allowed

鼠標放我身上查看效果哦：

<ul><li style="cursor:default">我是小白</li><li style="cursor:pointer">我是小手</li><li style="cursor:move">我是移動</li><li style="cursor:text">我是文本</li><li style="cursor:not-allowed"> 禁止</li>
</ul>

2.2 pointer-events(了解)

.disabled {pointer-events: none;
}

  • 阻止用戶的點擊動作產生任何效果

  • 阻止缺省鼠標指針的顯示

  • 阻止CSS里的hover和active狀態的變化觸發事件

  • 阻止JavaScript點擊動作觸發的事件

2.3 輪廓 outline

是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width 
p{outline: #00FF00 dotted thick;}

但是我們都不關心可以設置多少，我們平時都是去掉的。

最直接的寫法是 ： outline: 0; 或者 outline: none;

 <input type="text" style="outline: 0;"/>

2.4 vertical-align 垂直對齊

以前我們講過讓帶有寬度的塊級元素居中對齊，是margin: 0 auto;

以前我們還講過讓文字居中對齊，是 text-align: center;

但是我們從來沒有講過有垂直居中的屬性， 我們的媽媽一直很擔心我們的垂直居中怎么做。

vertical-align 垂直對齊， 這個看上去很美好的一個屬性， 實際有著不可捉摸的脾氣，否則我們也不會這么晚來講解。

vertical-align : baseline |top |middle |bottom

設置或檢索對象(圖片、表單)內容的垂直對其方式，樣式設定到圖片或表單的選擇器上。

值描述
baseline默認。元素放置在父元素的基線上。
top把元素的頂端與行中最高元素的頂端對齊
middle把此元素放置在父元素的中部。
bottom把元素的頂端與行中最低的元素的頂端對齊。

vertical-align 不影響塊級元素中的內容對齊，它只針對于 行內元素或者行內塊元素，特別是行內塊元素， 通常用來控制圖片/表單與文字的對齊。

所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關系了。 默認的圖片會和文字基線對齊。

3. 溢出的文字隱藏

3.1 word-break:自動換行

normal 使用瀏覽器默認的換行規則。

break-all 允許在單詞內換行。

keep-all 只能在半角空格或連字符處換行。

主要處理英文單詞

3.2 white-space

如何處理元素內的空白

屬性名white-space
屬性值normal | nowrap
默認值normal
描述設置如何處理元素內的空白

  • normal：默認處理方式。空白會被瀏覽器忽略

  • nowrap：強制在同一行內顯示所有文本，合并文本間的多余空白，直到文本結束或者遭遇br對象。

下面的表格給總結了 white-space 屬性的行為：

值空白符換行符自動換行
normal合并忽略允許
nowrap合并忽略不允許

3.3 text-overflow 文字溢出

text-overflow : clip | ellipsis

設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出

clip : 　不顯示省略標記（...），而是簡單的裁切

ellipsis : 　當對象內文本溢出時顯示省略標記（...）

注意一定要首先強制一行內顯示，再次和overflow屬性 搭配使用

.hid-kk{width: 100px;height: 100px;display: block;/*1. 先強制一行內顯示文本*/white-space: nowrap;/*2. 超出的部分隱藏*/overflow: hidden;/*3. 文字用省略號替代超出的部分*/text-overflow: ellipsis;
}

4. CSS的書寫順序

（1）定位屬性：position display float left top right bottom overflow clear z-index

（2）自身屬性：width height padding border margin background

（3）文字樣式：font-family font-size font-style font-weight font-varient color

（4）文本屬性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

（5）css3中新增屬性：content box-shadow border-radius transform……

按照上述1 2 3 4 5的順序進行書寫。

目的：減少瀏覽器reflow（回流），提升瀏覽器渲染dom的性能

原理：瀏覽器的渲染流程

5. 版心和布局流程

閱讀報紙時容易發現，雖然報紙中的內容很多，但是經過合理地排版，版面依然清晰、易讀。同樣，在制作網頁時，要想使頁面結構清晰、有條理，也需要對網頁進行“排版”。

“版心”(可視區) 是指網頁中主體內容所在的區域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等。

5.1 布局流程

為了提高網頁制作的效率，布局時通常需要遵守一定的布局流程，具體如下：

1、確定頁面的版心（可視區）。

2、分析頁面中的行模塊，以及每個行模塊中的列模塊。

3、制作HTML結構 。

4、CSS初始化，然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網頁的各個模塊。

5.2 一列固定寬度且居中

最為常用的結構

5.3 兩列左窄右寬型

比如:小米官網

5.4 通欄平均分布型

比如:中嵐簽證

6. BFC(塊級格式化上下文)

6.1 什么是BFC

BFC(Block formatting context)直譯為"塊級格式化上下文"。

在官方文檔到中介紹：一個BFC區域包含創建該上下文元素的所有子元素，BFC是一塊塊獨立的渲染區域，可以將BFC看成是元素的一種屬性，擁有了這種屬性的元素就會使他的子元素與世隔絕，不會影響到外部其他元素。

6.2 如何創建BFC

  1. html根元素

  2. 設置浮動,float的值是left或者right

  3. 設置定位

    • position不是static或者relative

    • 是absoulte或者fixed

  4. display的值是inline-block,table-cell(表格單元格)等

  5. 設置overflow

    • overflow的值不是visible

    • 是hidden，auto，scroll

  6. 彈性布局，flex

6.3 利用BFC解決問題

  1. 解決外邊距的塌陷問題(垂直塌陷)

  2. 利用BFC解決包含塌陷

  3. 清除浮動產生的影響

  4. BFC可以阻止標準流元素被浮動元素覆蓋

    注意點:

    • 一個BFC區域只包含其子元素，不包括其子元素的子元素。

    • 并不是所有的元素都能成為一塊BFC區域，只有當這個元素滿足條件的時候才會成為一塊BFC區域。

    • 不同的BFC區域之間是相互獨立的，互不影響的。利用這個特性我們可以讓不同BFC區域之間的布局不產生影響

7.擴展

web前端開發規范

常見css類名

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/719562.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/719562.shtml
英文地址，請注明出處：http://en.pswp.cn/news/719562.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

94、利用多線程優化卷積運算

94、利用多線程優化卷積運算

上一節簡單介紹了多線程的概念，同時也介紹了在使用多線程編程時，對于數據在線程間的切分，應該遵循的一個原則：那就是切分獨立的數據快，而不切分有數據依賴的數據塊。 最后還拋出了一個問題：對于卷積算法而言，你覺的切分哪個維度最合適呢？ 卷積的切分 之前花了很多篇幅…
閱讀更多...
數據結構從入門到精通——鏈表

數據結構從入門到精通——鏈表

鏈表 前言一、鏈表1.1 鏈表的概念及結構1.2 鏈表的分類1.3 鏈表的實現1.4 鏈表面試題1.5 雙向鏈表的實現 二、順序表和鏈表的區別三、單項鏈表實現具體代碼text.htext.cmain.c單鏈表的打印空間的開辟鏈表的頭插、尾插鏈表的頭刪、尾刪鏈表中元素的查找鏈表在指定位置之前、之后…
閱讀更多...
LabVIEW齒輪傳動健康狀態靜電在線監測

LabVIEW齒輪傳動健康狀態靜電在線監測

LabVIEW齒輪傳動健康狀態靜電在線監測 隨著工業自動化的不斷發展&#xff0c;齒輪傳動作為最常見的機械傳動方式之一&#xff0c;在各種機械設備中發揮著至關重要的作用。然而&#xff0c;齒輪在長期運行過程中易受到磨損、變形等因素影響&#xff0c;進而影響整個機械系統的穩…
閱讀更多...
日常工作總結

日常工作總結

日常工作總結 1000. JAVA基礎1. 泛型1.1 泛型和Object的區別 1100. Spring1. 常用注解1.1 ControllerAdvice注解1.2 緩存Cacheable 2. 常用方法2.1 BeanUtils.copyProperties的用法 3. 常用功能組件3.1 過濾器Filter 2000. Linux應用 1000. JAVA基礎 1. 泛型 1.1 泛型和Objec…
閱讀更多...
【爬蟲實戰】——Python爬取天氣信息

【爬蟲實戰】——Python爬取天氣信息

&#x1f349;CSDN小墨&曉末:https://blog.csdn.net/jd1813346972 個人介紹: 研一&#xff5c;統計學&#xff5c;干貨分享 ???????? 擅長Python、Matlab、R等主流編程軟件 ???????? 累計十余項國家級比賽獎項&#xff0c;參與研究經費10w、40w級橫向 文…
閱讀更多...
大模型推薦落地啦！融合知識圖譜，螞蟻集團發布！

大模型推薦落地啦！融合知識圖譜，螞蟻集團發布！

引言&#xff1a;電商推薦系統的新突破 隨著電子商務平臺的蓬勃發展&#xff0c;推薦系統已成為幫助用戶在信息過載時代中篩選和發現產品的關鍵工具。然而&#xff0c;傳統的推薦系統主要依賴歷史數據和用戶反饋&#xff0c;這限制了它們在新商品推出和用戶意圖轉變時的有效性…
閱讀更多...
WindTerm上傳文件

WindTerm上傳文件

閱讀更多...
使用AspectJ進行面向切面編程（AOP）

使用AspectJ進行面向切面編程（AOP）

第1章 引言 大家好&#xff0c;我是小黑&#xff0c;業務開發中&#xff0c;咱們經常會遇到這樣的情況&#xff1a;有些代碼幾乎在每個方法里都要用到&#xff0c;比如日志記錄、權限校驗、或者性能監測。如果每次都手動加入這些代碼&#xff0c;不僅效率低下&#xff0c;而且…
閱讀更多...
深入了解接口測試：方法、工具和關鍵考慮因素

深入了解接口測試：方法、工具和關鍵考慮因素

接口測試是軟件測試中的一項重要工作&#xff0c;它涉及到系統與系統之間的交互點。接口可以是外部接口&#xff0c;也可以是內部接口&#xff0c;包括上層服務與下層服務接口以及同級接口。在接口測試中&#xff0c;我們需要確保接口能夠按照預期的方式進行通信和交互&#xf…
閱讀更多...
C++ 模擬OJ

C++ 模擬OJ

目錄 1、1576. 替換所有的問號 2、 495. 提莫攻擊 3、6. Z 字形變換 4、38. 外觀數列 5、 1419. 數青蛙 1、1576. 替換所有的問號 思路&#xff1a;分情況討論 ?zs&#xff1a;左邊沒有元素&#xff0c;則僅需保證替換元素與右側不相等&#xff1b;z?s&#xff1a;左右都…
閱讀更多...
Java - List排序

Java - List排序

List排序方法 主要有三種方法&#xff08;按推薦度排序&#xff09;&#xff1a; JDK8的streamComparator#compare()Comparable#compareTo() 法1&#xff1a;list的sort() package com.example.a;import java.util.ArrayList; import java.util.Comparator; import java.util…
閱讀更多...
pyqt5 QWebEngineView 重寫mousepressevent捕獲鼠標點擊事件，無響應

pyqt5 QWebEngineView 重寫mousepressevent捕獲鼠標點擊事件，無響應

QWebEngineView 加載網頁后&#xff0c;重寫mousepressevent捕獲鼠標點擊事件&#xff0c;無響應原因是 QWebEngineView在加載界面后&#xff0c;被本身的child接收了該事件&#xff0c; 解決辦法&#xff1a;同過重載event&#xff0c;截取QEvent::ChildAdded事件 from PyQ…
閱讀更多...
islide2024免費版PPT插件下載

islide2024免費版PPT插件下載

一、功能概覽 iSlide PPT插件是一款專為PowerPoint用戶設計的輔助工具&#xff0c;其功能全面且實用&#xff0c;主要包括但不限于以下幾點&#xff1a; 設計元素庫&#xff1a;提供豐富的設計元素&#xff0c;如主題、布局、圖標、配色等&#xff0c;用戶可以直接拖拽使用&a…
閱讀更多...
動態規劃|【雙指針】|611.有效三角形個數

動態規劃|【雙指針】|611.有效三角形個數

題目 611. 有效三角形的個數 給定一個包含非負整數的數組 nums &#xff0c;返回其中可以組成三角形三條邊的三元組個數。 示例 1: 輸入: nums [2,2,3,4] 輸出: 3 解釋:有效的組合是: 2,3,4 (使用第一個 2) 2,3,4 (使用第二個 2) 2,2,3示例 2: 輸入: nums [4,2,3,4] 輸出…
閱讀更多...
【Python】OpenCV-使用ResNet50進行圖像分類

【Python】OpenCV-使用ResNet50進行圖像分類

使用ResNet50進行圖像分類 如何使用ResNet50模型對圖像進行分類。 import os import cv2 import numpy as np from tensorflow.keras.applications.resnet50 import ResNet50, preprocess_input, decode_predictions from tensorflow.keras.preprocessing import image# 設置…
閱讀更多...
03-03學習筆記 內存管理初始化

03-03學習筆記 內存管理初始化

當指針位數為32位時&#xff0c;virtual space 的大小就是 2^32&#xff0c;只有當指針位數是64位時&#xff0c;virtual space 才會增大。 通常virtual space 的劃分方式為 3:1, 依靠 PAGE_OFFSET 常數控制&#xff0c;影響著內核空間和用戶空間的上下文切換效率。 像路由器這…
閱讀更多...
【Python】進階學習：pandas--read_excel()函數的基本使用

【Python】進階學習：pandas--read_excel()函數的基本使用

【Python】進階學習&#xff1a;pandas–read_excel()函數的基本使用 &#x1f308; 個人主頁&#xff1a;高斯小哥 &#x1f525; 高質量專欄&#xff1a;Matplotlib之旅&#xff1a;零基礎精通數據可視化、Python基礎【高質量合集】、PyTorch零基礎入門教程&#x1f448; 希…
閱讀更多...
【好書推薦-第七期】《RTC程序設計：實時音視頻權威指南》（音視頻開發必看！）

【好書推薦-第七期】《RTC程序設計：實時音視頻權威指南》（音視頻開發必看！）

&#x1f60e; 作者介紹&#xff1a;我是程序員洲洲&#xff0c;一個熱愛寫作的非著名程序員。CSDN全棧優質領域創作者、華為云博客社區云享專家、阿里云博客社區專家博主、前后端開發、人工智能研究生。公粽號&#xff1a;洲與AI。 &#x1f388; 本文專欄&#xff1a;本文收錄…
閱讀更多...
AWTK-MVVM 配置文件模型

AWTK-MVVM 配置文件模型

配置文件模型 AWTK-MVVM 內置了一些配置文件模型&#xff0c;用于讀寫各種配置文件&#xff0c;比如&#xff0c;JSON/XML/INI/CSV/UBJSON 等。 文件名中可以引用下面的變量。 ${app_dir} 應用程序目錄${user_dir} 用戶目錄${temp_dir} 臨時目錄 json(url${app_dir}/demos/de…
閱讀更多...
nodejs，JSDOM 補 window環境

nodejs，JSDOM 補 window環境

window[atob] 是一個在瀏覽器中使用的 JavaScript 函數&#xff0c;用于將 base64 編碼的字符串解碼為原始數據。具體來說&#xff0c;atob 函數會將 base64 字符串解碼為一個 DOMString&#xff0c;其中包含解碼后的二進制數據。這在處理從服務器獲取的 base64 編碼的數據或在…
閱讀更多...
最新文章

Copyright @ 2022~2023