CSS定位与布局

浅笑心柔142

已于 2024-08-25 14:37:48 修改

阅读量534

点赞数 14

文章标签： css 前端 html

于 2024-08-25 13:06:40 首次发布

本文链接：https://blog.csdn.net/qq_72013756/article/details/141502301

版权

一、display属性（元素如何显示）

网页上的每个元素都是一个盒模型。display属性决定了盒模型的行为方式，设置元素如何被显示。

display常用的属性共有4个值：

display: none; -- 让标签消失(隐藏元素并脱离文档流)
display: inline; -- 内联元素(内联标签)
display: block; -- 块级元素(块级标签)
display: inline-block; -- 既有inline的属性也有block属性

1、display: block（转换为块元素）

display：block ：转换为块元素

block(块元素)是占用最大可用宽度的元素，此元素将显示为块级元素，此元素前后会带有换行符。
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度
block元素可以设置width和height属性。块级元素即使设置了宽度,仍然是独占一行
block元素也可以设置margin和padding属性

常见的块级元素有： div,p,ul,ol,li,h1~h6 等

以下示例中的样式规则将内联<span>元素显示为块级元素。

HTML代码：

<span>First hello world.</span>
<span>Second hello world.</span>
<span>Third hello world.</span>
<span>Fourth hello world.</span>
<span>Fifth hello world.</span>

CSS代码：

span {
   display: block;
}

执行结果：

2、display: inline（转换为内联元素）

display：inline ：转换为内联元素(内联表签)

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行
inline元素的宽度是自身内容的宽度(默认有多少占多少)
inline元素设置width和height属性无效
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

inline元素只占用 尽可能多的 宽度，并 不强制换行。

CSS代码：

p {
   display: inline;
}

执行结果：

设置元素的display属性只会改变元素的显示方式，而不会改变元素的类型。

所以，带有display: block的内联元素不允许在其中包含其他块元素。

3、display:none（隐藏元素）

display:none 隐藏一个元素

display:none属性-不占用任何空间
display:none属性-隐藏当前元素，它的子元素也一定无法显示
display:none属性-会引起页面重绘和回流，脱离文档

该元素将被隐藏，在页面显示时不会展现出来，就好像该元素不存在一样。

HTML代码：

<h1>因为display:none，你们看不到我。</h1>
<p>这个就能看到啦</p>

CSS代码：

h1 {
   display: none;
}

执行结果：

display还有很多其他的参数值，比如list-item，table，table-cell，table-column，grid等等。

4、display：inline-block（既有inline属性也有block属性）

display：inline-block属性，既有inline的属性也有block属性

它结合了上述inline和block的特点，如下：

使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行
能够改变元素的height，width的值
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果

用通俗的话讲，就是不独占一行的块级元素。如下图可见：

图一：

图二：

两个图可以看出，display：inline-block后块级元素能够在同一行显示。

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）设置inline-block属性，使其既具有block的可设置宽度和高度特性又具有inline的同行特性

二、visibility属性（元素可见性）

visibility属性用于指定元素的可见性。即元素是可见的还是隐藏的。

最常见的值是visible和hidden。

visibility：visible属性值定义的元素是可见的，元素会显示出来，是默认的属性值。
visibility：hidden属性值定义的元素是不可见的，元素不会显示出来，但还会占据原有的空间。

我们可以将visibility属性设置为“hidden”来隐藏元素。

还有一种方法可以将元素“隐藏”起来，即将 display属性设置为“ none”
但是请注意，这两种方法会产生不同的结果：

display:none是彻底消失，不占空间，浏览器也不会解析该元素，当diaplay值为none时会产生回流和重绘
visibility:hidden只是看不到了，但占有相对空间，不会彻底消失，浏览器会解析该元素，只重绘不回流

这里是一个例子：

HTML代码：

<h1>hello world</h1>
<div class="hidden">
   我被设置了visibility: hidden
</div>
<p>
	上方div的位置变成了空行，因为
    div元素被设置了visibility: hidden
</p>

CSS代码：

div.hidden {
   visibility: hidden;
}

执行结果：

display:none隐藏一个元素，没有为该元素保留一个位置。

将visibility: hidden改为display:none会产生以下效果：

div.hidden {
   display: none;
}

执行结果：

三、文档流

1、介绍

文档流是文档中可显示对象在排列时所占用的位置/空间

例如：块元素自上而下摆放，内联元素从左到右摆放

文档流产生的问题：

1.高矮不齐，底边对齐

<span>hello</span>
    <img src="图标.png">

2.空格折叠

<span>我是文本     内容</span>

只显示一个空格

3、元素有空隙

 <span>我是文本内容</span>
    <img src="老虎.png">
    <img src="老虎.png">

2、脱离文档流

使一个元素脱离标准文档流有三种方式

浮动
绝对定位
固定定位

四、CSS position定位

1、position属性（元素定位方法的类型）

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型

可以使用top, bottom, left, 和 right属性来定位元素。

但是，除非position属性有进行初始化设置参数值这些属性才能起效果。根据定位方法，它们的工作方式也不同。

position属性的值可以为：

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit：规定应该从父元素继承 position 属性的值。

position:static (静态定位)

HTML元素默认为静态。静态定位元素总是按照页面的正常流动进行定位。

HTML代码：

<p>没有定位</p>
<p>没有定位</p>
<p>没有定位</p>
<p>没有定位</p>
<p>没有定位</p>
<p class="position_static">我用了静态定位</p>

CSS代码：

p.position_static {
   position:static;
   top: 30px;
   right: 5px;
   color: red;
}

执行结果：

position:fixed（固定定位）能使具有固定位置的元素相对于浏览器窗口被定位，并且即使窗口被滚动也不会移动。

可以使用top, right, bottom, 和left的一个或多个属性来指定位置。

position:absolute（绝对定位）生成绝对定位的元素，相对于static定位（默认定位值，即没有定位）以外的第一个父元素进行定位。

可以使用top, right, bottom, 和left的一个或多个属性来指定位置。

在下面的例子中，使用固定定位将段落固定为top:30px，right:5px。

CSS代码：

p.position_fixed {
   position: fixed;
   top: 30px;
   right: 5px;
   color: red;
}

执行结果：

fixed参数能把元素从正常的顺序中拉出。可以无视其他元素的定位。

设置了fixed的元素可以重叠在其他元素上。

2、相对定位

position:relative（相对定位）元素的定位是相对其正常位置,不会脱离文档流。

可以使用top, right, bottom, 和 left的属性来指定呈现的元素将如何移动。

HTML代码：

<html>
<body>
	<p>hello everyone</p>
	<div>
		<span>hello everyone</span>
		<span>hello everyone</span>
	<div>
</body>
</html>

CSS代码：

p {
   width: 350px;
   border: 1px black solid;
   position: fixed;
}
span {
   background: green;
   color:white;
   position: relative;
   top: 150px;
   left: 50px;
}

执行结果：

relative定位的元素的内容可以移动并与其他元素重叠，但是元素的保留空间在正常流程中仍然保留。

在table中设置position:relative是无效的。

absolute绝对定位

绝对位置元素相对于具有非静态位置的第一个父元素进行定位。如果找不到这样的元素，则针对的是<html>。

绝对定位的元素将从正常流程中移除。文档和其他元素的行为像绝对定位的元素不存在。

五、z-index属性（元素的堆栈顺序）

1、介绍

z-index属性指定元素的堆栈顺序（通过z-index的值可以决定哪个元素应放置在其他元素的前面或后面）。

当元素位于正常流程顺序之外时（受position等属性影响时），它们可以重叠于其他元素。

HTML代码：

<html>
<head>
   <link rel="stylesheet" href="CSS定位与布局.css">
</head>
<body>
	<div class="blue">blue (hello everyone)</div>
	<div class="red">red (hello everyone)</div>
</body>
</html>

CSS代码：

.blue { 
   background-color: #8EC4D0;
   margin-bottom: 15px;
   width: 120px;
   height: 120px;
   color: #FFF;
}
.red {
   background-color: #FF4D4D;
   position: relative;
   width: 120px;
   height: 120px;
   color: #FFF;
   margin-top: -50px;
   margin-left: 50px;
}

执行结果：

红框与蓝框重叠，红框会位于蓝框上方，因为红框是后加载的。

设置z-index属性可以改变这个顺序。

2、指定z-index属性

为蓝色div元素指定较高的z-index值，为红色div元素指定较低的z-index值将导致以下结果：

HTML代码：

<html>
<head>
   <link rel="stylesheet" href="CSS定位与布局.css">
</head>
<body>
	<div class="blue">blue (hello everyone)</div>
	<div class="red">red (hello everyone)</div>
</body>
</html>

CSS代码：

.blue { 
   background-color: #8EC4D0;
   position: relative;
   margin-bottom: 15px;
   width: 120px;
   height: 120px;
   color: #FFF;
   z-index: 3;
}
.red {
   background-color: #FF4D4D;
   position: relative;
   width: 120px;
   height: 120px;
   color: #FFF;
   margin-top: -50px;
   margin-left: 50px;
   z-index: 2;
}

执行结果：

六、float属性（浮动）

1、介绍

float属性指定一个盒子（元素）是否应该浮动。

使用float，可以将元素向左或向右推，以允许其他元素环绕它。

float通常与图像一起使用，但在处理布局时也很有用。

float属性的值是 left，right，和 none。

left，right会使元素向左或者向右浮动。
none能确保元素不会进行浮动

浮动的原理：

浮动以后使元素脱离了文档流
浮动只有左右浮动，没有上下浮动

下面是一个右浮动的图像示例。

HTML代码：

<p>
        <img src="图标.png" />
        此段落有一个向<strong>右浮动</strong>的图像。
        强烈建议为图像添加边距，以便文本
        不要太靠近图像。如果您希望您的文本易于阅读，您可以
        应始终在单词和边框之间添加几个像素、图像、
        和其他内容。
    </p>

CSS代码：

img {
   float: right;
}

执行结果：

2、元素相邻

如果连续放置几个浮动的元素，那么如果有足够的空间，它们将相互浮动。

例如，在设置页面布局中，可以通过设置浮动将图像和文本设置到页面中，使得文本可以跟图像并排显示。

HTML代码：

<p><img src="图标.png" />
我爱学习,我会暴富
</p>

CSS代码

img {
   float: left;
   width: 100px;
   margin-right: 10px;
}
p {
   width: 190px;   
   float: left;
}

执行结果：

七、清除float

1、清除float

元素设置了float属性后会使后面的元素都受其影响，将环绕在其周围。为了避免这种情况，请使用clear属性。

clear属性指定某个元素不受其他设置了float属性的元素的影响。具体可见以下例子：

1. 在下面的例子中，如果将div设置为浮动，则它后面的段落将会围绕在它周围

HTML代码：

<head>
	<link rel="stylesheet" href="CSS定位与布局.css">
</head>
<body>
<p>该段落位于div上方，不受div的float属性影响。</p>
    <div class="floating">
        <img src="图标.png" />
    </div>
<p>该段落位于div下方，受到div的float属性影响。</p>
<p>该段落也位于div下方，受到div的float属性影响。</p>
</body>

CSS代码：

p {
   height: 50px; border: 1px solid red;
}
.floating {
   float: right;
}

执行结果：

2. 在下面的例子中，当父元素不给高度的时候，内部元素不浮动时会撑开；而浮动的时候，父元素变成一条线

HTML代码：

<head>
	<link rel="stylesheet" href="CSS定位与布局.css">
</head>
<body>
	<div class="father">
        <div class="son1"></div>

		<div class="son2"></div>

	</div>

CSS代码：

.father {

    border: 1px solid red;

	}
    .son1,.son2 {

	margin-top: 5px;

	height: 100px;

	width: 150px;

	border: 1px solid #000;

	}

    .son1 {

	float: left;

	}

    .son2 {

	float: right;

	}

执行结果：

简单地说，浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。

2、使用clear属性

clear属性可以使用right，left和both来指定某一个元素不受其他浮动元素的影响。

none : 　允许两边都可以有浮动对象（默认值）
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象

both用来清除来自任一方向的浮动效果。

HTML代码：

<html>
<head>
   <link rel="stylesheet" href="CSS定位与布局.css">
</head>
<body>
	 <p>该段落位于div上方,不受div的float属性影响。</p>
	<br/><br/>
	<div class="floating">
	   <img src="图标.png" />
	</div>
	<p>该段落位于div下方,受到div的float属性影响。</p>
	<br/>
    <div class="clearing">
    <p>该段落由于清除了float,所以不受div的float属性影响。</p>
	</div> 
    <br/>
</body>
</html>

CSS代码：

 p {
   height: 50px; border: 1px solid red;
}
.floating {
   float: right;
}
.clearing {    
   clear: both;
}

执行结果：

八、overflow属性（应对内容溢出）

1、介绍

如前所述，页面上的每个元素都是一个盒子。如果没有设置盒子的高度，那么盒子的高度将随着所需的内容的增大而变大。

overflow属性指定如果内容溢出一个元素的框，会发生什么。

HTML代码：

<html>
<head>
   <link rel="stylesheet" href="CSS定位与布局.css">
</head>
<body>
	<div>
		这个文本在div元素里面，它有一个蓝色的
		背景颜色，并浮动到左侧。 我们设定一个具体的
		div元素的高度和宽度，正如你所看到的，这样会导致文本内容溢出。
	</div>
</body>
</html>

CSS代码：

div {
  width: 150px;
  height: 150px;
  background-color: LightBlue;
  float: left;
}

执行结果：

2、overflow属性值

overflow属性有四个值：visible（默认值），scroll，hidden和auto。

visible：默认值，内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（不溢出也会有滚动条）
auto：如果内容被修剪（比如文字溢出时候），则浏览器会显示滚动条以便查看其余的内容。

scroll值能阻止内容溢出，但会增加出滚动条，通过拉动滚动条可以浏览所有内容。

CSS代码：

div {
   width: 150px;
   height: 150px;
   background-color: LightBlue;
   float: left;
   overflow: scroll;
}

执行结果：

3、auto 和 hidden值

auto - 如果内容溢出被限制，则会添加一个滚动条，使超出的内容可以通过滚动展示出来。

hidden - 隐藏掉内容溢出的部分，溢出的内容将不可见。

CSS代码：

div {
   width: 150px;
   height: 150px;
   background-color: LightBlue;
   float: left;
   overflow: hidden;
}

执行结果：

scroll与auto的区别：

在内容超出时，均会显示滚动条，但在元素没有超出时，auto会隐藏滚动条，scroll依旧显示滚动条，但是禁用滚动条

浅笑心柔142

关注

14
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
CSS定位与布局

从零开始学前端
复制链接

扫一扫