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 规则应用于 父元 ...
随机推荐
- Dos简单命令及CMD打开方式
打开CMD方式 开始+系统+命令提示符 WIN健+R 输入cmd打开控制台(推荐使用) 在任意文件夹下面,按住shift+鼠标右击,进入powershell 资源管理器的地址栏路径最前面+cmd+空格 ...
- 白日梦的ES笔记三：万字长文 Elasticsearch基础概念统一扫盲
目录 一.导读 二.彩蛋福利:账号借用 三.ES的Index.Shard及扩容机制 四.ES支持的核心数据类型 4.1.数字类型 4.2.日期类型 4.3.boolean类型 4.4.二进制类型 4. ...
- tfrecords转图片存储
import os import shutil import tensorflow as tf import time import sys import cv2 # 图片存放位置 PATH_RES ...
- SVG in Action
SVG in Action HTML5 semantic HTML5 Semantic Elements / HTML5 Semantic Tags figure object <figure& ...
- JavaScript for, for...in, for...of, for-await...of difference All In One
JavaScript for, for...in, for...of, for-await...of difference All In One for for...in for...of for-a ...
- 使用 js 实现一个简易版的 vue 框架
使用 js 实现一个简易版的 vue 框架 具有挑战性的前端面试题 refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE xgqfrms 201 ...
- How to change Linux Terminal display username
How to change Linux Terminal display username 如何更改 Linux Terminal 显示的用户名 (base) ➜ ~ whoami xgqfrms-m ...
- iOS effect & swiper delete components
iOS effect & swiper delete components mint-ui & cell-swipe https://elemefe.github.io/mint-ui ...
- linux bash which
linux bash which https://linuxize.com/post/linux-which-command/ Linux which command is used to ident ...
- html 布局，上下各100px,中间自适应
flex <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...