CSS垂直布局
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垂直布局的更多相关文章
- 奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- 用css进行布局
用css进行布局 一,开始布局的注意事项 1.作为最佳实践,应把html(内容)和css(显示)分离: 2.网站设计主要有两大类型:固定宽度(基于像素)和响应式(也称流式,使用百分数定义) 二,构建 ...
- FineUI第十四天---布局之垂直布局和水平布局
布局值水平布局和垂直布局 垂直盒子布局和水平盒子布局非常灵活易用,在很大程度上能够取代锚点布局,行布局和列布局. 1.垂直盒子布局: BoxConfigAlign:控制子容器的的尺寸 Start:位于 ...
- 《CSS网站布局实录》学习笔记（三）
第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...
- css浮动布局
上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
- 简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
- CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...
随机推荐
- L3-002. 堆栈【主席树 or 线段树 or 分块】
L3-002. 堆栈 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 大家都知道"堆栈"是一种"先 ...
- C++ part3
函数和const references: C++中const用于函数重载 有些情况可以重载,有些不行,具体看↑. 隐式类型转换 references: nowcoder 对于内置类型,低精度的变量给高 ...
- Java 对象的哈希值是每次 hashCode() 方法调用重计算么？
对于没有覆盖hashCode()方法的对象 如果没有覆盖 hashCode() 方法,那么哈希值为底层 JDK C++ 源码实现,实例每次调用hashcode()方法,只有第一次计算哈希值,之后哈希值 ...
- Dell Display Manager for Mac
Dell Display Manager for Mac DDM for macOS solution https://www.dell.com/community/Monitors/DDM-for- ...
- 手把手搭建一套基于 Sentry 的异常监控系统
手把手搭建一套基于 Sentry 的异常监控系统 Sentry 开源版 DevOps refs https://github.com/getsentry/sentry sentry-anomaly-m ...
- how to read the system information by using the node cli tool?
how to read the system information by using the node cli tool? node cli & get system info demos ...
- h5 localStorage和sessionStorage浏览器数据缓存
sessionStorage 会话数据,localStorage 没有过期时间 两个的API基本都一样的 基本的使用 // 保存一个数据 sessionStorage.setItem('key', ' ...
- js 反应&行动
反应 class Reaction { _page = 1; get page() { return this._page; } set page(newValue) { this._page = n ...
- Flutter 使用 flare
video flare_flutter 工作示例 install dependencies: flare_flutter: ^1.5.5 assets: - assets/flr/switch_day ...
- NGK主网上线后内存价格上涨30倍，NGK RAM是否值得买入？
美国加州时间10月14日上午10时,NGK主网正式上线.因为市场预期向好,NGK上线以后迎来了大涨,NGK的代币价格上涨了10倍,内存价格上涨了30倍.目前,NGK上线已经有五天的时间,盘面上已经出现 ...