css3基础知识第四章布局

最新推荐文章于 2021-08-03 20:05:49 发布

ITDragon龙

最新推荐文章于 2021-08-03 20:05:49 发布

阅读量4.9k

点赞数 1

分类专栏： css3 前端技术文章标签： css3

本文链接：https://blog.csdn.net/qq_19558705/article/details/49841059

版权

前端技术同时被 2 个专栏收录

20 篇文章 13 订阅

订阅专栏

css3

6 篇文章 0 订阅

订阅专栏

布局是网站制作的第一步，让我们来了解一下怎么布局

布局默认是流体布局，还有水平布局和定位布局。很多只是叫法不一样而已

流体布局：

在了解流体布局之前，我们应该先明白行内元素（内联元素），块元素和内联块元素

块元素：div ; p ; h1~h6 ; ol ; ul ; dl ; table ; address ; blockquote ; form

行内元素：a ; span ; br ; i ; em ; strong ; label ; q ; var ; cite ; code

内联块元素：img ; input

块元素：每个块级元素都各占一行，可以设置长和宽，设置display:inline可以转为行内元素;

行内元素：可以和其他元素占用同一行，没有长和宽，设置display:block可以转为块元素;

内联块元素：同时具备内联元素和块元素；和其他元素都在一行，元素的宽和高以及顶部和底边的距离都可以设置；设置display:inline-block;

流体布局中，块元素是从上到下一次排列，而行内元素是先从左到右再从上到下排列

很好理解，我就不上代码了。

水平布局：

水平布局需要用到浮动float，可以让霸道的块元素水平布局

可以同时在左 float:left;

可以同时在右 float:right;

一左一右 { float:left; } { float:right; }

学习代码：

<!doctype html>
<html>
	<head>
		<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<title>html模板</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">
		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			.centent{width:300px;border:1px solid red;margin:150px auto;}
			.centent .one{width:100px;height:200px;background:#66CCFF;float:left;}
			.centent .two{width:200px;height:200px;background:#FFCC33;float:right;}
			.clear{clear:both;}
		</style>

	</head>
<body>
	<div class="centent">
		<div class="one"></div>
		<div class="two"></div>
		<div class="clear"></div>
	</div>
</body>
</html>

one div使用了向左浮动，two div使用了向右浮动，clear div使用了清除浮动，如果不清楚，红色边框会出现在最上层
效果图：

定位布局：

定位布局就稍微难一点，想要弄清楚定位。

定位

1.绝对定位 position: absolute

2.相对定位 position: relative

3.固定定位 position: fixed

relative和absolute组合使用

需要注意的是

1.参照定位的元素必须是相对定位元素的前辈元素

2.参照定位的元素必须加入position:relative

3.定位元素加入position:absolute便可以使用top；bottom；right；left开始定位

我是比较喜欢用固定定位的，很多地方都会用到。

学习代码：

<!doctype html>
<html>
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>html模板</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0;}
.head{width:1000px;height:40px;background:#ccc;position:fixed;}
.centent{width:1000px;border:1px solid red;}
.centent .one{width:200px;height:500px;background:#6CF;float:left;}
.centent .three{width:200px;height:500px;background:#FC3;float:right;}
.bottom{width:1000px;height:40px;background:#666;position:absolute;bottom:0px;}
.clear{clear:both;}
</style>
</head>
<body>
<div class="head"></div>
<div class="centent">
<div class="one"></div><span style="white-space:pre">
<div class="three"></div>
<div class="clear"></div>
</div>
<div class="bottom"></div>
</body>
</html>

效果图：

一点点进步，一点点成长，如果有问题可以留言，我会及时更正

ITDragon龙

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
css3基础知识第四章布局

布局是网站制作的第一步，让我们来了解一下怎么布局布局默认是流体布局，还有水平布局和定位布局。很多只是叫法不一样而已流体布局：在了解流体布局之前，我们应该先明白行内元素（内联元素），块元素和内联块元素块元素：div ; p ; h1~h6 ; ol ; ul ; dl ; table ; address ; blockquote ; form行内元素：a ; span ;
复制链接

扫一扫

专栏目录