全面系統CSS理解

2021-09-16 22:57:04 字數 2351 閱讀 1862

居中

vertical-align:center;	//垂直元素都設定 垂直居中

margin-left: auto; margin-right: auto; //水平設定居中

給父元素設定 text-align:center

背景

background:  radial-gradient(red, #aaffff,blue);//圓形

background-size: 30px 30px;//設定圓形的大小迴圈平鋪

background:linear-gradient(90deg,transparent 0%,transparent 49.5%,#aaffff 49.5%,#aaffff 50.5%, transparent 0%,transparent 100%), //注意逗號分隔

linear-gradient(0deg,transparent 0%,transparent 49.5%,#aaffff 49.5%,#aaffff 50.5%, transparent 0%,transparent 100%); //使用背景顏色畫**注意size設定

border:20px solid transparent; //邊框為透明的

border-image:url(1.jpg) 20 round //round是完整的重複 實現邊框

border:30px solid ;      

border-top: 30px solid transparent;

border-left:30px solid transparent;

border-right:30px solid transparent;

//實現邊框花乙個三角形trams[aremt是隱藏的意思

border-radius:30px;

//加上圓角和邊框一樣寬可以實現扇形

實現文字滾動條

width:100px;

height:100px;

overflow:auto;//超出部分顯示滾動條

overflow:scroll; //不超出也顯示滾動條

hidden超出部分隱藏

換行

overflow-wrap:break-word;//最好保留單詞太長則打斷整個單詞換行

overflow-wrap:normal;//保留整個單詞換行

word-break: break-all;//打斷成字母

white-space: nowrap;//長文字不換行

word-break: keep-all;//所有單詞保持整體

check標籤美化

.checkbox是class=放在div裡面

.checkbox input

.checkbox input + label

.checkbox input:checked+label

我很帥//可以實現檔案目錄樹結構

**布局

border-collapse:collapse;//去掉兩個單元格之間的邊框和間距
元素

display:block;	//塊級元素

display:inline; //行內元素可以設定對齊

display:inline-block; //行內塊級元素

定位

position:absolute; //脫離文件流。絕對定位:元素可以放置到頁面上的任何位置。不會影響別的元素,相對於最近的父級定位relative或absolute找不到相對於body定位.

position:relative;//生成相對定位的元素,相對於其正常位置進行定位。因此,"left:20" 會向元素的 left 位置新增 20 畫素。位置變但身體不變

position:fixed;// 脫離文件流。廣告定位;

z-index:2;定位優先順序

彈性盒子布局

flexbox

.container

.flex

.設定寬度

float浮動

對兄弟的影響:

全面理解css的設計與維護

css語法立意讓網頁內容與視覺呈現分離,一方面使得頁面維護工作更容易,不會因內容或視覺效果改變影響到另一方,這樣的頁面設計,也對搜尋引擎更為友善,更容易搜尋到頁面內容。powered by 25175.net css,cascading style sheets串接樣式表,網頁外觀的控制語法 wor...

全面理解HTTP

引言 作為一名軟體工程web專業學生,對於http的熟悉掌握是必不可少的,特此做記錄,打造自己的http棧。我們經常接觸到的就是url了,它就是我們訪問web的乙個字串位址,那麼uri是什麼呢?他們是什麼關係呢?url uniform resource location 統一資源定位符 uri un...

UIIC的全面理解

uicc universal integrated circuit card 通用積體電路卡是定義了物理特性的智慧卡的總稱。作為3g使用者終端的乙個重要的 可移動的組成部分,uicc主要用於儲存使用者資訊 鑑權金鑰 短消 付費方式等資訊。在3g使用者終端的入網測試中,要求滿足uicc的一致性測試要求...