1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title></title>

  6     <style>

  7     .box1,.box2{

  8         width:200px;

  9         height:200px;

 10     }

 11     .box1{

 12         background-color:orange;

 13         /*设置一个下外边距*/

 14         margin-bottom:100px;

 15

 16     }

 17     .box2{

 18         background-color:yellow;

 19         /*设置一个上外边距*/

 20         margin-top:100px;

 21

 22     }

 23     .box3{

 24         width:200px;

 25         height:100px;

 26         background-color:orange;

 27         padding-top:100px;

 28

 29     }

 30     .box4{

 31         width:100px;

 32         height:100px;

 33         background-color:red;

 34     }

 35     /*

 36     垂直外边距的重叠(折叠)

 37         -相邻的垂直方向的外边距会发生重叠现象

 38         -兄弟元素

 39             -兄弟元素之间的相邻垂直外边距会取两者中的较大值(两者都>    是正数)

 40             -特殊情况

 41                 -如果相邻的外边距是一正一负则取两者的和

 42                 -如果响铃的外边距都是负值，则取两者中绝对值较大的

 43         兄弟元素建相邻外边距的重叠，对于开发是有利的，所以我们不需>    要进行处理

 44         -父子元素

 45             -父子元素间相邻外边距，子元素会传递给父元素(上外边距)

 46             -父子元素外边距的折叠会影响页面的布局，必须要进行处理

 47             处理方法：

 48                 -给父元素添加一个上边框

 49                 -给父元素添加一个内边距，并且从父元素的高度上减去对

    应的值也可以实现相同的效果

 50

 51      */

 52     </style>

 53 </head>

 54 <body>

 55     <div class="box1"></div>

 56     <div class="box2"></div>

 57     <div class="box3">

58         <div class="box4"></div>

 59     </div>

 60 </body>

 61 </html>

CSS垂直布局的更多相关文章

  1. 奇妙的CSS之布局与定位

    前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...

  2. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  3. 用css进行布局

     用css进行布局 一,开始布局的注意事项 1.作为最佳实践,应把html(内容)和css(显示)分离: 2.网站设计主要有两大类型:固定宽度(基于像素)和响应式(也称流式,使用百分数定义) 二,构建 ...

  4. FineUI第十四天---布局之垂直布局和水平布局

    布局值水平布局和垂直布局 垂直盒子布局和水平盒子布局非常灵活易用,在很大程度上能够取代锚点布局,行布局和列布局. 1.垂直盒子布局: BoxConfigAlign:控制子容器的的尺寸 Start:位于 ...

  5. 《CSS网站布局实录》学习笔记（三）

    第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...

  6. css浮动布局

    上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...

  7. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  8. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  9. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

随机推荐

  1. SDN总结

    之前做项目用到了SDN,知道其作用,但是对其不是特别熟悉,今天特来总结一下相关知识点: 1. SDN的典型架构分为哪三层 主要分为应用层,控制层,和基础设施层: 2. SDN技术的关键点是 控制平面和 ...

  2. 微服务架构Day05-SpringBoot之Servlet

    旧版 配置嵌入式Servlet容器 SpringBoot默认使用Tomcat作为嵌入式Servlet容器 如何定制和修改Servlet容器相关配置 1.在配置文件中定制和修改Servlet容器有关的配 ...

  3. Web 前端必备的各种跨域方式汇总

    Web 前端必备的各种跨域方式汇总 跨域方式汇总 同源策略 协议相同 + 域名相同 + 端口相同 https://www.xgqfrms.xyz/index.html https://www.xgqf ...

  4. VS Code & terminal & Canvas & DOM

    VS Code & terminal & Canvas & DOM https://code.visualstudio.com/docs/editor/integrated-t ...

  5. Taro UI

    Taro UI 一套基于 Taro 框架开发的多端 UI 组件库 https://github.com/NervJS/taro-ui-demo https://taro-ui.aotu.io/#/do ...

  6. Android 获取apk的URL Schemes

    1. 下载apk到你的PC上 2. 反向工程Android APK文件的工具 Apktool 3. 查看"AndroidManifest.xml"文件 See alse: http ...

  7. c++ win32 关机 注销 重启

    #include <iostream> #include <Windows.h> #pragma comment(lib, "user32.lib") #p ...

  8. 「NGK每日快讯」2021.2.8日NGK公链第97期官方快讯!

  9. 基于NGK发行的稳定币USDN如何撼动市场?

    近日,基于NGK发行的稳定币USDN在各大社区的热度越来越高,很多人都说USDN将会撼动市场,那么USDN究竟有怎样的优势,能引起这么大的轰动呢?今天我们就一起来分析一下USDN. USDN是基于公链 ...

  10. NGK项目八大板块是什么？

    公链项目生态各板块中,应用生态繁荣与实体经济联系作为密切,也被看做公链平台追求的终极目标,NGK公链以实体企业粘合客户,致力于重塑金融体系,构建全球区块链生态. NGK让经济权益上链发行,目前已有八大 ...