關於css的小知識

2021-08-04 13:11:28 字數 1108 閱讀 8459

關於css的小知識以及例子:

關於元素的隱藏:display和visibility的區別。

(1)display:none;元素隱藏後不占有空間

(2)visibility:hidden;元素隱藏後占有空間

box-shadow(陰影)的使用:box-shadow:1px 2px 3px 4px red inset(outset); 各個值的含義:(1)1px:x軸方向的偏移,左邊為負,右邊為正

(2)2px:y軸方向的偏移,上方為負,下方為正

(3)3px:羽化,值越大越模糊,值越小越清晰

(4)4px:陰影大小

(5)red:陰影顏色

和大家來一起做如何繪製乙個半圓:

效果:

css中偽元素before或after中content的特殊用法attr:可動態設定before或after中的content

①一般用法

效果:

haorooms測試

② 製作tip

效果:

haorooms測試

③製作半邊文字:

效果:

前端

部落格

使用css實現垂直水平居中

設父元素類名為parent,子元素類名為child,使child在parent中垂直居中

方式一:

.parent

.child

方式二:

.parent

.child

方式三:

.parent

CSS日常小知識

假如有乙個padding border margin 與其他的三條邊不同,其他三條邊一樣,這個時候我們設定總體樣式,再單獨去設定它的樣式。border 5px solid red css 層疊特效 border bottom 10px dashed green 有一些標籤會有預設的樣式,比如預設的m...

CSS屬性小知識

1.float 注意 1.浮動元素產生了浮動流,塊級元素看不到他們,也就是會忽略它所佔的位置 2.產生bfc的元素和文字類屬性的元素以及文字都能看到他們 3.有inline 睡醒都具有文字屬性 4.若設定浮動,應該馬上清除浮動,避免不必要的影響 清除浮動的方法 方法一 新增新的元素 應用 clear...

css簡單小知識

一.css盒子模型 1 屬性 外邊距 margin 邊框 border 內邊距 padding 和內容 content 2.種類 ie盒子模型和標準模型兩種。標準模型 box sizing content box ie模型 box sizing border box 3.筆記 1 內邊距paddin...