当前位置: 首页>C++>正文

學習html/css基礎的重點筆記

學習html/css基礎的重點筆記

1、權重問題? ??

? ? ? 內聯樣式表 > id選擇符 > class選擇符 > 類型選擇符(所有html標簽名稱)

? ? ? 內聯樣式表 > 內部樣式表、外部樣式表

? ? ? 內部樣式表、外部樣式表的權重與書寫順序有關,后書寫的權重高? ?

? ? ??注:雖然后書寫的權重高,但是屬性依舊被執行,只是相同屬性會被覆蓋,不同屬性仍然顯示

? ? ? !important權重最高
? ? ? 開發者樣式 > 讀者樣式 > 瀏覽器樣式

? ? ?!!!當出現權重的時候就會出現層疊性

2、用css畫三角

? ? ?a.將盒子的寬高設為0px;

? ? ?b.添加邊框border;

? ? ?c.為邊框設置顏色border-color: ,不需要顯示的邊設置為透明色transparent。

3、文本溢出時以省略號顯示

? ? ?a.文本設置不換行 white-space:nowrap;

? ? ?b.溢出文本隱藏處理? overflow:hidden;

? ? ?c.溢出文本以省略號顯示? text-overflow:ellipsis;

? ? ?d.前提條件:存放文本的元素必須設有寬度;只能用在單行文本。

4、關于圖片(瀏覽器解析其屬性為inline)可以添加寬高的解答

? ? ? img為置換元素(通過標簽或者屬性來改變元素在頁面中的顯示狀態),且置換元素在瀏覽器解析的過程中生成一個框。

? ? ? 非置換元素:瀏覽器中大多數元素為非置換元素,將內容直接展示給瀏覽器。

5、大圖在小盒子里居中顯示

? ? ? a.為父元素添加定位? ?position:relative;? 子元素添加定位? position:absolute;

? ? ? b.子元素向右移動父元素的一半? ?left:50%;

? ? ? c.子元素向左移動自身的一半? ?margin-left:-寬度一半;

6、圖片整合(精靈圖 css sprites)

? ? ? a.整合規則:背景圖必須為透明 (png/gif);

? ? ? ? ? ? ? ? ? ? ? ? ? ?根據實際應用場景,小圖標之間留出足夠的間距;

? ? ? ? ? ? ? ? ? ? ? ? ? ?盡量上下排列;

? ? ? ? ? ? ? ? ? ? ? ? ? ?如果存在左右排列的小圖標,li列表符號的背景圖放在圖片的最右側。

? ? ? b.本質:控制背景圖的位置? ?background-position:

? ? ? c.優點:減少服務器請求次數;減小圖片質量

7、高度塌陷問題

? ? ? a.出現情況:當子元素有浮動,父元素沒有設置高度或者設置了最小高度時,會出現高度塌陷問題。

? ? ? b.解決辦法:

? ? ? ? ? ? ? 法一:誰塌陷就給誰添加屬性? overflow:hidden;

? ? ? ? ? ? ? ? ?原理:overflow:hidden;出發了BFC,BFC規定計算BFC高度時,浮動元素也參與計算。

? ? ? ? ? ? ? ? ?優點:代碼量少;缺點:會隱藏定位到父元素外部的內容。

? ? ? ? ? ? ? 法二:在浮動元素下方添加一個空標簽,并為空標簽添加屬性? clear:both;

? ? ? ? ? ? ? ? ?原理:both會忽略以上浮動元素預留出來的空間。

? ? ? ? ? ? ? ? ?優點:代碼量少;缺點:產生不必要的元素,造成代碼冗余。

? ? ? ? ? ? ? 法三:萬能清除法(閉合浮動)誰塌陷給誰添加? ? :after{content:" ";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

? ? ? ? ? ? ? ? ? 原理:visibility:hidden;對元素隱藏但仍留有空間。

? ? ? ? ? ? ? ? ? 優點:解決了以上兩種方法的缺點;缺點:代碼量相對來說有點多。

8、瀏覽器bug以及解決辦法

? ? ? ? ? ? ?a.當圖片添加了a標簽后,在IE瀏覽器上會出現邊框

? ? ? ? ? ? ? ? ? css hack:給img添加border:0;? ?或者? ?border:0 none;

? ? ? ? ? ? ?b.在div中插入圖片,圖片會將div下方撐大大約3px

? ? ? ? ? ? ? ? ? ?css hack 1:div標簽與img標簽寫同一行;

? ? ? ? ? ? ? ? ? ?css hack 2 :將img轉為塊狀元素? ?display:block;

? ? ? ? ? ? ?c.表單元素對齊方式不一致(不在同一水平線)

? ? ? ? ? ? ? ? ? ? css hack :給表單元素添加浮動? float;

? ? ? ? ? ? ?d.按鈕大小不確定(邊框問題)

? ? ? ? ? ? ? ? ? ? css hack 1:只要按鈕不出現在表單里都用a標簽做;

? ? ? ? ? ? ? ? ? ? css hack 2:為按鈕標簽添加一個父元素,并將樣式添加在父元素上? ?eg:<span><input type="submit"></span>

? ? ? ? ? ? ? ? ? ? css hack 3:如果按鈕是一張圖片,切圖放在a標簽里;

? ? ? ? ? ? e.鼠標指針bug? ? cursor:hand;(只有IE識別)

? ? ? ? ? ? ? ? ? ? ?css hack:cursor:pointer;

? ? ? ? ? ? f.關于透明度的兼容

? ? ? ? ? ? ? ? ? ? ? css hack:opacity:屬性值 ;(取值范圍為0-1)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?filter:alpha(opacity=屬性值);(取值范圍為0-100)IE

? ? ? ? ? ? ? ? ?opacity:子元素會隨父元素一起透明? ? ? ? ? rgba:背景透明? ? ? ? transparent:文字透明

? ? ? ? ? ? ?g:margin的bug

? ? ? ? ? ? ? ? ? bug1:給子元素添加margin-top。父元素會一起下移?

? ? ? ? ? ? ? ? ? bug2:縱向margin值不疊加

? ? ? ? ? ? ?h:IE6的bug

? ? ? ? ? ? ? ? ? bug1:雙倍浮向邊界(浮向邊)margin值會雙倍顯示

? ? ? ? ? ? ? ? ? ? ? css hack:給浮動元素添加屬性? ?display:inline;

? ? ? ? ? ? ? ? ? bug2:默認高度? 當盒子的高度小于16px時會保持16px顯示(IE默認最小高度為16px,認為內部留有最小文字高度)?

? ? ? ? ? ? ? ? ? ? ? css hack 1:font-szie:0;

? ? ? ? ? ? ? ? ? ? ? css hack 2:overflow:hidden;

? ? ? ? ? ? ?i:兩個浮動元素的寬 50%+50%>100%

? ? ? ? ? ? ? ? ? ? ? css hack:給右側元素添加屬性? ?clear:right;?

? ? ? ? ? ? ?j:導航條內li和a的bug

? ? ? ? ? ? ? ? ? ? ? css hack:給li和a都添加float

9、BFC (block formatting context? ? 獨立渲染區? ?只有Block-level box參與? ?? ?概念上的東西,用來解決一些排版問題)

? ? ? ?布局規則:a.內部box會一個接一個垂直排列;

? ? ? ? ? ? ? ? ? ? ? ? ?b.Box垂直方向的距離由margin決定,屬于同一個BFC的兩個相鄰Box的margin會發生重疊;

? ? ? ? ? ? ? ? ? ? ? ? ?c.計算BFC高度時,浮動元素也參與計算;

? ? ? ? ? ? ? ? ? ? ? ? ?d.BFC區域不會與float box重疊;

? ? ? ? ? ? ? ? ? ? ? ? ?e.每個元素的margin box的左邊, 與包含塊border box的左邊相接觸;

? ? ? ? ? ? ? ? ? ? ? ? f.BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。

? ? ? ?觸發條件:a.根元素html;

? ? ? ? ? ? ? ? ? ? ? ? ?b.float不為none;

? ? ? ? ? ? ? ? ? ? ? ? ?c.position為absolute或fixed;

? ? ? ? ? ? ? ? ? ? ? ? ?d.display為inline-block / table-cell / table-caption / flex / inline-flew;

? ? ? ? ? ? ? ? ? ? ? ? ?e.overflow不為visible。

? ? ? ?作用:a.清除內部浮動;

? ? ? ? ? ? ? ? ? b.防止margin值上下重疊(加上一個會觸發BFC的屬性);

? ? ? ? ? ? ? ? ? c.自適應兩欄布局

10、繼承性

  不可繼承的:display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

  所有元素可繼承:visibility和cursor
  內聯元素可繼承:letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform
  塊狀元素可繼承:text-indent和text-align
  列表元素可繼承:list-style、list-style-type、list-style-position、list-style-image
  表格元素可繼承:border-collapse

轉載于:https://www.cnblogs.com/youy67/p/10167928.html

https://www.nshth.com/cplus/338905.html
>

相关文章:

  • github 免費節點,BUMO:超級節點共建接口
  • 學習html/css基礎的重點筆記
  • 企業郵箱怎么群發郵件,企業會員郵件群發解決方案
  • esfp光模塊,闡述一下ecshop各模塊的功能_【光電通信】40G QSFP+ LR4 光模塊的設計與實現(一)...
  • lua編程軟件,QQ郵箱記事本模塊Lua實現小結
  • centos7.6鏡像下載,centos(7.9) minikube(v1.28.0) kaniko 構建鏡像
  • 計算機畢業設計ssm企業部門報銷管理g9d62系統+程序+源碼+lw+遠程部署
  • 鮑森詹森實驗過程,Ornstein-Uhlenbeck過程
  • 嵌入式的發展趨勢,我理解的嵌入式幾個發展方向
  • 51開發板,IMX6ULL_PRO嵌入式開發板介紹
  • 嵌入式軟件工程師,2023屆秋招內推指南|嵌入式開發|軟硬件
  • 剛畢業的大學生適合做什么工作,今天我的就業班的生活開始啦~~~
  • C語言-基礎知識練習習題1
  • 什么監控攝像頭最清晰,計算機為什么找不到攝像頭,為何電腦里找不到攝像頭設備?
  • 網易支付登錄,微信登陸和支付
  • 人工智能自我進化,復雜性思維中文第二版 十一、進化
  • firebase,Firebase 教程: iOS A/B 測試
  • mongodb可視化管理工具,Impala入門筆記---比Hive強大
  • 世界只是一個程序,程序的世界里,短暫的放空
  • 如何用爬蟲爬取網頁上的數據,新聞爬蟲及爬取結果查詢網站的搭建(一)
  • 爬蟲網站,新聞網站爬蟲及結果查詢
  • 深度卷積神經網絡,深度KWeaver:價值驅動,認知智能走向開源共創
  • sci論文翻譯神器,SCI科技論文英語翻譯的一點個人心得
  • 協議的定義,連接跟蹤TCP協議狀態轉換
  • 洛谷 T284709 怨念(resent)
  • 1330 小青蛙跳臺階
  • 動態規劃解決小青蛙跳臺階問題
  • 代碼記錄丨小青蛙和漢諾塔
  • 小青蛙爬井
  • 【基礎】小青蛙回來了