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 ...
随机推荐
- XML JSON解析--基本功能
一,json的解析 json文件: {"code": "cn","cities": [{"name": " ...
- iptables配置服务器端口转发
环境: CentOS6.5,192.168.1.10,外网双向通信,绑定域名zlzkj.org: WinServer2008,192.168.1.11,外网不能直接访问到该机器,但ftp.远程桌面.M ...
- Recaman's Sequence_递推
Description The Recaman's sequence is defined by a0 = 0 ; for m > 0, am = am−1 − m if the rsultin ...
- Smart210学习记录----beep linux字符设备驱动
今天搞定了beep linux字符设备驱动,心里还是很开心的,哈哈...但在完成的过程中却遇到了一个非常棘手的问题,花费了我大量的时间,,,, 还是把问题描述一下吧,好像这个问题很普遍的,网上许多解决 ...
- 第一个Sprint冲刺事后诸葛报告
用户反馈:软件一般般,比较传统. 用户数量:5 团队改进建议:选择题与填空题太没有新意了,需要新的创新功能. 1.每个成员第一个sprint阶段有何需要改进? 成员 需要改进 邵家文 需要更多的技术的 ...
- php 滑动验证码
自己研究: jQuery拖拽滑动验证码插件 slideunlock.js 原理:(别人说) 响应时间,拖拽速度,时间,位置,轨迹,重试次数等.这些因素能够构成一个采样结果或者辨识特性. 只获取到滑动时 ...
- 使用 Spring Security 保护 Web 应用的安全
安全一直是 Web 应用开发中非常重要的一个方面.从安全的角度来说,需要考虑用户认证和授权两个方面.为 Web 应用增加安全方面的能力并非一件简单的事情,需要考虑不同的认证和授权机制.Spring S ...
- xctest错误问题解决
xctest xctest.h file not found(null): Framework not found XCTest 在FrameWork Search Path里增加以下内容$(PLAT ...
- UVA 11997 STL 优先队列
题目链接: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...
- JavaWeb学习记录（六）——用户登录功能之Session与验证码验证功能的实现
一.产生验证码的工具类 package blank.util; import java.awt.Color;import java.awt.Graphics;import java.awt.image ...