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 ...
随机推荐
- HDU3930 （原根）
给定方程 X^A = B (mol C) ,求 在[0,C) 中所有的解 , 并且C为质数. 设 rt 为 C 的原根 , 则 X = rt^x (这里相当于求 A^x =B (mol C) 用大 ...
- Unity3D ShaderLab 使用BlinnPhong高光类型
Unity3D shaderLab 使用BlinnPhong高光类型 上一篇我们实现了自定义高光类型,这一篇,我们说Blinn高光,它是另一种计算和估算高光更高效的方式,它是通过视线防线和光线方向,所 ...
- Qt Clipboard剪贴板简单使用
设置剪贴板的内容 QClipboard *clipboard = QApplication::clipboard(); clipboard->setText("contents&quo ...
- Ubuntu安装文泉驿-微米黑字体
sudo apt-get install ttf-wqy-microhei #文泉驿-微米黑
- 支持 Firefox、Chrome 等主流浏览器的全站变灰 CSS 代码
<style> html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grays ...
- CI 框架隐藏index.php-ubuntu
和朋友在做一个小网站,用到了CI框架,之前测试都是在windows上,隐藏index.php也相对比较简单.但服务器是ubuntu系统,需要配置一下,根据网上看到的一些教程,结合自己电脑的特点,记录步 ...
- TensorFlow简单介绍和在centos上的安装
##tensorflow简单介绍: TensorFlow™ is an open source software library for numerical computation using dat ...
- RelativeLayout用到的一些重要的属性
第一类:属性值为true或false android:layout_centerHrizontal 水平居中 ...
- java for each 错误
简而言之,for each 适用于不改变数组,容器元素的场合,如果改变,必须用索引或者iterator. 例如: A[] arrayA = new A[5]; for (A a : arrayA) { ...
- 《Java程序设计》第3周学习总结
学号20145220<Java程序设计>第3周学习总结 教材学习内容总结 使用jave撰写程序几乎都在使用对象(Object),要产生对象必须先定义类(Class),类是对象的设计图,对象 ...