css3基础知识第四章布局

时间：2023-01-01 12:21:43

布局是网站制作的第一步，让我们来了解一下怎么布局css3基础知识第四章布局

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

流体布局：

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

块元素：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; 流体布局中，块元素是从上到下一次排列，而行内元素是先从左到右再从上到下排列 很好理解，我就不上代码了。css3基础知识第四章布局
水平布局： 水平布局需要用到浮动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使用了清除浮动，如果不清楚，红色边框会出现在最上层
效果图： css3基础知识第四章布局
 定位布局： 定位布局就稍微难一点，想要弄清楚定位。 定位 1.绝对定位 position: absolute2.相对定位 position: relative 3.固定定位 position: fixedrelative和absolute组合使用需要注意的是1.参照定位的元素必须是相对定位元素的前辈元素2.参照定位的元素必须加入position:relative3.定位元素加入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>
效果图： css3基础知识第四章布局
一点点进步，一点点成长，如果有问题可以留言，我会及时更正

标签：

相关文章