一、文本布局标签
分别为div hn hr p pre
前四个都有一个共性——单独成行
例如：
<div>我是第一个div</div>
<p>我是一个p</p>
而hn还有一个特性，字体大小层级递减
<h1>第一标题</h1>
<h2>第二标题</h2>
hr——表示单独成行的一条横线（可调）
而pre标签与前四个不同，例如：
<p>123456789</p>
<p>123456789</p>
等价于
<pre>
123456789
123456789
</pre>
二、表单布局标签
分别为table\thead\tbody\tfoot\tr\td
table
标签用于定义一个表格。一个表格必须包含至少一个横行组，每一个横行组被分成三个部
分：头、主干、尾。头和尾是可选的。
<table width="" border=""></table>
thead 标签元素定义头。
<table width="" border=""></table>
thead 标签元素定义头。
tr>
标签用于定义一行。
td>
标签用于定义一列。
td
也叫做单元格，必须放在
tr
中。
tbody
元素则定义主干。
tfoot
元素定义尾。
<thead>
<tr>
<td>this text is in the thead.</td>
</tr>
</thead>
<tbody>
<tr>
<td>this text is in the tbody.</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>this text is in the table footer.</td>
</tr>
</tfoot>
三、盒子布局
三、盒子布局
padding--指外边距，也就是距离页面的距离
margin--指内边距，也就是距离边框（border）的距离
margin--指内边距，也就是距离边框（border）的距离
(顺序皆为顺时针）
（同时，页面默认向左对齐）
div{
（同时，页面默认向左对齐）
div{
padding:20px;
margin-left：20px;
}
<div>这是第一个div</>
margin-left：20px;
}
<div>这是第一个div</>
四、浮动布局
float
float主要运用它的四个属性分别是float-left、float-right、float-none、float-both（默认向左对齐）
float-left对应的含义是向左浮动
float-right对应的含义是向右浮动
float主要运用它的四个属性分别是float-left、float-right、float-none、float-both（默认向左对齐）
float-left对应的含义是向左浮动
float-right对应的含义是向右浮动
float-none元素不会浮动（将显示在文本中刚出现的位置），默认值。
float-both居中（不允许两侧浮动）
五、定位布局
position ------
设置对象的定位方式
static -----
静态定位（没有设置位置）默认
absolute -------
绝对定位 ：将对象从文档流中分离出来，设置
left top right bottom
这四个方向去设
置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是
body
relative ------
相对定位：对象不从文档流中分离出来，设置
left top right bottom
这四个方向去设置
相较于自身的相对定位
<style>
.box1
{
width
:
200px
;
height
:
200px
;
border
:
1px
solid
black
;
background-color
:
red
;
/* position:absolute;
top: 100px;
left: 200px; */
}
.box2
{
width
:
200px
;
height
:
200px
;
border
:
1px
solid
black
;
background-color
:
blue
;
position
:
relative
;
left
:
200px
;
}
.box3
{
width
:
200px
;
height
:
200px
;
border
:
1px
solid
black
;
background-color
:
green
;
}
</style>
</head>
<body>
<div
class
=
"box1"
>
这是第一个
div
</div>
<div
class
=
"box2"
>
这是第二个
div
</div>
<div
class
=
"box3"
>
这是第三个
div
</div>
</body>
1053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
