常用的滑動 隱藏 定位等CSS樣式

2021-08-11 06:08:35 字數 1237 閱讀 9102

專案中常用的樣式(個人了解的有不對之處多多指教)

基本選擇器

組合選擇器

後代選取器(以空格分隔)

子元素選擇器(以大於號分隔)

相鄰兄弟選擇器(以加號分隔)

普通兄弟選擇器(以破折號分隔)

混合選擇器

1、滑鼠放上去樣式變化

以a標籤為例

a:hover

2、定位

定位屬性

position: absolute;絕對定位//相對於整個頁面的定位

position: relative;相對定位//相對於父級元素的定位

位置固定後可通過以下幾個元素調節具體的位置

left;top;right;bottom

通過float進行定位和display: flex;

用於平級關係之間的位置定位

div預設的循序是從上到下;li標籤預設從左到右

文字居中對齊中一定要設定width屬性 否則樣式不起作用

如果位置發生覆蓋

可以在布局中清除浮動動,因為元素浮動後周圍的元素都會發生變化。

.clearfix

3、實現簡單的動態渲染

display:block;

display:none;

滑鼠放上去顯示隱藏內容

.父類:hover .子類

放到同級區域顯示同級內容可以使用jquery實現

另一種可以通過透明度控制顯示或者隱藏

屬性名:

opacity: 0;透明不顯示。引數為1的時候顯示

邊框線的設定和滑鼠到上去變大    

box-shadow: 4px 4px 8px 3px #ddd;

不同瀏覽器下旋轉實現屬性

transform:rotate(30deg);

-ms-transform:rotate(30deg); /* ie 9 */

-webkit-transform:rotate(30deg); /* safari and chrome */

放大或者縮小屬性

-ms-transform: scale(2,3); /* ie 9 */

-webkit-transform: scale(2,3); /* safari */

transform: scale(2,3); /* 標準語法 *

修改邊框形狀例如橢圓等

border-radius: 4px;

CSS樣式的定位

當元素沒有position定位屬性時,所有元素按照他們自己的定位標準進行定位,比如說 每乙個div標籤就佔一行。但是當元素我有了position屬性,那麼div原先占有一行的屬性就被覆蓋掉了 可以說沒有用了 例 控制代碼1控制代碼2 containr 控制代碼控制代碼cont 結果 現在來看看abs...

CSS常用的樣式

css文字屬性 color 999999 文字顏色 font family 宋體,sans serif 文字字型 font size 9pt 文字大小 font style itelic 文字斜體 font variant small caps 小字型 letter spacing 1pt 字間距離...

css 常用的樣式

文字 div div標籤 物件內內容 和文字等 將 靠左對齊 div div標籤內內容 和文字等 靠右對齊 將div div標籤內內容 和文字等 將 居中對齊 line height 30px height 30px 文字的水平居中 font family 宋體 字型 font size 1em 文...