博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
盒子模型
阅读量:6241 次
发布时间:2019-06-22

本文共 2203 字,大约阅读时间需要 7 分钟。

padding

padding: 10px; 表示上下左右的内边距都是10像素
padding: 0 10px; 表示左右的内边距为10像素
padding: 5px 6px 10px; 5 是上内边距像素 6 是左右内边距像素, 10 是下边距像素。
padding: 4px 5px 6px 10px; 4 是上边距 5右边距 6 是下边距,10 是左边距 顺时针旋转 但是内边距像素值不可以为负数,负数无效。

margin

margin:是外边距,是一个盒子与另外一个盒子的距离
margin:没有浮动的情况下 上下叠加,取大值。有浮动的情况下,两个外边距相加

例如:

第一个盒子的样式    .div01 {     width:300px;     height:100px;     background-color:gray;     margin:20px;   } 第二个盒子的样式   .div02 {    width:300px;    height:100px;    background-color:red;    margin:100px 0px 0px 20px;  }

图片描述

如上图所示,理论上上面的margin 20px 和下面的margin 100 应该相加等于120,但是这里注意了,取100(较大的值)作为这2个盒子的距离。

第一个盒子的样式    .div01 {     width:300px;     height:100px;     background-color:gray;     margin:20px;   } 第二个盒子的样式   .div02 {    width:300px;    height:100px;    background-color:red;    margin:100px 0px 0px 20px;    float:left; -- 加入浮动  }

图片描述

如果上图所示 div02加入的浮动 float:left; 外边距不是取大值,而是相加

思考如果margin为负数生效吗?

例如:

.div01 {     width:300px;     height:100px;     background-color:gray;     padding:0px;     margin-bottom:150px; -- 下边距为150px   }  .div02 {    width:300px;    height:100px;    background-color:red;    padding:0px;    margin-top:-50px; -- 上边距为-50  }

如图所示 margin为负数是生效的

如何在页面上嵌入图片

html

英国伦敦
印度海滨
世界名车
世界新款

1,首先清除页面的内外间距

*{    margin:0;     padding:0; }/*  1,1000px 是你想设置盒子的宽度   2,高度不写是因为图片会撑起高度  margin: 0 auto; 主要用于图片居中  浮动元素的父级加上 overflow:hidden 是为了处理内容高度的问题 */.wrap{    width:1000px;    margin: 0 auto;    overflow:hidden; } /*   1,通过ps绘图工具测量,图片的宽度为210px  2,如果你想让内容浮动,就让装东西的容器浮动就可以了,浮动也是为了让内容横向向左排列    其实图片实际的间距是40,但是靠边的那张图片只有20px,所以就  外间距(左右外间距)20px  */ .wrap dl{    width:210px;    float:left;    margin:0 20px;     } /*  用ps测量图片与问题之间的距离   */ .wrap dt {    margin-bottom:19px; } /*   1,文字的行高是固定的,不管你是如何的放大字体,测量出来的   都是一样的   2,吸管吸取文字颜色的时候,一定要挑选文字颜色最深的那个   3,文字类型的样式是可以继承的   */.wrap dl dd {    font-size:12px;    line-height:22px;    color:#525252; }

在浮动元素的父标签设置overflow:hidden; 就可以看到高度,虽然没有设置高度,如下图:

图片描述

页面嵌入图片和文字的整体效果图:

图片描述

转载地址:http://iqdia.baihongyu.com/

你可能感兴趣的文章
jquery $().each,$.each的区别
查看>>
sql server 2000/2005 游标的使用操作(转)
查看>>
Tomcat 部署 Web 通过 ip 直接访问项目
查看>>
Cache Fusion
查看>>
bzoj2502
查看>>
Xcode 控制台打印Unicode字符串转换为中文
查看>>
Codeforces 831C--Jury Marks (思维)
查看>>
oracle内存结构+系统全局区+程序全局区(pga)+排序区+大型池+java池
查看>>
成长7 - lambda,filter,map的运用
查看>>
New Concept English Two 18 46
查看>>
Qt 删除目录
查看>>
Git 移除某些文件
查看>>
poj2940
查看>>
django做form表单的数据验证
查看>>
【OpenFOAM】——OpenFOAM入门算例学习
查看>>
STL UVA 11991 Easy Problem from Rujia Liu?
查看>>
模拟 URAL 1149 Sinus Dances
查看>>
Oracle 11G 数据库迁移【expdp/impdp】
查看>>
17.EXTJs 中icon 与iconCls的区别及用法!
查看>>
3.mybatis实战教程(mybatis in action)之三:实现数据的增删改查
查看>>