css基礎小知識筆記

1\css規定的定位基值有三種：标準文檔流、浮動及定位

2、w3c标準：網際網路制定的一系列标準。{

結構化标準語言（HTML、XML）

表現标準語言（css）

行為标準語言（DOM，ECMAScript）

}

倡導結構，樣式，行為分離

3、樣式就近原則：行内 》 内部 》 外部

4\盒子模型：第一層：border 第二層：Content和padding 第三層：background圖 

           第四層：background-color 第五層：margin

5、清楚浮動： clear：both  或者 給被影響的元素添加{width:100%;overflow:hidden;}

6position: static(靜态定位)

6、overflow:auto; 定義了這個屬性的元素會自動包裹超出的子元素，清除自身的浮動

7、IE6 不支援hover僞類，css為了相容IE6下載下傳一個csshover.htc的檔案然後引入進去，同時在在頁面body中引用一下：

body{

behavior:url(csshover.htc);

8  border-left: 6px solid transparent;（transparent 顔色透明）

9 box-shadow: -1px 0 0 rgba(255,255,255,.3);  rgba:代表(red,green,blue,alpha透明通道) 注意：rgb:個取值

0-255 a:取值0-1

10、.top-nav ul li:first-child > a 表示：li下的第一個子元素下的a标簽

    .top-nav ul li:last-child > a  表示：li下的最後一個子元素下的a标簽

11、background-image: linear-gradient(#04acec,#0186ba) 給背景設定漸變色

12、visibility: hidden; 設定影藏  visibility: visible; 設定顯示

13、/* 針對IE清除浮動 */

.top-nav{

zoom:1; /* 強制重新整理架構 */

14、

/* 清除浮動 給top-nav前後加上空内容，顯示為table，利用after在元素後邊插一個空格，然後清除浮動*/

.top-nav:before,.top-nav:after{

content:" ";  

display: table;

.top-nav:after{

clear:both;

15、box-sizing:border-box;   讓内容和padding都在内部展現，不會超過邊框

16、-webkit-backface-visibility:hidden; 當元素不面向螢幕時影藏

17、-webkit-transform-style:preserve-3d; 支援子元素的3d效果 -webkit-transform:rotateY(180deg);

   沿着Y軸旋轉

18、子元素設定了浮動，影響了父元素，父元素清除浮動：

.active-preview:after{

content:'';

display:block;

19、letter-spacing:2px;設定字間距

20、有時字型大小不同，行高就會不同，有時影響容器之間的距離

21、同一級的幾個div區分背景顔色，

Odd 和 even 是可用于比對下标是奇數或偶數的子元素的關鍵詞（第一個子元素的下标是 1）。

.active-view:nth-child(odd){

background-color:rgba(255,255,255,0.5);

} 在同一級的幾個div中隻要是基數，就背景顔色變透明一點

 對幾個div分階顯示顔色：

 .card:first-child{

background-color:rgba(0,0,0,0.04);

 }

 .card:nth-child(2){

background-color:rgba(0,0,0,0.08);

 .card:nth-child(3){

background-color:rgba(0,0,0,0.12);

 .card:nth-child(4){

background-color:rgba(0,0,0,0.16);

 .card:nth-child(5){

background-color:rgba(0,0,0,0.2);

 .card:nth-child(6){

background-color:rgba(0,0,0,0.24);

22、©  版權聲明标志

23、讓背景圖檔固定不動

{

background:#444 url(../img/banner.jpg);

background-attachment:fixed;

background-size:cover;

24、滾動标簽知識點：

A:behavior滾動的方式

    alternate:表示在兩端之間來復原動

    scroll：表示從一段混動到另一端，會重複

    slide：表示從一段混動到另一端，不會重複

B:direction滾動的方向down，up,left,right

C:loop滾動的次數（當loop= -1表示一直滾動下去，預設為-1） 

D：scrollamount設定活動字母的滾動的速度

E：scrolldelay設定活動字幕滾動兩次之間的延遲時間

25、lorem*18 自動生成文字

26、

去除article下的div中最後一個的邊框

article div:last-child{

border:none;

27、vertical-align: bottom;設定垂直對齊方式 應用于inline水準以及‘table -cell’元素

inline-block:(IE8+),(IE8+)

'table-cell'元素：table-cell

預設狀态下 支援的是：文字，圖檔，按鈕和單元格

   vertical-align百分比是相對于line-height值計算

{line-height:30px;vertical-align:-10%;} =

{line-height:30px; vertical-align:-3px; /* 30px* - 10% */}

清除浮動：

 clear：left:在左側不允許浮動元素

right:在右側不允許浮動元素

both:在左右側都不允許浮動元素

none:預設值，允許浮動元素出現在兩側

inherit:規定應該從父元素繼承clear屬性的值

28、list-style-image:url(...);  用圖檔代替預設的點。list-style-type:none;也可以去除小圓點

29、  charset="gb2312"設定js檔案編碼

30、.top_content a:link,.top_content a:visited{color:#000;} 定義超連結初始下的狀态和已通路下的狀态顯示

相同顔色。

    .top_content a:hover,.top_content a:active{color:#ff7788;} 設定滑鼠滑過和點選樣式的一緻。

31、塊級元素會重新開機一行開始。

32、ul{

/* background: url(image/..) no-repeat right center; */等統于下面的

background-image: url(mage/..);

background-repeat: no-repeat;

background-position: right center;

33、overflow基本屬性：

visible(預設)

hidden 超出部分影藏

scroll 超出本分會給頁面增加滾動條

auto 自動

inherit IE8以上支援

  overflow-x:hidden  --->IE8+  如果x值和y值不同，則值大的一方會出現滾動條

  overflow-y:hidden

  會出現滾動條：

1、overflow：auto/scroll -- / 

2、内容超出

3、無論什麼浏覽器，預設滾動條都來自而不是标簽

4、IE7-浏覽器預設：html{overflow-y:scroll;}

   IE8+等浏覽器預設：html{overflow-y:auto;}

要去除頁面預設滾動條：html{overflow:hidden;}

js與滾動高度：

chrome浏覽器是：document.body.scrollTop;

其他浏覽器：document.documentElement.scrollTop;

       兩者不會同時出現：一般這樣寫:

var st = document.body.scrollTop || document.documentElement.scrollTop;

      5\overflow的padding-bottom确實作象 導緻：不一樣的scrollHeight(元素内容高度)

      6、滾動條的寬度

  IE7+/Chrome/Firefox（win7）  均是17px

      7、水準居中跳動問題：

修複：1\html{overflow-y:scroll;} 适合IE7,8

              2\.container{padding-left:calc(100vw - 100%);}  100vw-浏覽器寬度；100%-可用内容寬度 适合IE9

     8、自定義滾動條：-webkit

整體部分  -webkit-scrollbar   //滾動條整體部分，其中的整體屬性有width，height，background，border

（就和一個塊級元素一樣）

兩端按鈕 -webkit-scrollbar-button  button //滾動條兩端的按鈕，可以用display：none讓其不顯示，頁可以添加背景圖檔，

顔色改變效果

外層軌道 -webkit-scroll-track    track //外層軌道 可以用display：none讓其不顯示，頁可以添加背景圖檔，

内層軌道 -webkit-scroll-track-piece  //内層軌道，滾動條中間部分，

滾動滑塊 -webkit-scroll-thumb   thumb //滾動滑塊

邊角：-webkit-scroll-corner corner //邊角

-webkit-resize //定義右下角滑動塊的樣式

     9、IOS原生滾動回調效果：-webkit-overflow-scrolling:touch;

    BFC "塊級格式化上下文"  頁面之結果，内部元素載怎麼翻雲覆雨都不會影響外部結果

    overflow與固定定位：影藏失效與固定定位

1、内容設定固定定位，overflow 失效

如何避免失效：

1、overflow元素自身為包含塊 （自身添加相對定位relative）

2、overflow元素的子元素為包含塊 （給子元素添加一個容器，并設定relative）

3、任意合法transform聲明當做包含塊

     10、依賴overflow的樣式表現：

css3有個屬性 resize,可以拉伸元素尺寸 ，但是要想起作用，元素的overflow屬性值不能是visible

resize:both 水準垂直兩邊拉

resize：horizontal 隻有水準方向拉

resize:vertical 隻有垂直方向拉

這個拖拽區域大小是17px*17px 

11、錨點定位：

1 容器可滾動 2、錨點元素在容器内

12、錨點定位于overflow選項房卡技術

13、應用如下 CSS 可以隐藏滾動條：.element::-webkit-scrollbar {display:none}

34、vertical-align:text-top/text-bottom   用于使表情圖檔（原始尺寸背景圖示）與文字的對齊效果

35\ html中的上标和下标：上标 下标  例子：xinxuzhang[1]

36\vertiacl-align的實際應用：

(1)\讓小圖示和文字居中對齊 vertiacl-align負值  img{vertical-align:-10px;} 

(2)\不定尺寸圖檔或多行文字的垂直居中

。主題元素inline-block

。0寬度100%高度輔助元素(在哪圖檔後邊插入一個空标簽)；

。vertical-align:middle;

37、.contact *:focus{outline: none;}  //去掉浏覽器預設的邊，外邊框線

38、visibility:hidden;使元素影藏，visible 出現，所有浏覽器支援

39 input中 disabled="" 有這個屬性使其禁用狀态

40】 使元素實作水準垂直居中：

.header-btn{

position: relative;

text-align: center;

.header-btn a{

vertical-align: middle;

display: inline-block;

height:29px;

line-height: 29px;

font-size: 13px;

border:1px solid #fff;

border-radius: 5px;

color:#fff;

margin: 0 20px;

padding:0 5px;

text-decoration: none;

z-index: 999;

Firefox：display: -moz-box;

-moz-box-pack:center;實作水準居中

-moz-box-align:center;實作垂直居中

Safari/Opera/chrome ：

display: -webkit-box;

-webkit-box-pack:center;

-webkit-box-align:center;

w3c：display: box;

box-pack:center;

align:center;

41、text-size-adjust:none; 讓螢幕旋轉時文字大小不改變

42、*,*:after,*:before{-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

-o-box-sizing:border-box;

-ms-box-sizing:border-box;

box-sizing:border-box;} /* 設定任何元素，以及任何元素最後面插入的讓内容，最前面插入的内容，

這些内容都不要影響這些内容上設定的padding填充，border邊框都不要影響盒子的大小 */

43、*:after,*:before{

display: block;

content:"";

}/* 設定填充内容為快元素，空 */

*:after{

}/* 清除浮動 */

44、一個元素定義了position: absolute; 該元素自動轉化成塊元素

45\3、目前主流的動畫實作方式

jQuery Animate (setInterval)：易用，低效，相容好

CSS transition：硬體加速相容，高效

requestAnimationFrame:易用，充分發揮浏覽器性能

46、textarea在chrome中會有resize功能，加：textarea{resize:none};

47、window.top.document.compatMode可顯示浏覽器為什麼模式

48、移動端開發中讓内容超出是出現滾動條

div {

width:200px;

height:200px;

margin:0 auto;

border:1px solid black;

overflow: scroll;

-webkit-overflow-scrolling: touch;

         }

49  border-collapse: collapse;将border設定成折疊

50 去除輪播圖中圖檔下間距：

圖檔設定display:block 或者vertical-aligin:middle

外層a标簽設定 font-size:0;

51、 盒子居中：{

width:100px;

position:absolute;

left:50%;

top:0;

margin-left:-50px;

52、公用一張精靈圖檔，公用樣式,在移動端隻需縮放一倍（原圖400px*400px）：

[class^="icon_"]{

background: url('../images/sprites.png') no-repeat;

background-size: 200px 200px;

【如果大家對程式員，web前端感興趣，想要學習的，關注一下小編吧。我是一名前端開發程式員，現在在網上授課教前端，每晚都會在群内免費直播。從最基礎的HTML+CSS+JS到移動端HTML5到各種架構都有整理，送給每一位前端小夥伴，這裡是小白聚集地，歡迎初學和進階中的小夥伴。加群：731771211。前端學習必備公衆号ID：mtbcxx】