CSS排版

最新推荐文章于 2022-04-10 09:50:51 发布

too肥

最新推荐文章于 2022-04-10 09:50:51 发布

阅读量501

点赞数 2

分类专栏： css 前端文章标签： CSS排版

css 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

CSS排版

简介

CSS 排版过程：首先在整体上进行<div>标记分块，然后进行 CSS 定位，最后添加相应的内容，如果网页是拓扑结构，则修改CSS属性进行重新定位即可。本节讲主要介绍 CSS 排版内容。
知识点

CSS 版面配置概述
定位
浮动
导航
Normal Flow

0. CSS 版面配置概述

到现在为止我们已经学习了很多 CSS 的基础知识包括如何设置文本的样式，以及如何设置和操作内容所在的边框样式。我们还学习了盒子模型，现在我们再来看看如何把你的盒子放在与视口相关的正确位置上。

1. 定位

定位使用 position 属性来指定，它有四个不同的取值，下面为大家一一介绍。

1.1 静态定位

静态定位就是按照标准流的方式显示，静态定位的元素不会受到 top， bottom， left， right 影响。语法为:

position：static;

静态定位是每个元素获取的默认值，所以我们基本上都不需要再单独设置它。

1.2 绝对定位

绝对定位语法为：

position：absolute;

绝对定位有以下特点：

绝对定位以浏览器左上角为基准设置位置
当一个盒子包含在另一个盒子中，父盒子未设置定位，子盒子以浏览器左上角为基准设置位置；当父盒子设置定位，子盒子以父盒子左上角为基准设置位置
绝对定位不占空间位置（类似于浮动）

1.3 相对定位

相对定位语法为：

position：relative;

相对定位有以下特点：

相对定位以元素自身的位置为基准设置位置
相对定位要占空间位置
一般子元素设置绝对定位，父元素设置相对定位（子绝父相）

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
	    .box1{
			width:200px;
			height:100px;
			position:relative;
			border:5px dotted green;
			top:20px;
			left:200px;
	    }
	    .box2{
			width:100px;
			height:50px;
			position:absolute;
			border:1px dashed blue;
			top:20px;
			left:20px;
  	    }
		</style>
    </head>
    <body>
		<div class="box1">
	    	<div class="box2"></div>
		</div>
    </body>
</html>

在这里插入图片描述

1.4 固定定位

固定定位表现类似于绝对定位，只有一个主要区别：绝对定位固定元素是相对于 <html>元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。固定定位也不占空间位置，语法为：

position：fixed;

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p{
				color:gold;
                position: fixed;
                top:200px;
                left:100px;
            }
        </style>
    </head>
    <body>
        <p>我爱学习！</p>
    </body>
</html>

在这里插入图片描述
注：复制这段代码到你的编辑器中运行，然后调整你浏览器的视口大小，你会发现，无论怎么变，p 标签所在的位置始终距离浏览器视口的左距离为 100px，上距离为 200px。

介绍 top， bottom， left， right
使用 top， bottom， left，和 right 来精确指定要将定位元素移动到的位置，这些属性的值可以使用逻辑上期望的任何单位：px，cm，%等。也可以使用负值。

z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。用于处理当多个元素重叠的时候，哪些元素设置在其他元素的顶部。特别需要注意的是元素可拥有负的 z-index 属性值，属性值没有单位，只有数字。Z-index 仅能在定位元素上奏效（例如 position:absolute;）,例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
	    .box{
			position:absolute;
			left:10px;
			top:10px;
			z-index:-1;
			background-color:red;
			width:400px;
			height:200px;
	    }
		</style>
    </head>
    
    <body>
		<h1>我爱学习!</h1>
		<div class="box"></div>
		<p>默认的z-index是0。Z-index -1 拥有更低的优先级。</p>
    </body>
</html>

在这里插入图片描述
如果我们把 box 盒子的 z-index 设置为 1，是什么效果呢？动手做做看吧。

2. 浮动

浮动通过 float 属性来定义，分为向左浮动和向右浮动。语法为：

float:left|right;

浮动的特点：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
设置了浮动的元素，脱离标准流（脱标）。
行内元素设置浮动可以设置宽高。
块级元素设置浮动可以在一行显示。

我们把前面的例子设置浮动再来看看效果代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
	    .box1, .box2, .box3, .box4, .box5, .box6{
			width:100px;
			height:50px;
			float:left;
			color:blue;
			font-size:20px;
	    }
	    .box1, .box4{
			background-color:red;
	    }
	    .box2, .box5{
	   		background-color:gold;
	    }
	    .box3, .box6{
			background-color:green;
	    }
		</style>
    </head>
    <body>
	<div class="box1">
	     我是块级元素1
	</div>
	
	<div class="box2">
	     我是块级元素2
	</div>
	
	<div class="box3">
	     我是块级元素3
	</div>

	<span class="box4">我是行内元素4</span>
	<span class="box5">我是行内元素5</span>
	<span class="box6">我是行内元素6</span>
    </body>
</html>

在这里插入图片描述
正如我们所预料的一样，通过设置浮动后我们让块级元素在一行显示了，也让行内元素 span 能够设置宽高了。

2.2脱标

特别需要注意的是，设置了浮动的元素，脱离标准流（脱标）。这样说可能不好理解，我们下面来一个具体的例子。

首先写三个不浮动的 div。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
	    .box{
			width:600px;
			height:300px;
			border:2px dashed green;
	    }
	    .box1, .box2, .box3{
			width:200px;
			height:100px;
	    }
	    .box1{
			background-color:red;
	    }
	    .box2{
			background-color:yellow;
	    }
	    .box3{
			background-color:blue;
	    }
		</style>
    </head>
    
    <body>
	<div class="box">
	    <div class="box1"></div>
	    <div class="box2"></div>
	    <div class="box3"></div>
	</div>
    </body>
</html>

在这里插入图片描述
然后我们给 box2 盒子（黄色的盒子），设置右浮动来看看效果：

结论：box2 盒子（黄色的盒子）脱离了文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。而 box3 盒子（蓝色的盒子）则替代了原来 box2 的位置。
给 box2 盒子（黄色的盒子），设置左浮动来看看效果：
在这里插入图片描述
结论：box2盒子（黄色的盒子）脱离了文档流并且左右移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了 box3 盒子，使 box3 盒子从视图中消失。我们可以理解为 box2 盒子像羽毛一样飘在 box3 盒子上面，挡住了 box3 盒子。

2.3 清除浮动

当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。出现这种情况，我们需要清除浮动。

首先我们写一个示例，不设置浮动，第一个盒子的父元素不设置高度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
	    .box{
			width:600px;
			border:2px dashed green;
	    }
	   	 	.box1, .box2{
			width:200px;
			height:100px;
	    }
	    .box1{
            	background-color: red;
            }
	    .box2{
            	background-color: blue;
            }
		</style>
    </head>
    <body>
	<div class="box">
	    <div class="box1"></div>
	</div>
	
	<div class="box2">
	</div>
	
    </body>
</html>

在这里插入图片描述
然后我们修改上面的例子，给 box1 盒子设置一个左浮动。再来看看效果。

我们发现 box2 盒子跑到 box1 盒子下面去了，这个时候我们就需要清除浮动带来的不利影响了。
清除浮动的方法有很多，这里给大家介绍一个最常见的用得最多的方法：使用伪元素来清除浮动，是在浮动元素的父元素上设置伪元素，此处是 box 上设置。

.clearfix:after {
    content: "";/*设置内容为空*/
    height: 0;/*高度为0*/
    line-height: 0;/* 行高为0*/
    display: block;/*将文本转为块级元素*/
    visibility: hidden;/*将元素隐藏*/
    clear: both;/*清除浮动*/
}
 .clearfix {
    zoom: 1;/*为了兼容IE*/
}

清除浮动后的效果：
在这里插入图片描述
注：是在浮动元素的父级元素上设置伪元素，也就是说我们把 <class=“box”> 改成 <class=“box clearfix”>，在其他地方使用的时候，也是只需要在标签中添加上一个 class 名 clearfix，并直接复制上述清除浮动的伪元素代码即可。当然我们这里还可以直接给父元素加上高度，来解决这个不利影响，不过一般不建议这么做，因为有时候我们也不知道高度具体是多少，容易出问题，所以还是建议用伪元素来清除浮动。
完整代码：

<!DOCTYPE html>
<html>   
<head>   
	<meta charset="UTF-8">        
	<title></title>
        <style type="text/css">
	    .box{
			width:600px;			
			border:2px dashed green;
	    }
	   .box1, .box2{
			width:200px;
			height:100px;
	    }
	    .box1{
           	background-color: red;
			float:left;
         }
	    .box2{
            background-color: blue;
         }
	    .clearfix:after{
    		content: "";/*设置内容为空*/
    		height: 0;/*高度为0*/
    		line-height: 0;/* 行高为0*/
    		display: block;/*将文本转为块级元素*/
    		visibility: hidden;/*将元素隐藏*/
    		clear: both;/*清除浮动*/
	    }
	   .clearfix{
    		zoom:1;/*为了兼容IE*/
	   }
		</style>
    </head>
    <body>
		<div class="box clearfix">
	  	  <div class="box1"></div>
		</div>	
		<div class="box2"></div>
    </body>
</html>

通过前面的学习，我们可以试着来做一下导航。
我们需要完成的最终效果：
在这里插入图片描述
思路：我们首先给一个外层的 div盒子，让它在浏览器中水平居中，让它与浏览器视口上方有一段距离。然后在 div盒子里面嵌套一个 ul 标签，ul 标签下嵌套三个 li标签，每一个 li标签下再写一个 a 标签，li标签的宽度为div盒子的三分之一。文字内容相对于li标签是水平居中的，链接点了之后自己设置一个与默认颜色不同的颜色，字体样式为： 14px/40px 微软雅黑;加粗。尝试动手写一下吧。具体的宽度、颜色等可以自己设置成自己喜欢的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
	body, ul, li{
	    margin:0;
	    padding:0;
	}
	ul, li{
	    list-style:none;
	}
	.nav{
	    width:900px;
	    height:40px;
	    background:pink;
	    margin:20px auto;
	}
	.nav ul li{
	    float:left;
	    width:300px;
	    text-align:center;
	}
	.nav ul li a{
	    display:inline-block;
	    height:40px;
	    font:italic bold 20px/40px 微软雅黑;
	    padding:0px 0px;
	    text-decoration:line-through;
	}
	.nav ul li a:hover{
	    background:#FFa;
	}
    </style>
</head>
<body>
    <div class="nav">
	<ul>
	    <li><a href="#">Html</a></li>
	    <li><a href="#">Css</a></li>
	    <li><a href="#">JavaScript</a></li>
	</ul>
    </div>
</body>
</html>

在这里插入图片描述

Normal Flow

normal flow(文档流)又叫标准流，所谓标准流就是默认的布局方式：块级元素纵向有序排列，行内块（行内）元素横向有序排列。
例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
	    .box1, .box2, .box3{
		width:100px;
		height:50px;
	    }
	    .box1, .box4{
		background-color:red;
	    }
	    .box2, .box5{
		background-color:gold;
	    }
	    .box3, .box6{
		background-color:green;
	    }
	</style>
     </head>
     <body>
	<div class="box1">我是块级元素1</div>
	<div class="box2">我是块级元素2</div>
	<div class="box3">我是块级元素3</div>
	<br />

	<span class="box4">我是块级元素4</span>
	<span class="box5">我是块级元素5</span>
	<span class="box6">我是块级元素6</span>
      </body>
</html>

在这里插入图片描述

too肥

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS排版

CSS排版简介 CSS 排版过程：首先在整体上进行<div>标记分块，然后进行 CSS 定位，最后添加相应的内容，如果网页是拓扑结构，则修改CSS属性进行重新定位即可。本节讲主要介绍 CSS 排版内容。知识点CSS 版面配置概述定位浮动导航Normal FlowCSS 版面配置概述到现在为止我们已经学习了很多 CSS 的基础知识包括如何设置文本的样式，以及...
复制链接

扫一扫

专栏目录