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. C++ part5

    为啥大三了课少了一点点,做作业的时间反而多了一大堆堆??? 关于protect 只能被本类或者子类的成员函数,或者友元函数访问. 友元函数: #include <iostream> #in ...

  2. nodejs非安装版配置（windows）

    nodejs官网下载地址: https://nodejs.org/en/download/ 解压到本地并配置环境变量 在环境变量path中新增 D:\develop\node 查看是否配置成功 至此n ...

  3. php foundation knowledge！

    php foundation knowledge! 1 <?php 2 $p = "PII"; 3 define("XPI",3.1415926); 4 ...

  4. Self-publishing 自出版

    Self-publishing 自出版 出书 传统出版 在过去的几十年中,发布意味着要经过代理商和发布者. 自出版 如今,自助出版允许作者绕过出版商和书店,直接向公众出售. refs https:// ...

  5. npm-run-all

    npm-run-all npm scripts https://www.npmjs.com/package/npm-run-all A CLI tool to run multiple npm-scr ...

  6. You, Me & SVG!

    You, Me & SVG! SVG refs code-school-you-me-svg https://www.youtube.com/watch?v=a8Y0L5q63y8 https ...

  7. SVG & Blob & Base64

    SVG & Blob https://developer.mozilla.org/en-US/docs/Web/API/Blob SVG & Base64 https://develo ...

  8. css & clip-path

    css & clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path https://tongqu.me/ tw ...

  9. qt 取进程列表，读写内存, 写字节集

    导入库 pro win32:LIBS += -lpsapi win32:LIBS += -lkernel32 获取列表 #include "mainwindow.h" #inclu ...

  10. nodejs 调用win32 api

    video 教程文件 win32 api >node -v v12.16.1 >npm install -g node-gyp >npm i @saleae/ffi >node ...