CSS基礎知識(高階技術)

2021-10-09 11:01:25 字數 2165 閱讀 9791

css使用者介面樣式

溢位的文字省略號顯示

css精靈技術(sprite)

display 設定或檢索物件是否及如何顯示

語法

display: none 隱藏物件

display:block 除了轉換為塊級元素之外,同時還有顯示元素的意思

特點隱藏之後,不再保留位置

設定或檢索是否顯示物件

語法

visibility:visible ; 物件可視

visibility:hidden; 物件隱藏

特點隱藏之後,繼續保留原有位置

檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容

屬性值及描述

visible 不剪下內容也不新增滾動條

hidden 不顯示超過物件尺寸的內容,超出的部分隱藏掉

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

auto 超出自動顯示滾動條,不超出不顯示滾動條

設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀

是繪製於元素周圍的一條線,位於邊框邊緣的外圍

語法

outline : outline-color ||outline-style || outline-width
文字域右下角不可拖拽語法

有寬度的塊級元素水平居中對齊,是margin: 0 auto;

讓元素中的文字居中對齊,是 text-align: center;

語法

vertical-align : baseline|top|middle|bottom
vertical-align不影響塊級元素中的內容對齊,它只針對於行內元素或者行內塊元素,通常用來控制/表單與文字的對齊

預設的會和文字基線對齊

原因

或者表單等行內塊元素底線會和父級盒子的基線對齊

解決方法

給img vertical-align:middle | top| bottom等等,讓不和基線對齊

給img 新增 display:block; 轉換為塊級元素就不會存在問題了

/*1. 先強制一行內顯示文字*/

white-space: nowrap;

/*2. 超出的部分隱藏*/

overflow: hidden;

/*3. 文字用省略號替代超出的部分*/

text-overflow: ellipsis;

white-space設定或檢索物件內文字顯示方式,用於強制一行顯示內容

white-space:normal ;預設處理方式

white-space:nowrap ; 強制在同一行內顯示所有文字,直到文字結束或者遭遇br標籤物件才換行

設定或檢索是否使用乙個省略標記(…)標示物件內文字的溢位

text-overflow : clip ;不顯示省略標記(...),而是簡單的裁切

text-overflow:ellipsis ; 當物件內文字溢位時顯示省略標記(...)

為了有效地減少伺服器接受和傳送請求的次數,提高頁面的載入速度

css 精靈其實是將網頁中的一些背景影象整合到一張大圖中(精靈圖),各個網頁元素通常只需要精靈圖中不同位置的某個小圖,要想精確定位到精靈圖中的某個小圖。background-image、background-repeat、background-position屬性進行背景定位

web技術 CSS基礎知識

css指層疊樣式表 cascading style sheets css語法由兩個主要的部分構成 選擇器 html元素 以及一條或多條宣告 新增注釋 selector,selector5 p內聯樣式 內部樣式 外部樣式 瀏覽器預設樣式 外部樣式 內部樣式 內聯樣式 這是乙個段落 屬性說明值 版本ba...

CSS 基礎知識

選擇器 元素選擇器 p 後代選擇器 li a id選擇器 intro some text 類選擇器 dateposted 24 3 2006 偽類選擇器 a link 通用選擇器 浮動 定位 框模型 定位的四種模型 相對定位 relative 相對定位的座標原點 該元素在普通流中的位置 特別點 元素...

CSS基礎知識

css規則有兩個主要的部分組成 選擇器,以及一條或者多條宣告h1 css內部的注釋以 開始,以 結束p id選擇器,通過 來選擇html元素 username class選擇器,通過 來選擇一組class元素.center 指定特定的html元素使用classp center 引入外部樣式表 rel...