05border-padding总结

最新推荐文章于 2023-08-24 19:25:34 发布

IT小多

最新推荐文章于 2023-08-24 19:25:34 发布

阅读量355

点赞数

分类专栏： HTML_CSS学习日志文章标签： div里的内容超出溢出 padding改变影响容器大小 border padding

本文链接：https://blog.csdn.net/u011975349/article/details/52314971

版权

HTML_CSS学习日志专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>

IT小多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05border-padding总结

border：border表示边框属性border-width 边框尺寸border-style 边框的形状 solid实线 dashed虚线 dotted 点线 double 双线border-color 注意：1.可指定方向 border-left分别为上左下右四个方向指定属性2.点线在IE6中是不兼容的，另外这些线的形态在不同浏览器显示有细微差别当d
复制链接

扫一扫