css控制边界与边框示例(内边距、外边距使用方法)

这篇文章主要介绍了css控制边界与边框示例,需要的朋友可以参考下

一、CSS控制边界

1、内边距

padding（内边距也叫内填充）
padding-bottom 长度/百分比 元件下端边线的空隙
padding-left 长度/百分比 元件左端边线的空隙
padding-right 长度/百分比 元件右端边线的空隙
padding-top 长度/百分比 元件上端边线的空隙

简易写法：

padding:10px 一个值表示同时控制四个方向
padding:2px 4px  两个值表示第一个值控制上下 第二个值控制左右
padding:2px 6px 10px 三个值表示第一个值控制上 第二个值控制右和左 第三个值控制下 左边找右边
padding:1px 2px 3px 4px  四个值表示每个值单独控制上右下左

2、外边距

margin（外边界） 属性介绍
margin-bottom auto 自动调整空隙 长度/百分比 设置下端空隙
margin-left auto 自动调整空隙 长度/百分比 设置左端空隙
margin-right auto 自动调整空隙 长度/百分比 设置右端空隙
margin-top auto 自动调整空隙  长度/百分比 设置上端空隙

简化方案：

margin:2px 4px
margin:2px 6px 10px
margin:1px 2px 3px 4px

<style type="text/css">
div{width:200px;height:200px;background-color:#0F0;margin:100px;padding:10px;
}
body{margin:0px;
}
</style>
</head>
<body>
<div>6、你不能当饭吃，但没有你，我吃不下饭。  7、要有多大的身躯，才能撑起您那龌龊的灵魂啊！  8、做男人的最高境界不是你去泡妞，而是让妞来泡你。 9、有心才会累，无心者无所谓。
</div>
</body>

二、CSS控制边框

1、设置边线的样式：border-style

none 不显示边线
dotted 点线
dashed 虚线
solid 实线
double 双线

2、设置边线的长度(即边框的粗细)：border-width

像素
百分比

3、设置边线的颜色：border-color

简化格式：长度 样式 颜色
设置边线的颜色和长度之前必须先设置边线的样式 因为边线样式默认是none不显示边线的

<style type="text/css">
img{border-style:solid dotted double;border-color:#0F0 #C00 #FF0 #00F;border-width:10px;
}
</style>
</head>
<body>
<img src="../../../素材库/biaoqing4.png"/>
</body>

css控制边界与边框示例(内边距、外边距使用方法)相关推荐

html给页面整体添加左右边距_css控制边界与边框示例(内边距、外边距使用方法)...
一.CSS控制边界 1.内边距 padding(内边距也叫内填充) padding-bottom 长度/百分比元件下端边线的空隙 padding-left 长度/百分比元件左端边线的空隙 padd ...
css内边距外边距和边框
关于css内边距外边距和边框的一些介绍 1.margin 外边距是指相邻同辈元素之间的距离. 相邻元素块的margin叠加显示如上图所示两个元素块的margin值都设置为50px. 2.paddi ...
HTML5 CSS控制Table内外边框、颜色、大小示例
联系人:石虎 QQ:1224614774 昵称: 嗡嘛呢叭咪哄 QQ群:807236138 群称: iOS 技术交流学习群 ...
CSS控制Table内外边框、颜色、大小示例
在默认的情况下,我们的CSS将Table的边框清除掉了,下面与大家分享下CSS控制Table内外边框.颜色.大小的样式,想学习的朋友可以参考下其实按照常理来说,现在的网站应该早已经抛弃什么表格了,现 ...
CSS边框设置以及内外边距的使用
1.边框该border属性为以下属性的简写属性.例如:border:1px solid black; border-width表示边框的粗细,可以是medium,thick等,一般使用数字加单位组合 ...
android 外边距,外边距（padding）重叠的及解决办法
两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒 ...
CSS 之盒子模型——边框、内边距、外边距
使用width来设置盒子内容区的宽度使用height来设置盒子内容区的高度 width和height只是设置的盒子内容区的大小,而不是盒子的整个大小,盒子可见框的大小由内容区,内边距和边框共同决定 ...
CSS中的边框与内边距外边距
边框的三个方面(webkit.firefox和ie) border-width,边框的宽度 border-color,边框的颜色 border-style,边框的样式(border-style:dot ...
CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...

css控制边界与边框示例(内边距、外边距使用方法)

一、CSS控制边界

二、CSS控制边框

css控制边界与边框示例(内边距、外边距使用方法)相关推荐

最新文章

热门文章