快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

CSS控制div显示的方法

今天小编给大家分享一下CSS控制div显示的方法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

成都创新互联公司是一家专业提供平昌企业网站建设,专注与做网站、成都做网站、H5网站设计、小程序制作等业务。10年已为平昌众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

HTML的组成部分

  • dtd部分：文档类型说明，声明版本、标准

  •  

CSS控制div显示的方法

  •  

CSS控制div显示的方法

  • header部分：给机器看的

  • body部分：给人看的

CSS控制div显示

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

  • 如下代码是CSS通过id设置每个div的宽高和背景色




 
 Document
 
 #a {
 width: 200px;
 height: 100px;
 background: red;
 }
 #b {
 width: 200px;
 height: 100px;
 background: blue;
 }
 #c {
 width: 200px;
 height: 100px;
 background: green;
 }
 


 
 
 

执行效果：

CSS控制div显示的方法

浮动布局

我们先写两个div设置上背景颜色看看效果




 
 Document
 
 #lside {
 height: 200px;
 background: red;
 }
 #rside {
 height: 200px;
 background: green;
 }
 


 我是左边
 我是右边

CSS控制div显示的方法

上文也说ddiv的内容会自动地开始一个新行，所以想将两个div左右排列就要进行浮动布局

我们分别在CSS中加上float属性

 
 #lside {
 height: 200px;
 background: red;
 float: left;
 }
 #rside {
 height: 200px;
 background: green;
 float: right;
 }
 

效果如下图：

CSS控制div显示的方法

清除浮动

当有浮动布局和普通div共同存在时，会发生如下覆盖的情况




 
 Document
 
 #lside {
 height: 200px;
 background: red;
 float: left;
 }
 #rside {
 height: 300px;
 background: green;
 float: right;
 }
 #normal {
 height: 400px;
 background: blue;
 }
 


 我是左边
 我是右边
 我不设置浮动

CSS控制div显示的方法

所以如果不想被覆盖，就要清除浮动

在CSS中对普通元素设置clear属性

当我们增加 clear: left; 时，代表不让左边浮动盖着自己

 #normal {
 height: 400px;
 background: blue;
 clear: left;
 }

此时清除左浮的div就会贴着左浮的div下边显示，如图：

CSS控制div显示的方法

以上就是“CSS控制div显示的方法”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。


文章名称：CSS控制div显示的方法
标题URL：http://6mz.cn/article/gciihi.html

其他资讯