HTML div塊級元素

2021-08-20 20:58:26 字數 1316 閱讀 8728

div 布局的主要手段

division 分割的

學習方法:

筆記案例 先看 再敲

語法 語句邏輯

用程式設計的方式解決生活中的事務

div 塊級標籤

獨佔一行 前後隔行

行級標籤 流式布局

csscascading style sheet

級聯(層疊) 樣式 表

通用性語法

《標籤名 style="屬性1:值1;...屬性n:值n;">

字典api

應用程式 介面

1、邊框類

border

: 5px solid red

;邊框寬度 樣式 顏色

solid 實線條

dashed 長條虛線

dotted 圓點虛線

border-top 上

border-right 右

border-botom 下

border-left 左

2、外邊距 margin

以上左為準

margin

: 50

px

100px

150px

200px

;上 右 下 左

aotu 居中

3、padding 內邊距

margin 不會改變div的面積大小

padding 會改變div的面積大小

4、文字

大小 加粗 斜體 字型

水平居中 垂直居中

顏色font-size color weight style family

5、背景顏色

background-color:gray;

background:url() no-repeat

6、定位 position

1、相對定位 relative

參照物:自己原來的位置

top y軸 left x軸

相對於原有位置的位移

並保留原有位置的占用

2、絕對定位 absolute

相對於父級(前提是父級發生了定位)的位移

否則找父的父 直到 body

不保留原有位置的占用

3、固定定位 fixed

相對於瀏覽器左上角的位移

4、static 不定位

7、文字

text-align line-height

行內元素 塊級元素和行內塊級元素

而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效,只有左右有效果 總是和相鄰的行內元素在同一行上,預設排列方式...

行級元素 塊級元素

一.元素分類 行間元素 inline span,strong,em,a,del 塊級元素 block div,p,h1 h6,ul,ol,li,form,address 行塊級元素 inline block img 1.行間元素 內容決定元素所在位置,不可以通過css改變寬高。1234 設定的寬高無...

HTML 塊級元素 行級元素

塊狀元素排斥其他元素與其位於同一行,可以設定元素的寬 width 和高 height 塊級元素一般是其他元素的容器,可容納塊級元素和行內元素。常見的塊級元素有div,p h1 h6等。行內元素不可以設定寬 width 和高 height 但可以與其他行內元素位於同一行,行內元素內一般不可以包含塊級元...