css揭秘讀書筆記

2022-03-06 07:43:17 字數 1403 閱讀 1977

currentcolor屬性讓hr和段落相同的顏色:

div

hr p裡面的hr標籤不變色

background-origin:padding-box是背景的預設原點,background-position:right 10px bottom 10px;可以讓偏移,如果不支援這個屬性,可以這樣background:url() no-repeat right bottom;

記憶border-image類似background,第乙個屬性是顏色可以是漸變,第二個是影象位址,第三個是切割位置 第四個是平鋪方式 (預設stretch拉伸。repeat,round比較常用)

想把乙個矩形盒子變成橢圓,只需要設定border-radius:50%;如果是乙個正方形就會變成圓

關於border-radius圓角半形的詳細理解:border-radius:50% / 100% 100% 0 0;就相當於border-radius:50% 50% 50% 50% / 100% 100% 0 0;左邊是半徑r1相當於x座標,右邊半徑r2相當於y座標,兩個座標確定乙個圓心點,以這個點畫出的圓角可能是四分之一圓(當r1,r2相等時),可能是四分之一的橢圓(r2是r1的二倍時),總結一下就是兩點確定圓角區域,理解的時候可以想象把乙個盒子放到了x座標上。

快速記憶半圓角規則:11確定單角,51確定二上,15確定二右

為某個字元指定特殊的字型樣式:

@font-face

h1 浮動元素的水平居中:

.box

.box p

我是浮動的

浮動居中

高階選擇器的組合使用:

這個選擇器選中li為n的所有列表項

li:first-child:nth-last-child(n),

li:first-child:nth-last-child(n)~li{}

這個選擇器選中li大於4的所有列表項

li:first-child:nth-last-child(n+4),

li:first-child:nth-last-child(n+4)~li{}

這個選擇器選中li最大為4的所有列表項

li:first-child:nth-last-child(-n+4),

li:first-child:nth-last-child(-n+4)~li{}

這個選擇器選中li為2到6個的所有列表項

li:first-child:nth-last-child(n+2):nth-last-child(-n+6),

li:first-child:nth-last-child(n+2):nth-last-child(-n+6)~li{}

頁尾固定到底部的解決方案

這是頭部

這是主要區域

這是頁尾

頭部和頁尾寬屏布局:

這是內容區域

CSS揭秘讀書筆記 (一)

css揭秘讀書筆記 一 一 半透明邊框 要想實現半透明邊框可以使用border div hsla h是色調,取值範圍是0 360。s是飽和度,取值範圍是0 100 l是亮度,取值範圍是0 100 a是透明度,取值範圍是0 1。background clip 用於調整背景圖的顯示區域,有3個值,bor...

css編碼技巧 css揭秘讀書筆記

最近在看 css揭秘 於是寫了文章來作筆記,除此以外還會補充一些自己遇到的筆試題。希望大家都有所收穫。在實踐中,可維護性的最大要素是儘量減少改動時要編輯的地方。舉例說明 padding 6px 12px border 1px solid 446d88 background 58a linear gr...

《sip揭秘》讀書筆記1

sip事務的概念 乙個sip請求以及由它觸發的一系列應答 包括臨時應答和乙個最終應答 sip請求有6種 核心規範定義的,也有擴充套件 也叫6個方法 method欄位標識 invite,ack,options,bye,cancel,register sip請求的格式包括請求行 如invite sip ...