css-布局和定位

最新推荐文章于 2023-03-12 10:33:41 发布

奔跑的皮卡丘

最新推荐文章于 2023-03-12 10:33:41 发布

阅读量199

点赞数

分类专栏： html css 文章标签： html css

本文链接：https://blog.csdn.net/qq_17828675/article/details/78795671

版权

html 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

flow

首先，我们说一下flow，实际上就是从HTML在上面开始，从上到下沿着元素流逐个显示。
对于块元素，从上到下布局。对于块元素中的內联元素，从左上方流向右下方。

对于內联元素我们需要注意间距问题：
1. 对于并排放置的两个內联元素，中间外边距不会重叠。所以最终两个元素中间相差两个外边距之和。
2. 对于上下放置的两个內联元素，外边距会重叠。所以最终两个元素中间相差为最大外边距。
3. 对于內联元素，我们一般不会设置外边距。我们这里主要指img。
4. 对于嵌套元素，只要上下放置，就会重叠。

布局种类

1. float浮动布局

浮动布局：只允许将一个元素向左或向右浮动。

元素设置为浮动布局，我们必须为他设置宽度。
html流中的元素，会按照顺序流出，包括浮动元素。內联元素会避开浮动元素，围绕流出。
因为浮动元素按照顺序流出，所以其在html中顺序很重要。
浮动元素以外元素会按照浏览器大小进行扩展。

#sidebar {
    float: right;
    width: 280px;

对于重叠问题，例如块元素中，部分被浮动元素遮挡，部分没有。对于修正，我们经常使用clear，这样可以使整个元素避开浮动元素。
例如：当元素流入页面时，这个元素右边不允许有浮动元素。

#footer {
    clear: right;
}

对于并排的修正，我们使用外边距，防止遮挡。或者说是栏间中缝。

#main {
    margin: 0px 280px 0px 0px;
}

2. 冻结设计

将body下所有元素放在一个div中，设置div的大小即固定了整个布局的大小。但是丢于浏览器如何调整大小，他都不会移动，比较死板。

<body>
    <div id="all">
        ...
    </div>
</body>

#all {
    width: 800px;
}

3. 凝胶布局

凝胶布局会锁定页面中间内容区的宽度，不过会将其居中显示。

#all {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}

4. 绝对定位absolute

绝对定位可以在页面上进行精准定位。

指定元素position：absolute；根据top，bottom，left，right进行定位。
绝对定位的元素会在流中删除，所以不影响其他元素的布局。
流元素中其他元素不会围绕绝对元素，因为绝对元素和其他元素不在一个z层上。根据z-index指定在虚拟z轴上位置。

#sidebar {
    position: absolute;
    left: 20px;
    top: 20px;
}

对于绝对定位位于上层，遮挡其他元素问题，可以使用margin外边距进行避开。

5. 表格布局table

使用table进行表格的显示，相当于把元素分别放在一个表格的行和列中，对于排版会很方便。

首先，要为html增加结构，使其符合表格布局结构：

对于要放在table表格中的所有内容放在一个大的<div class="tableContainer">中。
对于要放在表格同一行中的所有内容放在一个<div class="tableRow">中，位于div#tableContainer中。
对于一行中的每一列我们分别放在<div class="col1">中，位于div#tableRow中。

接下来，设置css样式：

对于class=”tableContainer”，display设置为table。同时设置表格间距border-spacing，表格间距同时也会设置边界周围的空间并且不会与margin叠加。
对于class=”tableRow”，display设置为table-row。
对于每个列元素，display设置为table-cell。同时设置vertical-align（对齐格式）。

#tableContainer {
    display: table;
    border-spacing: 10px;
}

#tableRow {
    display: table-row;
}

#col1 {
    display: table-cell;
    vertical-align: top;
}

6. 固定布局fixed

固定布局总是在屏幕的一个位置，即使滚动页面也不改变。

固定元素会在流中删除，所以不影响其他元素布局。
固定元素通过设置position：fixed；和left，top，right，bottom设置位置。

#sidebar {
    position: fixed;
    left: 20px;
    top: 20px;
}

7. 相对布局relative

相对位置，是指相对于元素在流中原本的位置进行偏移。设置与绝对位置相似。

#sidebar {
    position: relative;
    left: 20px;
    top: 20px;
}

注意

position选项有：

absolute（绝对定位）
relative（相对定位）
fixed（固定定位）
static（静态定位）：正常流入界面，默认选项。

奔跑的皮卡丘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-布局和定位

flow首先，我们说一下flow，实际上就是从HTML在上面开始，从上到下沿着元素流逐个显示。对于块元素，从上到下布局。对于块元素中的內联元素，从左上方流向右下方。对于內联元素我们需要注意间距问题： 1. 对于并排放置的两个內联元素，中间外边距不会重叠。所以最终两个元素中间相差两个外边距之和。 2. 对于上下放置的两个內联元素，外边距会重叠。所以最终两个元素中间相差为最大外边距。 3. 对
复制链接

扫一扫