前端學習筆記css篇(1)

2021-08-21 06:25:03 字數 777 閱讀 3698

1.響應式布局

常用的響應式布局方法:

為不同解析度配置不同的css檔案

/* 當解析度大於720px時 */

@media screen and (min-width: 720px) {}

2.css動畫

css3的animation提供簡單的動畫效果,如設定透明度漸變:

.header 

@keyframes c-opacity

to }

也可以用百分數表示動畫進度

@keyframes slider 

40%

60%

80%

100%

}

3.水平居中和垂直居中

常用的水平居中方法為設定margin-left和margin-right的值為auto,

常用的垂直居中方法為設定position為absolute,top:50%;margin-top:-50%width;

.div-vertical-center
最近學到的一種垂直居中方式

.div-vertical-center
4.瀏覽器相容:css字首

1、-moz-代表firefox瀏覽器私有屬性

2、-ms-代表ie瀏覽器私有屬性

3、-webkit-代表safari、chrome私有屬性

4、-o-代表opera

前端學習筆記(二) CSS(1)

1 認識css 主要用於設定html頁面中的文字內容 字型 大小 對齊方式等 的外形 寬高 邊框樣式 邊距等 以及版面的布局和外觀顯示樣式。css以html為基礎,提供如字型 顏色 背景的控制及整體排版等豐富的功能,同時可以針對不同的瀏覽器設定不同的樣式。2 引入css樣式表 行內式概念 通過標籤的...

學習筆記 CSS篇

1.static 預設情況 2.relative 相對的,與正常位置對比 3.absolute 絕對的,與父元素位置對比 4.fixed 相對於瀏覽器視窗固定 5.sticky 粘性的,滾動後超出區域就粘在目標位置 1.margin 外邊距 2.border 邊框 3.padding 內邊距 4.c...

前端之CSS篇

css本質就是乙個樣式表 主要由選擇器和宣告兩個部分組成,宣告部分又包括屬性跟屬性值 注釋 多行注釋 內部樣式 外部樣式 將css 寫在單獨的檔案中,再進行引用 行內樣式 hello world id選擇器 id名 類選擇器 類名 元素選擇器 元素名 通用選擇器 例子 id1 c1p 後代選擇器 作...