摘要:也就是說,較寬的外邊距決定兩個元素最終離多遠。盒模型結論二沒有設定屬性的元素始終會擴展到填滿其父元素的寬度為止。布局的基本概念多欄布局有三種基本的實現方案固定寬度流動彈性。
為文檔添加樣式的三種方法 行內樣式
行內樣式是寫在HTML標簽的style屬性里的,比如:
Hello Everyone!
行內樣式會覆蓋嵌入樣式和鏈接樣式。
嵌入樣式嵌入的css樣式是放在HTML文檔的head元素中的,這點想必大家都知道,這里就不贅述了。
鏈接樣式Document
鏈接樣式的作用范圍可以是整個網站。只要使用標簽把樣式表鏈接到每個頁面,相應的頁面就可以使用其中的樣式,除了link方法外,還可以使用@import指令
@import url(css/style.css);
@import指令必須出現在樣式表中其他樣式之前,否則該鏈接的文件不會被加載
不要亂用類不要像使用ID一樣,為每個類都指定一個不同的類名,然后再為每個類編寫規則。如果你有這種隨意使用類的習慣的話,那么,你還不了解繼承和上下文選擇符的作用。繼承和上下文選擇符(后代選擇器)能讓不同的標簽共享樣式,從而降低你需要編寫和維護的css量。
使用繼承方式降低你的css代碼量:
所有元素可繼承:visibility和cursor 內聯元素和塊元素可繼承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction 塊狀元素可繼承:text-indent和text-align 列表元素可繼承:list-style、list-style-type、list-style-position、list-style-image 表格元素可繼承:border-collapse 不可繼承的:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align盒子邊框
每一個元素都會在頁面上生成一個盒子,因此,HTML頁面實際上就上由一堆盒子組成的。默認情況下,每個盒子的邊框是不可見的,背景也是透明的。
邊框(border)有如下3個相關屬性:
1. 寬度(border-width):可以使用`thin、medium`和`thick`等文本值,也可以使用除百分比和負值之外的任何絕對值 2. 樣式(border-style):有none、hidden、dotted、dashed、double、groove、ridge、inset和outset等 3. 顏色(border-color):可以使用任意顏色值,包括RGB、HSL、十六進制顏色值和顏色關鍵字疊加外邊距
垂直方向上的外邊距會疊加,假設有3個段落,前后相接,而且都應用以下規則:
第一段的下外邊距與第二段的上外邊距相鄰,你可能認為它們之間的外邊距是80px,但實際的間距卻是50px。像這樣的上下外邊距相遇時,它們就會相互重疊,直至一個外邊距碰到另一個元素的邊框。因此,在這里,第二段較寬的上外邊距就會碰到第一段的邊框。也就是說,較寬的外邊距決定兩個元素最終離多遠。這個過程就是外邊距疊加。
盒子有多大 設定width屬性的盒子盒模型結論一: 為設定了寬度的盒子添加邊框、內間距和外邊距,會導致盒子擴展得更寬。實際上,盒子的width屬性設定的只是內容區的寬度,而非盒子要占據的水平寬度沒有設定width屬性的盒子
從現在開始,“元素”和“盒子”從現在起代表了同一個意思。如果我們不設置塊級元素的width屬性,那么這個屬性的默認值是auto,結果會讓元素的寬度擴展到與父元素等寬。
盒模型結論二: 沒有設定width屬性的元素始終會擴展到填滿其父元素的寬度為止。添加水平邊框、內邊距和外邊距,會導致內容寬度減少,減少的量 等于 水平邊框、內邊框和外邊距的和
看實例的話大家也比較煩,就拿著這個結論自己去驗證下吧。
布局的基本概念多欄布局有三種基本的實現方案:固定寬度、流動、彈性。
- 固定寬度布局的大小不會隨著用戶調整瀏覽器窗口大小而變化,一般是900到1350px像素寬。其中960像素最常見,因為這個寬度適合所有現代顯示器,而且能被16,12,10,8,6,5,4和3整除,容易計算等寬分欄。 - 流動布局的大小會隨用戶調整瀏覽器窗口大小而變化。這種布局能更好地適應大屏幕,但同時也意味著放棄會頁面某些方面的控制,比如隨著頁面寬度變化,文本行的長度和頁面元素之間的位置關系都可能變化。 - 彈性布局是在瀏覽器窗口變寬時,不僅布局變寬,而且所有內容元素的大小也會變化,不過這種布局太過復雜,不好實現。行內(inline)元素的一些屬性
并不是所有的屬性對行內元素都能夠生效
行內元素不會應用width屬性,其長度是由內容撐開的 行內元素不會應用height屬性,其高度也是由內容撐開的,但是高度可以通過line-height調節 行內元素的padding屬性只用padding-left和padding-right生效,padding-top和padding-bottom會改變元素范圍,但不會對其它元素造成影響 行內元素的margin屬性只有margin-left和margin-right有效,margin-top和margin-bottom無效 行內元素的overflow屬性無效 行內元素的vertical-align屬性無效(height屬性無效)使用CSS sprites
CSS sprites是指把網頁中很多小圖片(很多圖標文件)做成按規律排列的一張大圖上,在顯示的時候通過background-image、background-position顯示圖片特定部分達到和分散的一張張小圖片一樣的效果。
使用CSS sprites,會將所有的小圖片整合到一張圖片中,網頁加載只需要對一張圖片進行請求,CSS再通過坐標的形式定位每一個小圖片顯示出來。這樣做的好處是,大大減少http請求數,提高網頁加載速度。
css sprites工具推薦:http://cn.spritegen.website-p...
隱藏文本隱藏網頁元素的方法有很多,比如設置display:none,或是使用全透明(opacity)。在設置文本的時候,有時并不希望文本丟失,而通常是把文字轉移到屏幕外面,瀏覽器是可以檢測到的。
有如下兩種隱藏文本的方式:
1. 使用text-indent隱藏:圖片替換文本、搜索引擎優化 2. 使用position進行定位隱藏:利于屏幕講述工具的閱讀使用text-indent
在h1上設置logo為背景并設置居中來做SEO:
h1{ text-indent: -9999px;/*縮進*/ margin: 0 auto;width: 100px;height: 100px;/*居中*/ background: url("img/sf.jpg") no-repeat; }使用定位
p{ position: absolute; top: -9999px; left: -9999px; }rgba和opacity
rgba()和opacity都能實現透明效果,但最大的不同是opacity作用于元素,以及元素內的所有內容的透明度,
而rgba()只作用于元素的顏色或其背景色。(設置rgba透明的元素的子元素不會繼承透明效果!)
ou和ul的列表縮進IE使用margin-left來縮進列表,而Safari和Firefox使用padding-left。
ol, ul { padding-left:40px; }
而IE的默認樣式是:
ol, ul { margin-left:30px; }
去除li的左邊距,比如:
ol, ul { padding-left:0px; }
或者也可以只針對IE進行修復:
ol, ul { _padding-left:0; }css選擇符思維導圖 css工具推薦
不寫具體介紹啦 截個圖給你們吧 說再多都比不上一張圖呢
EnjoyCSS 能創建活躍,超棒的實例,EnjoyCSS 生成器大大簡化了自定義類聲明。EnjoyCSS 是眾多 CSS 工具中非常有用的,也是開發者和設計師工具箱必備的利器之一。它能加快工作流,簡單易用,不需要編碼就能整合豐富的圖形樣式到簡單的 UI。
css3生成器
css3 maker
hands On css3
http://css3.mikeplate.com/
HTML5/css3 box
瀏覽器hacks技巧
前端在線工具--開源中國
在線 css--實時預覽
HTML5/css3瀏覽器支持表
OverAPI--齊全的API文檔
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/110961.html
摘要:目前在前端開發所占的比重越來越高,在我們學習和開發的過程中都會去使用。下面把程序員雷雪松對的知識點總結和歸納分享給大家。過濾對同胞元素的搜索。將匹配元素集合縮減為集合中的最后一個元素。返回指定元素相對于其他指定元素的位置。 jQuery目前在Web前端開發所占的比重越來越高,在我們jQuery學習和開發的過程中都會去使用。jQuery幫我們解決了瀏覽器之間JS一些不兼容的地方和簡化了原...
閱讀 1588·2021-09-24 10:38
閱讀 1521·2021-09-22 15:15
閱讀 3070·2021-09-09 09:33
閱讀 913·2019-08-30 11:08
閱讀 648·2019-08-30 10:52
閱讀 1261·2019-08-30 10:52
閱讀 2356·2019-08-28 18:01
閱讀 530·2019-08-28 17:55