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 规则应用于 父元 ...
随机推荐
- Linux shell script All In One
Linux shell script All In One refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
- 使用 js 实现十大排序算法: 选择排序
使用 js 实现十大排序算法: 选择排序 选择排序 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
- flex item default All In One
flex item default All In One flex item default 初始值 === flex: 0 1 auto; https://drafts.csswg.org/css- ...
- BGV再掀DeFi投资热潮，NGK全球启动大会圆满落幕
此次全球启动大会的主题为"BGV再掀DeFi投资热潮,后市发展如何". 首先发言的是NGK灵石团队首席技术官STEPHEN先生,他先是对出席此次大会的嘉宾.到场的媒体记者以及NGK ...
- （1）MySQL进阶篇在linux环境下安装
1.概述 对于mysql二进制安装,优点是可以安装到任何路径下,灵活性好,一台服务器可以安装多个mysql.缺点是已经编译过,性能不如源码编译得好,不能灵活定制编译参数.如果用户即不想安装最简单却不够 ...
- 发布Jar包到maven中央仓库
什么是maven中央仓库 maven是java世界最流行的构建工具,构建内容囊括了一个java项目的整个生命周期.其中最重要的功能就是依赖管理,maven通过一个类似云的ftp站点统一管理所有java ...
- 【微前端】微前端最终章-qiankun指南以及微前端整体探索
序 这才2月中旬,广州就已经渐渐地进入了夏季,--夏天总是让人焦虑的.过年闲暇时间写下了微前端这系列的终章,欢迎拍砖.如果你习惯直接上手代码,不妨跳到实践一节,直接上代码教程玩一玩. qiankun原 ...
- 大家最常用的编程论坛是哪个呢，欢迎评论！！掘金16 juejin 简书41 jianshu 博客85 csdn137 csdn
软件编程交流论坛 掘金 16 juejin 简书 41 jianshu 博客 85 cnblogs csdn 137 csdn stackoverflow 0 思否 github 大家最常用的 ...
- Redis基础及其相关面试题
Redis持久化 一.持久化简介 Redis 的数据 全部存储 在 内存 中,如果 突然宕机,数据就会全部丢失,因此必须有一套机制来保证 Redis 的数据不会因为故障而丢失,这种机制就是 Redis ...
- LeetCode-二叉搜索树的范围和
二叉搜索树的范围和 LeetCode-938 首先需要仔细理解题目的意思:找出所有节点值在L和R之间的数的和. 这里采用递归来完成,主要需要注意二叉搜索树的性质. /** * 给定二叉搜索树的根结点 ...