CSS-11-外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*外边距*/
/*margin:检索或设置对象四边的外延边距*/
/*margin-top:检索或设置对象顶边的外延边距*/
/*margin-right:检索或设置对象右边的外延边距*/
/*margin-bottom:检索或设置对象下边的外延边距*/
/*margin-left:检索或设置对象左边的外延边距*/
/*margin:auto;*/
/*margin负值让元素位移及合并;*/
.margin{
width: 200px;
height: 200px;
background-color: bisque;
margin: auto;
}
.margin1{
width: 200px;
height: 200px;
background-color: yellowgreen;
margin: auto;
margin-top: 20px;
}
</style>
</head>
<body> <div class="margin"></div>
<div class="margin1"></div>
</body>
</html>
CSS-11-外边距的更多相关文章
- CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...
- CSS:CSS margin(外边距)
ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...
- 关于CSS的外边距合并问题
首先,需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 而在普通文档流中,这又分两种情况,分别是父子元素之间和相邻元素之间. <!D ...
- css内外边距属性
盒子模型: 所有HTML元素可以看作盒子,在CSS中,"box model"是用来设计和布局时 使用. CSS盒模型本质上是一个盒子, 封装周围的HTML元素, 它包括:边距,边框 ...
- CSS 内外边距 float positio属性
一.外边距和内边 margin: 用于控制元素与元素之间的距离 外边距:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding: ...
- CSS 垂直外边距合并:规范、延伸、原理、解决办法
<CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...
- css的外边距合并或者外边距塌陷问题
第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40p ...
- css中外边距合并
最近在布局时遇到一个有趣的问题 <style> #div1{width:200px;height:200px;background:red;} #div2{width:50px;heig ...
- CSS Margin外边距合并
应该知道这点东西的!!! 可是偏偏记不住! 外边距合并会发生在以下两种情况下: 1 垂直出现的两个拥有外边距的块级元素. div1 { margin-bottom: 20px; } div2 { ma ...
- CSS margin 外边距 属性的位置关系
padding:内边距 margin :外边距 margin:10px; 所有 4 个外边距都是 10px ******************************************* ma ...
随机推荐
- Centos中Qt编译问题(/usr/bin/ld: 找不到 -lpulse-mainloop-glib,/usr/bin/ld: 找不到 -lpulse...)
Linux下QT编写一个与视频播放的程序,出现/usr/bin/ld: 找不到 -lpulse-mainloop-glib,/usr/bin/ld: 找不到 -lpulse 解决办法: 首先find ...
- npm脚本和package.json
1.什么是npm脚本 在创建node.js项目如一个vue项目,或一个react项目时,项目都会生成一个描述文件package.json . 比如npm允许在package.json文件里面,使用sc ...
- 抽象类(abstract class)和接口(interface)有什么区别?
抽象类中可以有构造器.抽象方法.具体方法.静态方法.各种成员变量,有抽象方法的类一定要被声明为抽象类,而抽象类不一定要有抽象方法,一个类只能继承一个抽象类. 接口中不能有构造器.只能有public修饰 ...
- Spring Cloud的核心成员、以及架构实现详细介绍
什么是微服务 微服务的概念源于Martin Fowler所写的一篇文章“Microservices”. 微服务架构是一种架构模式,它提倡将单一应用程序划分成一组小的服务,服务之间互相协调.互相配合,为 ...
- 日期格式化跨年bug,是否与你不期而遇?
2020年来临之前,日期格式化操作也为程序员准备了一个跨年级别的bug,不知你的系统是否遇到? 临近2020年元旦的几天,不少网站出现了类似2020/12/29,2020/12/30,2020/12/ ...
- 深度兴趣网络DIN-SIEN-DSIN
看看阿里如何在淘宝做推荐,实现"一人千物千面"的用户多样化兴趣推荐,首先总结下DIN.DIEN.DSIN: 传统深度学习在推荐就是稀疏到embedding编码,变成稠密向量,喂给N ...
- HashMap,HashTable 区别,实现原理。
HashMap是HashTable 的轻量级,非线程安全的,都是实现了map接口 区别:hashmap 允许空键值对的存在,非线程安全,效率高于hashtable,因为hashtable 是synch ...
- MySQL故障演习
MySQL故障演习 接上次的 MySQL定时备份 该次实验主要是练习在MySQL数据库发生误删等意外情况下,利用全量备份文件和增量备份文件恢复数据. 1. 实验环境 -- 创建数据库 create d ...
- Faster Rcnn训练自己的数据集过程大白话记录
声明:每人都有自己的理解,动手实践才能对细节更加理解! 一.算法理解 此处省略一万字.................. 二.训练及源码理解 首先配置: 在./lib/utils文件下....运行 p ...
- docker学习1--dockerfile
记录docker学习过程 实践启动一个redis server 命令之前 要弄懂 dockfile 镜像 容器 三者概念以及三者之间的关系 dockerfile格式 # Comment 注释 INST ...