div基本設定:
width
寬height
高background
背景background-color
背景色(
英文單詞
十六進製制
rgb)
背景圖background-image:url("
路徑")
背景圖平鋪
background-repeat
:no-repeat repeat-x repeat-y
背景圖定位
background-position
:第乙個值(
x軸的位置)第二個值(
y軸的位置);
第乙個值:
left center right 30px;
第二個值:
top center bottom 100px;
復合寫法
背景圖滾動
background-attachment: fixed;
border
邊框 :
復合寫法
border:border-with border-style border-color;
border-style
邊框樣式
solid
實線dashed
虛線dotted
點線border-color
邊框顏色
透明:transparent
內邊距:
padding 內邊距 內填充
padding-left: 80px;左內邊距
padding-top: 20px;上內邊距
padding-right: 40px;右內邊距
padding-bottom: 60px;下內邊距
padding 的復合寫法
padding:10px;乙個值代表 上右下右都是10px;
padding: 10px 20px;兩個值 乙個值代表上下 第二個值代表左右
padding:10px 20px 40px;三個值 第乙個值代表上 第二個值代表左右 第三個值代表下
padding: 10px 20px 30px 30px;四個值 第一值代表上 第二個值代表右 第三個值代表下 第四個值代表左
外邊距:
margin 內邊距 內填充
margin-left: 80px;左內邊距
margin-top: 20px;上內邊距
margin-right: 40px;右內邊距
margin-bottom: 60px;下內邊距
margin 的復合寫法:
margin:10px;乙個值代表 上右下右都是10px;
margin: 10px 20px;兩個值 乙個值代表上下 第二個值代表左右
margin:10px 20px 40px;三個值 第乙個值代表上 第二個值代表左右 第三個值代表下
margin: 10px 20px 30px 30px;四個值 第一值代表上 第二個值代表右 第三個值代表下 第四個值代表左
標籤的巢狀:
確定父子級關係
1、第乙個子級的
margin-top
會在特定的情況下穿透父級
規避方法:
1、給父級加邊框
2、給父級加
overflow:hidden;
3、不要用
margin-top;
父級的padding-top
代替 4
、兄弟關係的
margin-top
和margin-bottom
會疊樣盒模型
空間大小:
盒子的總寬度:border-left+padding-left+width+padding-right+border-right
盒子的總高度:border-left+padding-top+height+padding-bottom+border-bottom
HTML標籤之div標籤
div標籤的重要作用 1 劃分區域,使 更具有邏輯性 2 可結合css針對該區域進行樣式控制 看乙個沒有使用div標籤的示例,如下 doctype html html head title 這是頁面標題 title meta name keywords content 自學h5 h3 靜夜思 h3 ...
讓div可編輯,設定標籤的可讀可寫屬性
1 新增contenteditable屬性讓文字處於可編輯狀態,這裡可以編輯 contenteditable inherit 預設 contenteditable plaintext only 輸入純文字 contenteditable true contenteditable false cont...
div標籤消除浮動
1 第乙個div 第二個div 1 的截圖為,可以看到,id2和id3並沒有在id1中。這就是沒有清除浮動的效果。清除浮動的方法 1 對父級設定合適的高度 對父級設定合適的高度進行清除浮動,父級內內容的高度為20px 2px 22px,在id1中增加樣式height 22px 即可。效果圖 缺點 對...