"""瀏覽器
shell 核心
外表 內心
ie trident
firefox gecko
google chrome webkit/blink
safari webkit
opera presto
css 權重
!important > 行間樣式 > id > class | 屬性 > 標籤選擇器 > 萬用字元
!important infinity 正無窮
行間樣式 1000
id 100
class|屬性|偽類 10
標籤|偽元素 1
萬用字元 0
1000和100 256進製
一位工程師手測試出來的
瀏覽器父子選擇器的內部原理是由右到左查詢
設定字型大小實際上是設定字型的高
三角形用的是border設定
段落 text-indent: 2em;
1em = 1 * font-size
1.行級元素/內聯標籤 display:inline
feature:內容決定元素所佔位置
不可以通過css改變寬高
span strong em a del
2.塊級元素 display:block
feature:獨佔一行
可以通過css改變寬高
div p ul li ol form address
3.行級塊元素 inline-block
feature:內容決定大小
可以改寬高
img凡是帶有inline的元素,都有文字特性
**壓縮,去掉了空格回車,所以img不能用margin調節間距
先定義功能(先寫css)非常重要!
em可以自定義功能
a標籤去掉下劃線:text-decoration:none;
ui標籤去掉圓點:list-style:none;
padding:0;
margin:0;
萬用字元用法
初始化標籤
*盒子模型
盒子三大部分
盒子壁 border
內邊距 padding
外邊距 margin
盒子內容 width + height
padding : 四個引數:上 右 下 左 三個引數:上 左右 下 兩個引數:上下 左右 乙個引數:全都有
body的margin 預設為8px
position
absolute
脫離原來位置進行定位
相當於最近的有定位的父級進行定位
如果沒有,那麼相對於文件進行定位
relative
保留原來位置進行定位
相當於自己本身原來的位置進行定位
fixed
固定定位
用relative作為位置,用absolute進行定位
居中:html:
css:
divz-index:*; position 層的優先顯示
border-radius:50% 可以把方塊變成圓圈
浮動元素產生了浮動流
所有產生了浮動流的元素,塊級元素看不到他們
產生了bfc的元素和文字類屬性(inline)的元素以及文字都能看到浮動元素
利用偽元素讓父級包裹住浮動元素
clear:both
必須是塊級元素
偽元素必須加上content才能生效
原型繼承聖杯模式:
"""
HTML CSS學習筆記一
當我們使用瀏覽器上網時,就是向伺服器端請求資料。伺服器上存放著網頁的相關檔案,包括html檔案 css檔案 js檔案 等。當我們開啟瀏覽器,輸入 我們的計算機就會對這些檔案發出http請求。伺服器收到請求之後,會把這些檔案通過http協議,傳輸到我們的瀏覽器的臨時資料夾中。這些檔案,將在我們計算機本...
html css的一些筆記
絕對路徑 是從碟符開始的路徑 相對路徑 是從當前路徑開始的路徑 表示父目錄,上級目錄 css定位 靜態定位,絕對定位,相對定位,固定定位 絕對定位是相對於最近已定位的祖先元素,元素框從文件流完全刪除 它可以像圖層一樣單獨做一層,第幾層可以通過z index 來設定 相對定位是相對於正常排列的位置進行...
HTML CSS學習筆記
利用標籤中style屬性來改變每個標籤的顯示樣式 適用於單個標籤的樣式修改。不靈活 this is p tag 內嵌形式 可用於同類標籤的樣式統一修改 依然不夠靈活 表示後面的所有table中的文字預設顏色如我所設定。前提是已經存在乙個定義好的css檔案,網頁的一部分樣式需要用到,那麼可以採用這種方...