updatetime--2023年3月21日08:03:13
2.css樣式優先順序問題
正常情況下,外部樣式 < 行內樣式 < 內部樣式(由低到高),
"!important"可以打破這種優先順序順序,如果css樣式,被"!important"修飾,則被其修飾的樣式具有最高優先順序,即:
外部樣式 < 行內樣式 < 內部樣式 < 被"!important"修飾的樣式(由低到高)。
舉例1:
/*外部樣式*/div/*內部樣式*/
div/*行內樣式*/
<
div
style
="background-color: blue;"
>測試css樣式優先順序
div>
結果:div背景色為黃色
注意:如果行內樣式同樣被"!important"修飾,則優先順序遵循正常情況!
1.背景色線性漸變
background-color:linear-gradient(100deg,#fff,#111);/*由黑色向白色漸變 deg表示度數
*/
updatetime--2023年10月25日11:37:53
updatetime--2023年11月23日09:53:46
2.設定**的邊框被合併為乙個單一的邊框
border-collapse: collapse;/*前提:table的border=1或border="1"或border="1px"*/
updatetime--2023年10月29日09:04:07
3.設定div最小高度及高度自動伸展
#divheight
<div
id="divheight"
>
此div具有最小高度且高度可以隨著內容的增高而自動伸展
<
br/>
此div具有最小高度且高度可以隨著內容的增高而自動伸展
div>
設定最小寬度及寬度自動伸展
width:auto;min-width:5px;height:800px;
4.禁止換行的兩種方式
方式一:
通常在瀏覽器上顯示的文件會在到達瀏覽器的橫幅底端時自動換行,但是如果文字被包含在~標籤裡的話,則不會換行
使用標籤
方式二:
使用css樣式
style="white-space:nowrap;"
updatetime--2023年11月25日08:57:49
設定td禁止換行
<td nowrap
="nowrap"
>
td>
updatetime--2023年10月31日09:44:17
5.display樣式
inline 行內元素(與其它元素共佔一行,不換行,不能設定寬和高)
block 塊級元素(單獨佔一行,可以設定寬和高)
inline-block 行內塊級元素(與其它元素共佔一行,但是可以設定寬和高)(兼有了行內元素和塊級元素的特徵)
none 將該元素隱藏
document.getelementbyid("aa").style.display="";//表示的是:清除display樣式,display將使用預設值(塊元素會變成block,內聯元素會變成inline)
updatetime--2023年11月24日11:44:31
6.ime-mode語法和text-transform語法
updatetime--2023年12月15日19:52:16
/*遮蔽輸入法,可以用來禁止錄入中文
*/ime-mode:disabled; //ie相容,chrome不相容
詳細介紹
ime-mode語法:(該語法在google瀏覽器上無效,需要用js進行控制,見"input文字框輸入內容控制"檔案)
ime-mode : auto | active | inactive | disabled
取值:auto : 預設值。不影響ime的狀態。與不指定 ime-mode 屬性時相同
active : 指定所有使用ime輸入的字元。即啟用本地語言輸入法。使用者仍可以撤銷啟用ime
inactive : 指定所有不使用ime輸入的字元。即啟用非本地語言。使用者仍可以撤銷啟用ime
disabled : 完全禁用ime。對於有焦點的控制項(如輸入框),使用者不可以啟用ime
7.設定div裡的內容自動換行
當div框固定高度寬度後,顯示的內容超過div的寬度,超出內容不換行的問題
設定css樣式
word-wrap:break-word;
8.實現div,li裡的內容超出容器寬度時,超出部分以".."形式顯示
前提:必須先確定div,li的寬度
新增屬性
text-overflow:ellipsis;white-space:nowrap;
overflow:hidden;
9.文字框和密碼框在ie瀏覽器顯示樣式控制
/*去除ie瀏覽器文字框右側出現叉號
*/#aa::-ms-clear
/*去除ie瀏覽器密碼框右側出現眼睛
*/#bb::-ms-reveal
<input
id="aa"
type
="text"
/>
<
input
id="bb"
type
="password"
/>
updatetime--2023年3月21日20:16:33
10.設定邊框圓角
border-radius可以同時設定1到4個值(順時針:上、右、下、左)
border-radius: 5px;
支援:ie9及以上
updatetime--2023年11月2日10:12:08
/*chatbox start
*//*
設定頁面的內外邊距 */*
/*背景大於容器或小於容器,使用cover值,可以是背景填充容器
*/body
/*經常出現的問題:給div定義寬和高後,如果div裡面沒有內容的話,該div雖然已經存在,但是在頁面上是顯示不出來的,
解決方案:給div新增邊框或背景色
*//*
設定div的外邊距
margin屬性,只有乙個值,表示距離上下左右4個方向的外邊距均為設定的值;
只有兩個值,第乙個值表示距離上下的外邊距,第二個值表示距離左右的外邊距;
有三個值,不常用,這裡不介紹;
有4個值,依次表示上、右、下、左外邊距的距離(記憶:順時針方向);
以,只有乙個值為例,如果上面有內容,左右和下面沒有內容的話,起作用的只有上面,即:即使定義了指定方向的外邊距,如果對應方向上沒有內容,該樣式不會起作用
*//*
不定義高度:容器的高度會隨著裡面內容高度的變化而變化
*/.chatbox
/*設定文字內容在容器中居中
*/h1
/*設定文字框的邊框顏色,聚焦時消除邊框變色,調整游標距離邊框的間距
*/.chatbox .inputtext
.chatbox .btn
/*使用panding改變內邊距時,會將div的寬度或高度撐大,因此當調整容器內邊距時,且定義了容器的寬度或高度時,需要修改對應的寬度和高度
*/.chatbox .c_message
.chatbox .c_send
/*end chatbox
*/
Vue知識點集錦
一 使用了vue的頁面,肯定會經歷乙個完整的生命週期,與一般的普通頁面是不一樣的,所以直接獲取dom結構是獲取不到的,只有在mounted之後才能獲取到 servicemanagementaddcrud.vueinit function 一些dom操作,在vue的mounted 函式裡面再進行繫結 ...
CSS中容易忽略的知識點集錦
在css樣式層疊表中,我們可使用到的長度單位一般有如下的幾種方式 畫素 px 百分比em 這是乙個相對單位,是相對於當前元素的字型大小進行計算,也就是說 1em 1font size rem 這也是乙個相對單位,不同的是,rem是相對於根元素的字型大小進行計算的。偽類和偽元素 偽類 用來描述乙個元素...
Shell 程式設計知識點集錦
shell 指令碼是按行分隔每一條 shell 語句。如果每一條shell語句寫在單獨一行,此時可以加分號,也可以不加,沒有什麼區別。如果多條 shell 寫在同一行,那麼此時需一定要用分號將不用語句分隔開來。dev null 代表空裝置檔案,類似於 windows 的 站。代表重定向到 例如 ec...