CSS基础（二）——布局详解

最新推荐文章于 2024-03-29 03:23:26 发布

mlh110

最新推荐文章于 2024-03-29 03:23:26 发布

阅读量459

点赞数

分类专栏： CSS 文章标签： css 布局

本文链接：https://blog.csdn.net/mlh110/article/details/53729131

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS布局详解

Display属性

block
使元素显示为块元素，即占用了全部宽度，在前后都是换行符。
inline
使元素显示为内联元素，内联元素只需要必要的宽度，不强制换行。
none
隐藏元素，元素不占用空间，就像这个元素不存在一样。

示例

这里写图片描述
span是内联元素，正常情况下显示如下图（这里的图片长度为屏幕宽度）：

若加上

<style>
span{
display:block;
}
</style>

显示如下：
这里写图片描述

注1：
1. 设置元素的display属性只是改变元素的显示方式，但不会改变它自身的元素属性，例如：
内联元素只能包含数据和其他内联元素，而块级元素可以包含内联元素和其他块级元素。一个display:block的内联元素并不能包含块级元素。
2.

内联元素：
- b, big, i, small, tt
- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
- a, bdo, br, img, map, object, q, script, span, sub, sup
- button, input, label, select, textarea
块级元素：
address 联系方式信息。
article(HTML5) 文章内容。
aside(HTML5) 伴随内容。
audio(HTML5) 音频播放。
blockquote 块引用。
canvas (HTML5) 绘制图形。
dd 定义列表中定义条目描述。
div 文档分区。
dl 定义列表。
fieldset 表单元素分组。
figcaption(HTML5) 图文信息组标题
figure(HTML5) 图文信息组 (参照 figcaption)。
footer( HTML5) 区段尾或页尾。
form 表单。
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 标题级别 1-6.
header(HTML5) 区段头或页头。
hgroup(HTML5) 标题组。
hr 水平分割线。
noscript 不支持脚本或禁用脚本时显示的内容。
ol 有序列表。
output(HTML5) 表单输出。
p 行。
pre 预格式化文本。
section(HTML5) 一个页面区段。
table 表格。
tfoot 表脚注。
ul 无序列表。
video(HTML5) 视频

visibility属性

hidden
元素不可见。与display:none不同的是，它仍占用本身显示的空间，只是不可见，而display:none不占用空间，即使用后就跟这个元素不存在一样。

<h1>This is a heading</h1>
<div class='hidden'>
    Not display
</div>
<p>The space above is empty.</p>

        .hidden{
            visibility:hidden;
        }

这里写图片描述
2.

        .hidden{
            display:none;
        }

这里写图片描述

visible
元素可见

position属性

static
元素框正常生成，没有定位。块级元素生成一个矩形框，作为文档流的一部分，内联元素则会创建一个或多个行框，置于其父元素中。display缺省为static.
用static定位的元素不会受top、bottom、left、right、z-index的影响。
fixed
生成固定定位的元素，相对于浏览器窗口进行定位。不会随着滚动条移动。例如我们经常在一些网页看到的最上方的导航条，其固定在屏幕最上端，不会随着我们向下浏览内容而消失。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
固定位置的元素可以覆盖其他的元素。
元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
relative
生成相对定位的元素，相对于其正常位置进行定位。
属性top,right,bottom,left可用于指定元素如何移位。
相对定位的元素的内容可以被移动并覆盖其他元素，但在正常流中它原本所占的空间仍保留
例：

/*CSS*/
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px
}


----------


<!--HTML-->
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

显示结果：
这里写图片描述

我们再为第二个标题样式改为

h2.pos_left
{
position:relative;
left:-20px;
top:60px
}

显示结果如下：
这里写图片描述
正如上面所说的：
相对定位的元素的内容可以被移动并覆盖其他元素，但在正常流中它原本所占的空间仍保留

abosolute
元素框从文档流完全删除，并相对于其包含块定位。这里的包含块是指它的第一个不是以static定位的父元素，若没有，那么包含块就是<html>。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

float属性

W3School上面已经讲得很详细了，详细请看http://www.w3school.com.cn/css/css_positioning_floating.asp

overflow属性

overflow 属性规定当内容溢出元素框时发生的事情。

visible
默认值。内容不会被修剪，会呈现在元素框之外。
scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。且水平和竖直滚动条都会有。
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。即其和scroll不同的是只有在内容需要修剪时，滚动条才会出现。
hidden
内容会被修剪，且其余内容是不可见的。

z-index属性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index 仅能在定位元素上奏效(position:absolute,position:relative,position:fixed)
示例：

.blue{
background-color:blue;
width:100px;
height:100px;
}
.red{
background-color:red;
width:100px;
height:100px;
position:relative;
top:-50px;
left:50px;

<div class="blue"></div>
<div class="red"></div>

正常情况下，由于红色块是后放置在html中的,所以红色会覆盖在蓝色上面。如下图：
这里写图片描述
但如果我们给.red加上z-index:-1，显示效果如下：

mlh110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础（二）——布局详解

CSS布局详解目录CSS布局详解目录Display属性示例visibility属性position属性float属性overflow属性z-index属性Display属性block 使元素显示为块元素，即占用了全部宽度，在前后都是换行符。inline 使元素显示为内联元素，内联元素只需要必要的宽度，不强制换行。none 隐藏元素，元素不占用空间，
复制链接

扫一扫

专栏目录