html css筆記 度一

2022-04-04 13:46:17 字數 1865 閱讀 6258

"""瀏覽器

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檔案,網頁的一部分樣式需要用到,那麼可以採用這種方...