为啥要用div+css来进行网页布局？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为啥要用div+css来进行网页布局？相关的知识，希望对你有一定的参考价值。

DIV是层叠样式表中的定位技术，全称DIVision，即为划分。

有时可以称其为图层。DIV元素是用来为html（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。

定义：

<div>可定义文档中的分区或节（division/section）。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用id或class来标记＜div>，那么该标签的作用会变得更加有效。

注释：＜div>是一个块级元素，也就是说，浏览器通常会在div元素前后放置一个换行符。

提示：请使用＜div>元素来组合块级元素，这样就可以使用样式对它们进行格式化。

用法：

<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是<div>固有的特定的格式表现。可以通过<div>的class或id应用额外的样式。

不必为每一个<div>都加上类或id，虽然这样做也有一定的好处。

可以对同一个<div>元素同时应用class和id属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的特定的元素。

 参考技术A 因为好用、流行，当然你也可以自定义标签来进行网页布局，只要写好css样式即可，甚至你可以用老掉牙的table来给页面进行布局。

CSS：CSS+DIV布局网页

现代网页布局：CSS+DIV：

　　一般的网页都是顺序布局的，很难达到我们需要的网页布局格式，此时使用DIV进行分层布局，类似于盒子，对每一部分内容进行设计。这是现在主流的网页布局方式，使用DIV+CSS。

 

CSS盒模型：

　　网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

　　CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。下面是Box Model的图示：

解释：

内容：就是html的内容，在最内层

内边框padding：padding-top、padding-right、padding- bottom、padding-left

边框border: border-top、border-right、border-bottom、border- left

外边距margin：marging-top、margin-right、margin-bottom、margin-left

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。

 

测试demo如下：

CSS_DIV.html

<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="description" conent="this is an example">
        <meta name="keywords" conent="CSS,DIV">

        <title> CSS和DIV组合布局 </title>

        <link rel="stylesheet" type="text/css" href="CSS_DIV.css">
     </head>

     <body>

         <h1> CSS盒模型</h1>
         <hr>

         <div class="wraper">
             <div class="content">
                 <h2>这是一个测试</h2>
                 <h2>这是一个测试</h2>
                 <h2>这是一个测试</h2>
             </div>
        </div>
     </body>
</html>
View Code

CSS_DIV.css

h2{
    color:white;
    margin: 0;
}

.wraper{/*外层*/
    margin:auto;/*盒模型居中*/
    height: 500px;
    width: 500px;
    background-color: red;
    padding:20px;
}

.content{ /*内层*/
    height: 300px;
    width: 300px;
    background-color: blue;
    padding: 20px;
    border:solid 4px white;
    margin-top: 50px;
    padding-left: 50px;
}
View Code

效果图：

 

 

 

 

 

 

以上是关于为啥要用div+css来进行网页布局？的主要内容，如果未能解决你的问题，请参考以下文章

网页中我在div和css都限制了 这个图片的宽高为啥不起作用

CSS：CSS+DIV布局网页

我用div+css进行网页布局，但是两个相邻div之间有一条缝隙，怎么回事

PHP.3-DIV+CSS标准网页布局准备工作（上）

DW在使用css+div排版时，为啥有的div标签不在固定位置呢，网页放大后，就会移动，求高手解答！谢谢

网页设计中采用div+css布局，这里的DIV是啥意思？