CSS基礎知識總結之使用者介面詳解

前言

day6主要講述了元素的顯示與隱藏及使用者介面

1、元素的顯示與隱藏

目的：讓乙個元素在頁面中顯示或隱藏

1.1 display 顯示

display

: none 隱藏物件
display：block 除了轉換為塊級元素之外，同時還有顯示元素的意思。

1.2 visibility 可見性

visibility：visible ; 　物件可視

visibility：hidden; 　 物件隱藏

1.3 overflow 溢位

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

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

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

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

1.4 元素的顯示與隱藏總結

區別用途

display隱藏物件，不保留位置

配合後面js做特效，比如下拉列表，原先沒有，滑鼠經過，顯示下拉列表， 應用極為廣泛

visibility隱藏物件，保留位置

使用較少

overflow只是隱藏超出大小的部分

1. 可以清除浮動 2. 保證盒子裡面的內容不會超出該盒子範圍

2、使用者介面樣式

2.1 滑鼠樣式cursor

描述default小白 預設

pointer小手

move移動

text文字

not-allowed禁止

2.2 輪廓線

outline

: outline-color ||outline-style || outline-width

/*取消輪廓線*/

outline
: none;
/*改變邊框顏色*/
border
:1px solid #036;

2.3 防止拖拽文字

/*防止拖拽文字域*/

2.4使用者介面樣式總結

屬性

用途用途
滑鼠樣式更改滑鼠樣式cursor
樣式很多，重點記住 pointer
輪廓線表單預設outline
outline 輪廓線，我們一般直接去掉，border是邊框，我們會經常用
防止拖拽
主要針對文字域resize
防止使用者隨意拖拽文字域，造成頁面布局混亂，我們resize:none
3、vertical-align 垂直對齊
vertical-align

: baseline |top |middle |bottom
/*1. 先強制一行內顯示文字*/

white-space
: nowrap;
/*2. 超出的部分隱藏*/
overflow
: hidden;
/*3. 文字用省略號替代超出的部分*/
text-overflow
: ellipsis;
 
CSS之使用者介面樣式
所謂的介面樣式，就是更改一些使用者操作樣式，比如 更改使用者的滑鼠樣式，表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了。防止表單域拖拽 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動...
CSS基礎知識總結
1 使用css 2 css的優勢是容易修改樣式.標籤與css搭配起來使用能夠較好地修改格式。css中除了在標籤中編碼選擇器外，也可以在html本身的標籤中使用屬性來設定css格式。3 外部css的使用 4 css的優先順序基本原則是就近原則 因此在書寫是一般講外部式放在最前 在有相同權值的情況下，優...
css基礎知識總結
一.權重的比較 1.元素被選中 id選擇器 類選擇器 標籤選擇器 2.元素未選中 誰離目標近選誰 二.元素的居中 1.居中 文字居中 水平居中 單行 多行 屬性 text align center 垂直居中 單行文字 line height height 設定行高等於個高 多行文字 不設定高度，同時...