HTML 布局篇

最新推荐文章于 2024-07-19 13:18:23 发布

amos_tl

最新推荐文章于 2024-07-19 13:18:23 发布

阅读量130

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/amos_tl/article/details/84416383

布局篇
-----------------------------------------------------------
网页第一行请加上 <!DOCTYPE html> 决定浏览器为标准渲染模式.
-----------------------------------------------------------
static
float
relative
absolute
fixed

1)
静态布局不受浮动/相对/绝对布局的影响.

2)
浮动布局受静态布局元素(块)影响. 要使它不受静态布局的影响,可将静态布局的块行改变为内联块 display: inline-block;
水平排列时,先将浮动块进行相对定位; 还没完, 还要将静态布局的块进行左移: margin-left: -xxpx;
或者浮动块改为内联静态块, display: inline-block; vertical-align: top;

3)
浮动块相对前面的浮动块定位时,只使用原来浮动块没有相对定位时的的默认位置来定位.
浮动定位的元素不保留原来所占据的空间.
浮动定位是相对它前面的兄弟(非绝对定位)块来定位, 没有则相对容器定位.

4)
相对定位的元素保留原来所占据的空间.
相对定位是相对元素自身原来的位置来定位.
相对定位的元素不会把容器撑开.
相对定位可以用父容器的 overflow:hidden, overflow:scroll, overflow:auto; 来控制元素溢出时的行为.

5)
绝对定位的元素不保留原来所占据的空间.
绝对定位是相对元素最近祖先的相对或绝对元素来定位. 注意不是兄弟啊.
绝对定位的元素不会把容器撑开.
绝对定位可以用相对元素最近祖先的相对或绝对元素的 overflow:hidden, overflow:scroll, overflow:auto; 来控制元素溢出时的行为.
绝对定位脱离文档流, 修改绝对定位元素不会造成回流.

6)
浮动与相对结合定位时:
先浮动,后相对定位,元素不保留原来所占据的空间.

7)
浮动与绝对结合定位时:
浮动定位无效.

8)
固定定位是相对屏幕来定位.

9) 示例
带文字的按钮
<!DOCTYPE HTML>
<html>
<head>
<title>布局测试</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
text-align: center;
font-size: 12px;
color: white;
background-color: #FFF;
}

.viewport {
position: relative;
width: 980px;
height: auto;
margin: 0 auto;
padding: 0px;
text-align: left;
}

.button {
display: inline-block;
color: orange;
overflow: hidden;
text-align: center;
border: 1px solid orange;
border-radius: 3px;
cursor: pointer;
background-color: white;
}

.button:hover {
background-color: yellow;
}

.button .icon_l {
width: 18px;
height: 18px;
line-height: 18px;
display: inline-block;
background-image: url('resources/icon/icon_search.png');
background-position: left center;
}

.button .icon_r {
width: 18px;
height: 18px;
line-height: 18px;
display: inline-block;
background-image: url('resources/icon/icon_search.png');
background-position: right center;
}

.button .text {
margin: 2px 5px;
line-height: 18px;
}

</style>

</head>
<body>
<div class="viewport">
<div class="button">
<div class="icon_l"> </div>
<span class="text">搜索(S)</span>
</div>

</div>
</body>
</html>