前端之 CSS页面布局

最新推荐文章于 2024-04-23 17:13:57 发布

LinWoW

最新推荐文章于 2024-04-23 17:13:57 发布

阅读量2.3k

点赞数 1

分类专栏：前端文章标签：盒子模型 css

本文链接：https://blog.csdn.net/linwow/article/details/90705915

版权

文章目录

盒子模型

盒子模型概念

广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）

盒子模型成员介绍

Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明

margin成员：margin-left、margin-right、margin-top、margin-bottom

Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
border成员：border-left、border-right、border-top、border-bottom
border-width成员：border-left-width、border-right-width、border-top-width、border-bottom-width
border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style

Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响

padding成员：padding-left、padding-right、padding-top、padding-bottom

Content（内容） - 盒子的内容，显示文本和图像

通过设置width与height来规定content
块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定
内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定

整体设置

margin：、Border(border-width：)、Padding：根据后面跟的值的个数可以对不同的边距进行设置。

赋值个数	方位
1	上下左右
2	上下、左右
3	上、左右、下
4	上、右、下、左

padding:25px 50px 75px 100px;
上填充为25px、右填充为50px、下填充为75px、左填充为100px
padding:25px 50px 75px;
上填充为25px、左右填充为50px、下填充为75px
padding:25px 50px;
上下填充为25px、左右填充为50px
padding:25px;
所有的填充都是25px

Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框只能左右移动而不能上下移动，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。

如果把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

.c2 {
   
    width: 50px;
    height: 50px;
    background-color: green;
    float: left;
        }

属性值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

清除浮动

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

固定高度

添加最后一个元素<div style =“clear:both”></div>

伪元素清除法

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。

overflow:hidden

父元素设置overflow: hidden;

伪元素清除法（使用较多）：

.clearfix:after {
   
  content: "";
  display: block;
  clear: both;
}

Clear

clear 属性定义了元素的哪边上不允许出现浮动元素。

属性值

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

overflow溢出属性

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

div {
   
    overflow: scroll;
}

属性值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

Positioning(定位)

CSS position 属性，允许您将布局的一部分与另一部分重叠。

Static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。

Fixed 定位

元素的位置相对于浏览器窗口是固定位置。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

.test{
   position: fixed;
}

Relative 定位

相对定位元素的定位是相对其正常位置，可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

.test{
   
   position: relative;
}

Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:，Absolutely定位使元素的位置与文档流无关，因此不占据空间。

.test{
   position: absolute;
}

z-index重叠元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

.test{
   
   z-index: 999; 
}

一个元素可以有正数或负数的堆叠顺序：

实例

效果图：
在这里插入图片描述

实例代码html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<img src="temp/1.jpg" alt="" class="background">
<div class="blog-left">
    <div class="touxian">
        <img src="temp/888.jpg" alt="">
    </div>
    <div class="title">

最低0.47元/天解锁文章

LinWoW

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
前端之 CSS页面布局

文章目录盒子模型盒子模型概念盒子模型成员介绍Float(浮动)清除浮动Clearoverflow溢出属性Positioning(定位)Static 定位Fixed 定位Relative 定位Absolute 定位z-index重叠元素实例盒子模型盒子模型概念广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特...
复制链接

扫一扫