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 规则应用于 父元 ...
随机推荐
- POJ 2778 DNA Sequence（AC自动机 + 矩阵快速幂）题解
题意:给出m个模式串,要求你构造长度为n(n <= 2000000000)的主串,主串不包含模式串,问这样的主串有几个 思路:因为要不包含模式串,显然又是ac自动机.因为n很大,所以用dp不太好 ...
- lua windows上使用vs编译Lua
video 下载lua源文件 还有种方法: 创建空项目,取名lua,导入lua源文件 将luac.c移除,然后编译lua.exe 将lua.c移除,添加luac.c然后编译lua.exe后重命名位lu ...
- Flutter: 显示&关闭系统叠加层ui
import 'package:flutter/services.dart'; /// 关闭 SystemChrome.setEnabledSystemUIOverlays([]); /// 显示 S ...
- NGK算力市场，不止有动静态收益还有SPC空投！
随着数字货币交易的火热,云算力挖矿也悄然崛起.越来越多的用户开启云算力挖矿,以获取更多的收益.相较于传统的矿机挖矿,用户通过购买算力进行云挖矿,节省了购买矿机以及维护的成本.另一方面,也降低了安全风险 ...
- Mybatis-05 注解开发
Mybatis-05 注解开发 注解开发 注解的核心是反射机制 面向接口编程的根本原因:解耦,可拓展,提高复用,分层开发中.上层不用管具体的实现,大家都遵守共同的标准,使得开发变得容易,规范性好. 1 ...
- 不同浏览器CSS样式不兼容问题
一句话,我想的太复杂了.向朋友请教才了解到,其实只要加个判断即可,首先获取到浏览器的基本信息,像什么版本啊,名称啊.默认语言啊等等,然后根据不同浏览器默认加载不同CSS样式即可,获取浏览器版本的连接如 ...
- ElasticSearch 中的 Mapping
公号:码农充电站pro 主页:https://codeshellme.github.io 1,ES 中的 Mapping ES 中的 Mapping 相当于传统数据库中的表定义,它有以下作用: 定义索 ...
- golang知识总结
目录 1.slice扩容规则 2.内存寻址.内存对齐,go结构体内存对齐策略 3.go语言map类型分析 3.1 hash冲突 3.2 hash表扩容 3.3 go语言中的map结构是hash表. 3 ...
- DCL之单例模式
所谓的DCL 就是 Double Check Lock,即双重锁定检查,在了解DCL在单例模式中如何应用之前,我们先了解一下单例模式.单例模式通常分为"饿汉"和"懒汉&q ...
- Go benchmark 一清二楚
前言 基准测试(benchmark)是 go testing 库提供的,用来度量程序性能,算法优劣的利器. 在日常生活中,我们使用速度 m/s(单位时间内物体移动的距离)大小来衡量一辆跑车的性能,同理 ...