DIV+CSS

最新推荐文章于 2025-05-18 14:14:26 发布

zhuhui2000

最新推荐文章于 2025-05-18 14:14:26 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

分类专栏： css基础1

本文链接：https://blog.youkuaiyun.com/zhuhui2000/article/details/83279715

css基础1 专栏收录该内容

3 篇文章

订阅专栏

1.DIV+css标准化布局
说明：在网页制作中，需要对页面内容进行“模块化标准布局”，把内容放入某个位置，让页面形成固定规律展示出来；
模块化：在网页开发中以块的形式展现出来；
标准化：在开发网站时是有一定的标准的，w3c给的；
好处：为了把HTML页面和css进行分离，在以后维护时，合作开发，有利于搜索引用的抓取；

2.无意义“div”和”span”
说明：在HTML标记中一般都是有自带“名称”，如h1是加标题的，a是加超链接的；只有div和span是没有意义的，所以布局就使用div和span，div一般给大块的内容布局，span是给行内的内容布局。
块元素：不管内容多少，都会占一行，可以改变大小当时还是独占一行；
行内元素:内容多少占多少；
块元素和行内元素的转换：
在这里插入图片描述

3.盒子模型：
说明：在HTML中的每个元素可以是一个以盒子的形状来存在的；
盒子特点：由“内容-元素”+“内填充”+“边框”+“外边框”；
计算盒子大小：100*100+10+1+10
盒子的宽：100+20+2+20

（1）Border属性：
在这里插入图片描述
案例：

（2）Padding属性：

注意;padding是占背景的！

（3）margin属性：
在这里插入图片描述
案例：

4.浮动布局
说明：元素在网页中进行左或由的漂浮，脱离原来的文档流。
属性：

（1）浮动的普通情况：脱离原来的文档流，其他没有浮动的元素会钻入到浮动元素的下面；如果需要所有的元素都显示，那么都需要加浮动流
在这里插入图片描述

（2）如果某个元素加上其他元素后比最大的包裹元素要大，最后一个会被挤到第二行。

（3）如果前面的元素比其他元素高，那么会卡住其他元素

5.浮动元素和文本的关系
（1）说明：文本是不会钻入到浮动元素下面的
在这里插入图片描述

（2）清除浮动：

目的：当浮动完成（布局完成），在回来，再落回到普通的文档流上
写法：在浮动元素的下面（紧挨者),添加一个空的div,这个div就用来清除上面元素浮动的，直接给div加清除（clear)浮动的属性。

6.div+css布局设计
1.元素居中，块元素和行内元素
块元素：需要指定宽度，居中才可以生效，普通块元素占一行，所以需要设置宽度
行内元素需要转换成块元素，必须指定宽度
在这里插入图片描述

2.两栏排列：
在这里插入图片描述
3.多栏排列:

综合布局设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">
      .box{width: 960px;border:1px solid orangered;margin:0px auto;}
      .box.head{width:100%;height:90px;background: yellow;}
      .box.head.logo{width:200px;height:90px;background: deeppink;}
      .box.head.ads{width:600px;height:90px;background: yellowgreen;}
      .box.head.tel{width:160px;height:90px;background: deepskyblue;}
      .box.nav{width:100%;height:60px;background: darkmagenta;}
      .box.content{width:100%;height:400px;background: red;}
      .box.content.con-left{width:30%;height:400px;background: darkmagenta;}
      .box.content.content-center{width:30%;height:400px;background: darkmagenta;}
      .box.content.content-right{width:40%;height:400px;background: darkmagenta;}
      .box.content.top{width:100%;height:400px;background: wheat;}
      .box.content.con-c-left{width:49%;height:200px;border:1px solid red;}
      .box.content.con-c-right{width:49%;height:200px;border:1px solid red;}

      .box.footer{width:100%;height:120px;background: yellow;}
      .box.content.top{width:100%;height: 200px;background: blue}
      .box.content.left{width:100%;height: 200px;background: blue}
      .box.content.right{width:100%;height: 200px;background: blue}
      .left{float:left;}
      .right{float:right;}
      .clear{clear:both;}

    </style>


</head>
<body>
  <div class="box">
      <div class="head">
          <div class="logo left"></div>
          <div class="ads left"></div>
          <div class="tel right"></div>
      </div>
      <div class="nav"></div>
      <div class="content">
          <div class="content-left left">
              <div class="top"></div>
              <div class="con-c-left"></div>
              <div class="con-right"></div>
          </div>
          <div class="content-center left">
              <div class="top"></div>
              <div class="con-left"></div>
              <div class="con-right"></div>
          </div>
          <div class="content-right left ">
              <div class="top"></div>
              <div class="con-left"></div>
              <div class="con-right"></div>
          </div>
      </div>
      <div class="footer"></div>
  </div>
</body>
</html>