HTML+CSS学习笔记（一）——网页布局

最新推荐文章于 2023-04-17 17:45:34 发布

徐徐小法师

最新推荐文章于 2023-04-17 17:45:34 发布

阅读量809

点赞数

本文链接：https://blog.csdn.net/xuxumanzou/article/details/47070649

版权

HTML+CSS基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML+CSS基础的标签和属性都掌握后，开始进行网站开发时，往往会遇到布局上的困难。所以本学习笔记从布局开始讲起，相关的基础知识可以参见W3C网站：http://www.w3school.com.cn/。

1、CSS框模型

首先，需要掌握基本的框模型，如下图所示。

从内到外分别是元素、内边距、边框、外边距。需要注意的是，在CSS中的width和height属性，指的是element元素的宽高，而不是边框的宽高。

由于浏览器的差异，在CSS中，通常会声明各元素的外边距、内边距为0，从而方便控制。代码如下：

[css]view plaincopy 
   
 *{  
     margin: 0;  
     padding: 0;  
 }  

2、CSS浮动

通常在HTML中会使用div标签+CSS实现布局。在默认的文档普通流中，div会采取垂直的排列顺序。通过向左向右浮动的方式，可以实现横向的排列。

（图片来源于W3CSchool）

向左向右浮动的代码为float：left;和float: right.

需要注意的是，使用浮动后。被浮动的元素将不存在于普通流中，因此会出现一个框挡住另一个框的情况。所以想要使得框分理出来，可以使用clear属性。clear: both;

下面举个例子；

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
     <head>  
         <meta charset="UTF-8">  
         <title></title>  
         <style>  
             .div1{  
                 float: left;  
                 width: 200px;  
                 height:200px;  
                 background: red;  
             }  
             .div2{  
                 float: left;  
                 width: 200px;  
                 height:200px;  
                 background: blue;  
             }  
             .div3{  
                 clear: both;  
                 width: 400px;  
                 height:200px;  
                 background: green;  
             }  
         </style>  
     </head>  
     <body>  
         <div class="div1"></div>  
         <div class="div2"></div>  
         <div class="div3"></div>  
     </body>  
 </html>  

得到结果：

如果将“clear: both;”删除掉，那么布局就会变成下图所示。绿色块会被挡住，因为红色块和蓝色块在普通流中不占空间。

3、相对定位与绝对定位

定位属性由position来决定，默认为static，即文档的普通流。

relative为相对定位，absolute和fixed为绝对定位。

具体可以参见链接：W3C中的定位

需要注意的是，相对定位占用的空间为初始位置空间，而绝对定位不占用网页中空间；使用绝对定位时，absolute表示该元素在“已定位的祖先元素”中的绝对定位，如果没有找到，那么位置相对于“初始包含块（通常是网页）”，而fixed表明在窗口中的绝对定位。

4、布局技巧

通过浮动来完成整体布局，通过margin和padding进行细节上的控制。

徐徐小法师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS学习笔记（一）——网页布局

HTML+CSS基础的标签和属性都掌握后，开始进行网站开发时，往往会遇到布局上的困难。所以本学习笔记从布局开始讲起，相关的基础知识可以参见W3C网站：http://www.w3school.com.cn/。1、CSS框模型首先，需要掌握基本的框模型，如下图所示。从内到外分别是元素、内边距、边框、外边距。需要注意的是，在CSS中的width和heigh
复制链接

扫一扫