当前位置：首页 > article >正文

网页制作11-html,css,javascript初认识のCCS样式列表（下）

article 2025/3/9 13:29:19

六、外边距，内边距，边框属性

盒子模型：

1、外边距：margin

img{
margin:40px 30px 10px 20px;
}/*外边距复合属性:上右下左*/

2、内边距

body{
padding:10px 20px 40px 30px;
}/*内边距复合属性:上右下左*/

3、边框

1）边框样式

取值	含义
none	默认值无边框
dotted	点线边框
dashed	虚线边框
solid	实线边框
double	双实线边框
groove	边框具有立体感的沟槽
ridge	边框长脊形
inset	使整个边框凹陷
outset	使整个边框凸起

.b{
           border-top-style: dashed;
           border-right-style: solid;
           border-left-style: double;
           border-bottom-style: groove;
           line-height: 20px;
       }

效果图如下：

2）边框宽度 border-width

medium	默认宽度
thin	小于默认宽度
thick	大于默认宽度

border-top-width:上

border-right-width: 右;
border-left-width:左;
border-bottom-width: 下;

综合：border-width: 3px 3px 4px 9px;

3) 边框颜色：border-color:

border-color:red yellow blue green;综合

border-top-color:black;上

border-right-color: 右;
border-left-color:左;
border-bottom-color: 下;

4）边框属性综合border(分方向综合合并宽度，样式和颜色）

border-top:2px dasher black;

border-right: 2px dasher black;
border-left:2px dasher black;
border-bottom: 2px dasher black;

<style type="text/css">
		.img1{
			margin:10px 30px 10px 90px;
		}/*外边距复合属性:上右下左*/
		body{
			padding:10px 20px 40px 30px;
		}
		.b{font-size: 30px;
			border-top-style: dashed;
			border-right-style: solid;
			border-left-style: double;
			border-bottom-style: groove;
			line-height: 49px;
			border-width: 2px;
			border-color:red yellow blue green;
		}/*盒子模型*/
		
		.d{position: absolute;
		top:5%;
		left:20%;
		margin:5px;/*绝对定位*/
		z-index: -1;}/*置于最底层*/
		
		
	</style>
</head>

<body>
	<img src="bottle.jpg" width="400" align="left" class="img1" alt=""/><!--元素定位-->
	<span class="b"><!--边框样式，颜色，宽度设置-->
	1、The art of living is to know when to hold fast and when to let go. For life is a paradox: it enjoins us to cling to its many gifts even while it ordains their eventual relinquishment.

　　The rabbis of old put it this way: “A man comes to this world with his fist clenched, but when he dies, his hand is open.”

　　生活的艺术在于懂得什么时候追求，什么时候放弃。因为生活就是一个矛盾体：它要我们紧紧抓住它赐予我们的生命之礼，然后最终又让它们从我们手中跑掉。

　　老先生们说：“人们紧握着拳头来到这个世界上，离开这个世界时却摊开了双手。”

　　Surely we ought to hold fast to life, for it is wondrous, and full of a beauty that breaks through every pore of God’s own earth.

　　We know that this is so, but all too often we recognize this truth only in our backward glance when we remember what was and then suddenly realize that it is no more.

　　当然我们应该紧紧把握生活，因为它美妙得不可思议，充满了从上帝的每个毛孔里蹦出来的美。

　　我们都清楚这一点，但我们常常只有在回首往事时才会想去过去，才会突然意识到过去永远地消逝了，才会承认这个道理。
	(from:网络，《生活的艺术(The art of living)》)</span><hr/>
	
	<img src="firework.png" class="d" alt=""><!--绝对定位-->
	</body>
</html>