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 ...
随机推荐
- PHP_Const
PHP_Const 常量 规则: 1 总是大写 2 A-Z 及 从127-255的ASCII字符 3 全局范围 4 用define函数定义 5 只能包含标量数据 如Boolean integer fl ...
- wdatepicker minDate&maxDate
示例4-3-2 前面的日期+3天 不能大于 后面的日期 日期从 到 <input type="text" class="Wdate" id ...
- JQuery blockUI
1 $.blockUI({//界面锁定之后 ,显示样式和提示消息 css: { width: 'auto', left: '20px', right: '20px' }, message: '< ...
- NBU 2475 Survivors(RMQ线段树)
NBU 2475Survivors 题目链接:http://acm.nbu.edu.cn/v1.0/Problems/Problem.php?pid=2475 题意:给定n个人,每个人有strengt ...
- MySQL 字符集设置
/*************************************************************************** * MySQL 字符集设置 * 说明: * 数 ...
- HDU 1003 Max Sum（AC代码）
#include <stdio.h> int main(){ int i,t,j,n,x; int start,end,temp,max,sum; scanf("%d" ...
- Redis 设计与实现读书笔记一 Redis字符串
1 Redis 是C语言实现的 2 C字符串是 /0 结束的字符数组 3 Redis具体的动态字符串实现 /* * 保存字符串对象的结构 */ struct sdshdr { // buf 中已占用空 ...
- mark资料-selenium断言的分类
操作(action).辅助(accessors)和断言(assertion): 操作action: 模拟用户与 Web 应用程序的交互. 辅助accessors: 这是辅助工具.用于检查应用程序的状态 ...
- JS基础知识（作用域/垃圾管理）
1.js没有块级作用域 if (true) { var color = “blue”; } alert(color); //”blue” for (var i=0; i < 10; i++){ ...
- 02java语法基础问题总结
S和t引用的不是同一个对象 不是原始数据类型 结论: 枚举类型是引用类型,枚举不属于原始数据类型.它的每一个具体值都引用一个特定的对象. 2. 以下代码的输出结果是什么? int X=100; int ...