05border-padding总结_border-spading-优快云博客

本文链接：https://blog.youkuaiyun.com/u011975349/article/details/52314971

border：

border表示边框属性

border-width 边框尺寸

border-style 边框的形状 solid实线 dashed虚线 dotted 点线 double 双线

border-color

注意：

1.可指定方向 border-left分别为上左下右四个方向指定属性

2.点线在IE6中是不兼容的，另外这些线的形态在不同浏览器显示有细微差别

当div的宽高为0，边框有尺寸时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css_样式位置</title>
		<style>
			#box{
				width:0px;height:0px;
				/*background:blue;*/
				border-top: 100px solid red;
				border-right: 100px solid green;
				border-bottom: 100px solid blue;
				border-left: 100px solid yellow;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

输出这种形态

padding：

padding表示内边距

使用内边距属性时候可能会改变div的大小这是因为：内边距相当于把div加厚了如果想要

使得尺寸正常，需要在div的宽高属性对应的减去padding值。

padding: 10px 20px 30px 20px;

padding的属性也是按照上左下右定义的

可以简写

padding: 10px 20px 30px ;

如果省略右边距，此时上左下右对应：10px 20px 30px

而不是10px 20px 30px 0px

div里的内容超出（溢出）问题解决

解决办法

<span style="font-size:18px;">/*允许长单词换行*/
word-wrap:break-word;
/*规定长单词自动换行的处理方法，允许在单词内换行*/
word-break:break-all; 
/*隐藏滚动条*/
overflow: hidden;</span>