HTML、CSS知識彙總

CSS

透明度問題

設定方法：
1. opacity
2. filter
3. rgba

img{
    opacity: ;
    filter: alpha(opacity=);/* 針對 IE8 以及更早的版本 */
    -khtml-opacity: .;/* -khtml-opacity設定是針對舊版本的Webkit渲染引擎，這種專用屬性現在已經過時了，除非你還有需要相容Safari 1.x.的使用者。 */
    -moz-opacity: ; 
}

一般情況下，我們可以使用css的opcity屬性改變某個元素的透明度，但是其元素下的子元素的透明度也會被改變，即使對子元素重新定義也沒有用，例如：

<div style="opacity:0.4; background-image:url(...);">  
 <div style="opacity:1.0;">  
  顯示文字  
 </div>  
</div>

那有什麼辦法可以解決這個問題呢？

那就是使用rgba定義opacity，rgba（red,green,blue,opacity）定義opacity就不會自動讓子元素繼承了

<style>
    .father{
        backgound-color: rgba(,,,)
    }
    .child{
        backgound-color: rgba(,,,)
    }
</style>
<div class="father">
    <div class="child">使用rgba不會繼承</div>
</div>

擴充：

顔色表示方法：

hex，即我們最常用的十六進制表示顔色，如 #fff
rgb，用基色表示最終混合色，red green blue
rgba，基于2加了a，即alpha透明度
HSL，HSL色彩模式是工業界的一種顔色标準，H 色調（hue），S 飽和度（saturation），L 亮度（light），這個标準幾乎包括了人類視力所能感覺的所有顔色，是目前運用最廣的顔色系統之一
HSLA，基于4加了a，即alpha透明度

#fff
rgba(,,,)
hsla(,%,%,)

absolute relative

絕對定位相對于最近的有position屬性的父元素或塊級父元素自身變為塊級，脫離文檔流

相對定位在占據原來位置的同時，偏移規定設定量像素機關，會覆寫原來元素
清除浮動方法

設定父級height

設定父級浮動

在浮動元素後面添加空元素clear both

定義僞類:after和zoom（相容ie67）原理同上

給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動，另外在 IE6 中還需要觸發 hasLayout ，例如為父元素設定容器寬高或設定 zoom:1。在添加overflow屬性後，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。
盒模型

boder

padding

margin

w3c隻有content為height ie全為height
css選擇器

http://www.w3school.com.cn/cssref/css_selectors.asp
display:none和visibility:hidden的差別？

display:none 隐藏對應的元素，在文檔布局中不再給它配置設定空間，它各邊的元素會合攏，就當他從來不存在。

visibility:hidden 隐藏對應的元素，但是在文檔布局中仍保留原來的空間。
CSS中link 和@import的差別是？

(1) link屬于HTML标簽，而@import是CSS提供的;

(2) 頁面被加載的時，link會同時被加載，而@import被引用的CSS會等到引用它的CSS檔案被加載完再加載;

(3) import隻在IE5以上才能識别，而link是HTML标簽，無相容問題;

(4) link方式的樣式的權重高于@import的權重. ink 支援使用 Javascript 控制 DOM 去改變樣式；而 @import 不支援。
position:absolute和float屬性的異同

共同點：對内聯元素設定float和absolute屬性，可以讓元素脫離文檔流，并且可以設定其寬高。

不同點：float仍會占據位置，absolute會覆寫文檔流中的其他元素。
box-sizing

box-sizing屬性主要用來控制元素的盒模型的解析模式。預設值是content-box。

content-box：讓元素維持W3C的标準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設定width/height屬性指的是content部分的寬/高

border-box：讓元素維持IE傳統盒模型（IE6以下版本和IE6~7的怪異模式）。設定width/height屬性指的是border + padding + content

标準浏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或内距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，進而影響整個頁面的布局。
CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增僞類有那些？

1.id選擇器（ # myid）

2.類選擇器（.myclassname）

3.标簽選擇器（div, h1, p）

4.相鄰選擇器（h1 + p）

5.子選擇器（ul > li）

6.後代選擇器（li a）

7.通配符選擇器（ * ）

8.屬性選擇器（a[rel = “external”]）

9.僞類選擇器（a: hover, li:nth-child）

優先級為:

!important > id > class > tag

important 比内聯優先級高,但内聯比 id 要高

CSS3新增僞類舉例：

p:first-of-type 選擇屬于其父元素的首個

元素的每個

元素。

p:last-of-type 選擇屬于其父元素的最後

元素的每個

元素。

p:only-of-type 選擇屬于其父元素唯一的

元素的每個

元素。

p:only-child 選擇屬于其父元素的唯一子元素的每個

元素。

p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個

元素。

:enabled :disabled 控制表單控件的禁用狀态。

:checked 單選框或複選框被選中。

13.CSS3有哪些新特性？

CSS3實作圓角（border-radius），陰影（box-shadow），

對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增加了更多的CSS選擇器多背景 rgba

在CSS3中唯一引入的僞元素是::selection.

媒體查詢，多欄布局column

border-image

CSS3中新增了一種盒模型計算方式：box-sizing。盒模型預設的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計算元素寬高的差別如下：

content-box（預設）

布局所占寬度Width：

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

布局所占寬度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

布局所占寬度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

對BFC規範的了解？ block format content

BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立布局的，盒子裡面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和布局方向有關系）的margin會發生折疊。

（W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其内容進行布局，以及與其他元素的關系和互相作用。
table布局 div+css布局比較

一、div+css布局的好處：

1.符合W3C标準，代碼結構清晰明了，結構、樣式和行為分離，帶來足夠好的可維護性。

2.布局精準，網站版面布局修改簡單。

3.加快了頁面的加載速度（最重要的）（在IE中要将整個table加載完了才顯示内容）。

4.節約站點所占的空間和站點的流量。

5.用隻包含結構化内容的HTML代替嵌套的标簽，提高另外搜尋引擎對網頁的搜尋效率。

二、table布局的好處（table布局也不是一點用的沒有，這點是毋庸置疑的）

1.容易上手。

2.可以形成複雜的變化，簡單快速，内容可自适應。

3.表現上更加“嚴謹”，在不同浏覽器中都能得到很好的相容。

HTML

Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

（1）、聲明位于文檔中的最前面，處于标簽之前。告知浏覽器的解析器，用什麼文檔類型規範來解析這個文檔。

（2）、嚴格模式的排版和JS 運作模式是以該浏覽器支援的最高标準運作。

（3）、在混雜模式中，頁面以寬松的向後相容的方式顯示。模拟老式浏覽器的行為以防止站點無法工作。

（4）、DOCTYPE不存在或格式不正确會導緻文檔以混雜模式呈現。

回答2： doctype聲明指出閱讀程式應該用什麼規則集來解釋文檔中的标記。在Web文檔的情況下，“閱讀程式”通常是浏覽器或者校驗器這樣的一個程式，“規則”則是W3C所釋出的一個文檔類型定義（DTD）中包含的規則。

(1) 聲明位于文檔中的最前面的位置，處于标簽之前。此标簽可告知浏覽器文檔使用哪種 HTML 或 XHTML 規範。該标簽可聲明三種 DTD 類型，分别表示嚴格版本、過渡版本以及基于架構的HTML 文檔。

(2)所謂的标準模式是指，浏覽器按 W3C 标準解析執行代碼；怪異模式則是使用浏覽器自己的方式解析執行代碼，因為不同浏覽器解析執行的方式不一樣，是以我們稱之為怪異模式。嚴格模式是浏覽器根據web标準去解析頁面，是一種要求嚴格的DTD，不允許使用任何表現層的文法，如嚴格模式的排版和JS 運作模式是以該浏覽器支援的最高标準運作混雜模式則是一種向後相容的解析方法，說的透明點就是可以實作IE5.5以下版本浏覽器的渲染模式。

(3)浏覽器解析時到底使用标準模式還是怪異模式，與你網頁中的 DTD 聲明直接相關， DTD 聲明定義了标準文檔的類型（标準模式解析）文檔類型，會使浏覽器使用相應的方式加載網頁并顯示，忽略 DTD 聲明 ,将使網頁進入怪異模式。

HTML、CSS知識彙總

CSS

HTML

繼續閱讀

HTML CSS 的滑鼠懸浮，點選的樣式當滑鼠懸浮時：a:hover當滑鼠點選連結時：a:active

html中修改超連結a标簽的樣式修改a标簽的預設樣式

推薦一些VB的學習交流網站

推薦一些有用的網站一鍵分享制作網站小圖示插件網站seo 相關的網站地圖 api二維碼相關

H5測試點

LoadRunner8.0是不支援IE7的解決方法

談談css的僞類和僞元素

用 Canvas 編織璀璨星空圖

HTML5Canvas 酷炫效果

龍珠訓練營task04

（C# 程式設計指南）

十大酷炫屌的圖像懸停特效

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

vue3 transitionvue3 transition元件和vue2 transition元件

layui多任務上傳添加進度條