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 ...
随机推荐
- Executing modules as scripts
When you run a Python module with python fibo.py <arguments> the code in the module will be ex ...
- IO复用（Reactor模式和Preactor模式）——用epoll来提高服务器并发能力
上篇线程/进程并发服务器中提到,提高服务器性能在IO层需要关注两个地方,一个是文件描述符处理,一个是线程调度. IO复用是什么?IO即Input/Output,在网络编程中,文件描述符就是一种IO操作 ...
- 八 JDBC
一 JDBC 简介 1. 作用:规避数据库的不同,为程序开发人员访问数据库提供统一的编程接口. 2. 具体作用:和数据库建立连接,发送 sql 语句,处理数据库返回的结果集. 3. 框架模式: 4. ...
- web相关问题总结 - imsoft.cnblogs
1,问题:编辑好的web程序乱码,显示不正常 解决方法:在head中加入一下代码,设置网页使用的语言为中文. <meta http-equiv="Content-Type" ...
- Xcode编译异常和警告汇总(持续更新中)
1.Method definition for 'xxx' not found xxx的方法没有实现 出现原因.h声明了xxx方法但是.m没有实现xxx方法 解决方法:在类的.m文件实现xxx方法 ...
- 最小二乘法 python实现
#-*-coding:UTF-8-*- # Created on 2015年10月20日 # @author: hanahimi import numpy as np import random im ...
- Pickpic和FarStone走好..GreenShot上岗
很早前就看過這丫的,以前就是拒絕改變,換過n多切圖工具了,除了題目中倆 還自己用AHK過一款,但最後還是停在Pickpic因為要上FTP比較快 今天在SourceForge亂逛邂逅了這貨,才知道原來” ...
- ZOJ 1047 Image Perimeters
原题链接 题目大意:鼠标点击一块,求与之联通的所有区域的边长之和. 解法:广度优先搜索.从选中的这个点开始,往周围8个点依次搜索,访问过的点做上标记.如果该点上下左右的一个或多个方向没有相邻的点,边长 ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- poj3249 Test for Job ——拓扑+DP
link:http://poj.org/problem?id=3249 在拓扑排序的过程中进行状态转移,dp[i]表示从起点到 i 这个点所得到的的最大值.比如从u点到v点,dp[v]=max(dp[ ...