css控制边界与边框示例(内边距、外边距使用方法)
css控制边界与边框示例(内边距、外边距使用方法)
发布时间:2016-12-27 来源:查字典编辑
摘要:一、CSS控制边界1、内边距padding(内边距也叫内填充)padding-bottom长度/百分比元件下端边线的空隙padding-le...

一、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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类