css之padding,marging
padding：内边距，所有浏览器都支持，不允许使用负值
继承内部格式生成了10px的边距。
属性：
auto：浏览器计算机内边距。
length：规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%:规定基于父元素的宽度的百分比的内边距。
inherit:规定应该从父元素继承内边距。
html代码
<body>
<div style="width: 500px;height: 300px;border: solid 1px;background-color: #303a40">
<div style="width: 200px;height: 200px;background-color: #4cae4c;padding: 10px;"></div>
</div>
</body>
效果图：
内边距生效前：
marging:外边距
继承外部格式生成了10px边距
css代码
.cs1{
width: 400px;
height: 400px;
border: solid 1px;
background-color: yellow;
position: relative;
left:20px;
top:20px;
}
.cs2{
width: 100px;
height: 100px;
background-color: black;
position: relative;
left:20px;
top:40px;
margin:20px;
}
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="ctest.css">
</head>
<body>
<div class="cs1">
<div class="cs2"></div>
</div>
</body>
</html>
效果图原来样式： 效果图：设置margin后
css之padding,marging的更多相关文章
- 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)
W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...
- CSS中padding和margin以及用法
CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...
- css利用padding百分比实现图片自适应高度
应用场景 宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题 重点:CSS百分比padding都是相对宽度计算的 <div class=" ...
- [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- CSS百分比padding实现比例固定图片自适应布局
一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...
- css利用padding生成图标
先插入HTML结构: <div class="line-three"></div> <div class="circle"> ...
- 图解CSS的padding,margin,border属性
原文出处:http://hi.baidu.com/sonan/item/af05cf8759810d1cc31627d5 觉得不错,保存以备用. --------------------------- ...
- CSS知识点-- Padding
The CSS padding properties define the space between the element border and the element content. Padd ...
随机推荐
- OD调试程序3
条件跳转指令的图片,作为以后的参考. 载入了reverses.eve程序,F8下去,发现一个跳转,调用了一个函数,致使程序结束.于是我们绕过它,参考上面的 跳转指令图片. 然后继续F8 又会发现一个跳 ...
- python类的定义和使用
python中类的声明使用关键词class,可以提供一个可选的父类或者说基类,如果没有合适的基类,那就用object作为基类. 定义格式: class 类名(object): "类的说明文档 ...
- React Native 弹性布局FlexBox
React Native采用一中全新的布局方式:FlexBox(弹性布局).可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式. 何为FlexBox? 完整名称为:the f ...
- Anniversary party_树形DP
Description There is going to be a party to celebrate the 80-th Anniversary of the Ural State Univer ...
- K Best（最大化平均数）_二分搜索
Description Demy has n jewels. Each of her jewels has some value vi and weight wi. Since her husband ...
- HDU 4902 (线段树）
Problem Nice boat(HDU 4902) 题目大意 维护一个序列,两种操作. 第一种操作,将一段区间[l,r]赋值为x. 第二种操作,将一段区间[l,r]中大于等于x的数与x求gcd. ...
- JS获取年月日
<script language="javascript"> var myDate = new Date(); myDate.getYear(); //获取当前年份(2 ...
- 判断字符串中是否有SQL攻击代码
判断一个输入框中是否有SQL攻击代码 public const string SQLSTR2 = @"exec|cast|convert|set|insert|select|delete|u ...
- CentOS下Web服务器环境搭建LNMP一键安装包
CentOS下Web服务器环境搭建LNMP一键安装包 时间:2014-09-04 00:50来源:osyunwei.com 作者:osyunwei.com 举报 点击:3797次 最新版本:lnmp- ...
- UVa 10037 - Bridge
题目大意 在一个晚上有N个人过河,他们有一个手电筒,需要有手电筒才能过河,每次最多两个人同时过河,每次过河时间等于速度最慢的那个人的过河时间,让所有人全部过河,花费的时间最少是多少? 分析 如果只有一 ...