HTMLCSS小白 盒子模型,絕對定位和相對定位

2021-10-03 09:03:15 字數 1526 閱讀 3769

<

!doctype html>

<

/title>

"text/css"

>

width:

100px;

height:

100px;

background-color: red;

border:

10px solid green;

padding:

100px 150px;

padding-top:

200px;

/*乙個值是正方形*/

/*兩個值 是 上下 左右*/

/*三個值 上 左右 下*/

/*四個值屬性是上右下左*/

}.content

#qaq

<

/style>

<

/head>

=>

="content"

>

<

/div>

<

/div>

"qaq"

>

<

/div>

<

/body>

<

/html>

<

!doctype html>

<

/title>

"text/css"

>

*/*.demo

.box*/

/*position: relative;*/

width:

200px;

height:

200px;

background-color: orange;

}.content

.box

span

<

/style>

<

/head>

<

!-- 絕對定位absolute

脫離原來位置進行定位

別人可以踩你頭上

相對於最近的有定位的父級進行定位

如果沒有相對於文件定位

-->

<

!-- 相對記憶 relative

保留原來位置進行定位

原來的位置就是不給你

相對於自己原來的位置定位

-->

<

!-- 總結 參照物使用relative 因為他保證自己位置不變

移動的物體使用absolute

-->

<

!-- fixed 廣告定位 --

>

=>

="content"

>

="box"

>

<

/div>

<

/div>

<

/div>

歡迎關注一張平台謝謝<

/span>

<

/body>

<

/html>

HTML css盒子模型

盒子模型 盒子屬性 1.border style邊框模式 border top style上部 border bottom style下部 border left style左 border right style右 2.border width邊框畫素 border top width上部 bor...

HTML CSS盒子模型

本篇文章 本文講述了css盒子模型的一些基本關鍵字。lang en charset utf 8 盒子模型title p,div pdiv style head 熱愛生命 我不去想是否能夠成功 既然選擇了遠方 便只顧風雨兼程 我不去想能否贏得愛情 既然鍾情於玫瑰 就勇敢地吐露真誠 我不去想身後會不會襲...

html CSS的盒子模型

css的盒子模型1 邊框 border 上 border top 下 border bottom 左 border left 右 border right 內補丁 paddings 內邊距 上 padding top 下 padding bottom 左 padding left 右 padding...