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 规则应用于 父元 ...
随机推荐
- 51nod1089 最长回文子串 manacher算法
0. 问题定义 最长回文子串问题:给定一个字符串,求它的最长回文子串长度. 如果一个字符串正着读和反着读是一样的,那它就是回文串.下面是一些回文串的实例: 12321 a aba abba aaaa ...
- Spring应用上下文生命周期
Spring应用上下文生命周期整体分成四个阶段 ConfigurableApplicationContext#refresh,加载或者刷新持久化配置 ConfigurableApplicationCo ...
- OOP & 模块化, 多态, 封装
OOP 面向对象编程 (OOP) 是用抽象方式创建基于现实世界模型的一种编程模式.它使用先前建立的范例,包括模块化,多态和封装几种技术. 在 OOP 中,每个对象能够接收消息,处理数据和发送消息给其他 ...
- NGK.IO超级节点是我们掌握的下一个财富密码吗？
从日前NGK.IO发布的新闻中,我们捕捉到了一个非常重要的信息,那就是反复被提到的"超级节点".很多人都对这个"超级节点"一头雾水,这个"超级节点&q ...
- 翻译：《实用的Python编程》01_07_Functions
目录 | 上一节 (1.6 文件) | 下一节 (2.0 处理数据) 1.7 函数 随着程序开始变大,我们会想要有条理地组织这些程序.本节简要介绍函数.库模块以及带有异常的错误处理. 自定义函数 对你 ...
- 消息中间件选型分析:从 Kafka 与 RabbitMQ 的对比看全局
本文转载自消息中间件选型分析:从 Kafka 与 RabbitMQ 的对比看全局 前言 消息队列中间件(简称消息中间件)是指利用高效可靠的消息传递机制进行与平台无关的数据交流,并基于数据通信来进行分布 ...
- [Python] 茎叶图和复合饼图的画法
目录 茎叶图 复合饼图 茎叶图 from itertools import groupby nums2=[225, 232,232,245,235,245,270,225,240,240,217,19 ...
- css故障文字动画
免费分享95套java实战项目,不仅有源码还有对应的开发视频,关注公众号『勾玉技术』回复"95"即可获取 首先给内容上hover和before, .glitch:hover:bef ...
- IHttpClientFactory 踩过的坑
public class BasicUsageModel : PageModel { private readonly IHttpClientFactory _clientFactory; publi ...
- Linux 网络分析必备技能：tcpdump 实战详解
大家好,我是肖邦,这是我的第 11 篇原创文章. 今天要分享的是 tcpdump,它是 Linux 系统中特别有用的网络工具,通常用于故障诊断.网络分析,功能非常的强大. 相对于其它 Linux 工具 ...