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. zzuli-2266 number

    题目描述 某人刚学习了数位DP,他在某天忽然思考如下问题: 给定n,问有多少数对<x, y>满足: x, y∈[1, n], x < y x, y中出现的[0, 9]的数码种类相同 ...

  2. VuePress plugins All In One

    VuePress plugins All In One VuePress & element-ui & docs $ yarn add -D vuepress-plugin-demo- ...

  3. How to get the real screen size(screen resolution) by using js

    How to get the real screen size(screen resolution) by using js 获取用户屏幕的真实像素分辨率, 屏幕实际尺寸 window.deviceP ...

  4. 使用 Promise 实现请求自动重试

    使用 Promise 实现请求自动重试 "use strict"; /** * * @author xgqfrms * @license MIT * @copyright xgqf ...

  5. 「NGK每日快讯」2021.1.25日NGK公链第83期官方快讯!

  6. PAUL ADAMS ARCHITECT ：阿联酋和美国富人推动英国高端房地产市场

    来自2020年前三季度的数据显示,在英国高端市场上,由国际买家担保的抵押贷款交易数量最多,阿联酋目前处于领先地位.到目前为止,在2020年完成的所有交易中,有35%来自阿联酋. PAUL ADAMS ...

  7. 【从零开始撸一个App】Fragment和导航中的使用

    Fragment简介 Fragment自从Android 3.0引入开始,它所承担的角色就是显而易见的.它之于Activity就如html片段之于页面,好处无需赘述. Fragment的生命周期和Ac ...

  8. Information:java: javacTask: 源发行版 8 需要目标发行版 1.8

    原文链接:https://blog.csdn.net/idiot_qi/article/details/105149846 创建新maven项目跑main,出现这个编译异常 网上找了找,记录一下以备不 ...

  9. mui调用本地相册调用相机上传照片

    调用mui的常用库和jquery html部分: <header class="mui-bar mui-bar-nav"> <a class="mui- ...

  10. TERSUS无代码开发(笔记05)-简单实例电脑端页面设计

    案例笔记电脑端页面设计   1.新建项目(请假管理qjgl)   2.开发软件界面介绍(常用的功能按键)      3.目录中显示元件对象      4.对元件对象的操作主要方式是双击(双击哪个元件, ...