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. codeforces 911D

    D. Inversion Counting time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  2. Python errors All In One

    Python errors All In One SyntaxError: invalid character in identifier \u200b, ZERO WIDTH SPACE https ...

  3. macOS & pbcopy

    macOS & pbcopy copy from command line pbcopy $ whoami | pbcopy # xgqfrms-mbp $ echo "hello, ...

  4. BPMN 2.0

    BPMN 2.0 Business Process Model and Notation 业务流程模型和符号 https://www.omg.org/spec/BPMN/2.0.2/ bpmn-js ...

  5. HTML5 image rotate effect

    HTML5 image rotate effect HTML5 实现旋转拨号键盘 简单的html中js实现图片中心旋转 https://download.csdn.net/download/q3168 ...

  6. js navigator.wakeLock 保持屏幕唤醒状态

    let lock; btn.addEventListener("click", async () => { try { if (lock) { lock.release(); ...

  7. 【C#】反射的用法及效率对比

    反射实例化类 public class Person { public string Name { get; set; } public Person(string name) { this.Name ...

  8. django学习-21.优化表数据的标题展示

    目录结构 1.前言 2.表数据的标题默认展示的数据格式是[模型类名 object(主键名)]的相关信息 3.优化表数据的标题展示的数据格式是[改成我们想要展示的数据格式]的相关完整操作步骤 3.1.第 ...

  9. FTP返回值代表含义

    FTP:屏幕信息举例 1.用户要用FTP和远地主机(网络信息中心NIC上的主机)建立连接. 2.本地FTP发出的连接成功信息. 3.从远地服务器返回的信息,220表示"服务就绪". ...

  10. vue中将分号去掉，将双引号变为单引号的配置

    在项目根目录下创建.prettierrc文件,文件内容如下: { "semi": false, "singleQuote": true } 实现vs code中 ...