div,margin,padding
<!-- 类比礼品盒里装方块月饼。月饼的食用部分(我们把它称之为月饼肉身)要装在小包装盒里,月饼肉身即为content。月饼肉身与直接包裹它的小包装盒(我们把它叫做月饼的衣服)之间的距离叫padding。其中月饼的衣服厚度叫border。月饼的衣服与月饼礼品盒之间的距离叫margin。-->
<!-- css中的width和height指的是content的宽度和高度 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
} .test1{
width:150px;
height:150px;
border:6px solid red;
} .test2{
margin-top:40px;
padding-top:40px;
width:150px;
height:150px;
border:6px solid gray;
} .test2_son{
width:80px;
height:50px;
border:12px solid blue;
}
</style>
</head>
<body>
<div class="test1">test1</div>
<div class="test2">
<div class="test2_son">test2_son</div>
</div>
</body>
</html>
div,margin,padding的更多相关文章
- 巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)
本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...
- css007 margin padding border
css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...
- 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高
1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...
- 巧用margin/padding的百分比值实现高度自适应
原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...
- margin/padding百分比值的计算
1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这 ...
- css之margin && padding讲解
margin && padding盒子模型: margin是模块与模块的空隙,padding是内容与边框的空隙 注: 1.margin:边缘.空白 2.padding:填充 margi ...
- 总结那些有默认margin,padding值的html标签
一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...
- 关于margin padding
margin padding设置百分比是以父元素的宽度作参考. 定位的left,top等取百分比 则以参照定位元素的padding+width做参考 margin 四个同时设定 以margin-lef ...
随机推荐
- 解决忽略VScode中Python插件pylint报错的问题
pylint是VScode中python自带的插件,可以帮助代码规范,美观. 但是有些报错是你不想看到的,你可以选择性的忽略. 例如,在re.compile()中,可以添加参数re.S使. 匹配任意字 ...
- 释义Oracle 11r2中并行执行相关参数
因最近对现场某些服务器进行诊断和调整,用到了这类参数,因此对这类参数做了详尽的查阅和研究,现将该类参数释义如下,以方便同行和自己参考,禁止转载: 1.PARALLEL_ADAPTIVE_MULTI_U ...
- JQ 标签相关知识
1.判断 checkbox 和 radio 是否选中 if($("标签选择器").is(":checked")) 2.改变 checkbox 选中状态 .pro ...
- WPF自定义控件与样式-自定义按钮(Button)
一.前言 程序界面上的按钮多种多样,常用的就这几种:普通按钮.图标按钮.文字按钮.图片文字混合按钮.本文章记录了不同样式类型的按钮实现方法. 二.固定样式的按钮 固定样式的按钮一般在临时使用时或程序的 ...
- 由路由器AP隔离引起的WEB服务不能访问的问题
最近在自己的电脑上运行了一个Web服务,发现它只能被本机访问,无法在同一个局域网的其它设备访问. 于是在网上搜索了各种资料,通通都是在操作系统层面来分析解决问题的. 而我怎么尝试都不成功的情况下,差点 ...
- Django Form组件 学生管理系统
from django.db import models # Create your models here. class Classes(models.Model): title=models.Ch ...
- Java:List集合内的对象进行排序
List集合中的对象进行排序,除了for外,还有java的Collections对象来对摸个集合进行排序的用法. 比如说我有一个List集合,集合元素为: public class TaskAutoE ...
- python自定义函数可以向前引用不用声明
#有些编程语言不够"聪明",向这类向前引用的方式会导致报错,但Python足够"醒目",这段代码是正确的! def next(): print('我在n ...
- 浅谈linux静态库、动态库。
动态库又叫动态共享文件(.so,Dynamic Shared Objects)和静态库(.a)都是将一些待重用的公共代码打包成一种特殊的重定位目标文件. 在使用时,连接器会将静态库中所有的代码,编译到 ...
- react-router 4实现代码分割(code spliting)
官方一开始推荐的使用bundle-loader来做代码分割的方式感觉有点麻烦,而且代码看起来有点不舒服.而且需要一直依赖bunder-loader 一开始我想为什么不能像vue一样,直接使用ES的新特 ...