盒子边框

最新推荐文章于 2023-10-30 14:31:56 发布

时松

最新推荐文章于 2023-10-30 14:31:56 发布

阅读量496

点赞数 1

分类专栏：基础文章标签：盒子边框

本文链接：https://blog.csdn.net/ice_yr/article/details/97540141

版权

基础专栏收录该内容

79 篇文章 1 订阅

订阅专栏

语法：

border:border-width    border-style   border-color
边框属性-设置边框样式

none：没有边框即忽略所有边框的宽度
solid：边框为单实线（最常用）
deshed：边框为虚线
dotted：边框为点线

		div {
			width: 200px;
			height: 200px;
			border-width: 1px;   /*边框宽度  粗细*/
			border-color: skyblue;   /*边框颜色*/
			/*border-style: solid;      边框样式 实线 */
			/*border-style: dashed;  边框样式  虚线 */	
			/*border-style: dotted; 	边框样式  点线*/
			border-style: double;   /* 边框样式  双线*/ 
		}

表格的细线边框

		table {
			border-collapse: collapse;   /*合并相邻边框*/
		}

圆角边框（css3）

语法格式：

border-radius: 左上角 右下角; 右上角  左下角 
/* radius 半径（距离）*/


		div {
			width: 200px;
			height: 200px;
			border: 1px solid blue;
		}
		div:first-child {  /*结构伪类选择器 选亲兄弟*/
			border-radius: 10px;  /*一个数值表示4个角都是相同的 10px的弧度*/
		}
		div:nth-child(2) {
			/*border-radius: 100px;   取宽度和高度的一半则会变成圆*/
			border-radius: 50%;
		}
		div:nth-child(3) {
			border-radius: 10px 40px;    /*左上角和右下角是10px 右上角和左下角40px 对角线*/
		}
		div:nth-child(4) {
			border-radius: 10px 40px 80px;    /*左上角10  右上角和左下角40  右下角80*/
		}
		div:nth-child(5) {
			border-radius: 10px 40px 80px 10px;     /*左上角10  右上角40  右下角80  左下角100  顺时针 */
		}

盒子内边距（padding）

指边框与内容之间的距离
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

		div {
			width: 200px;
			height: 200px;
			border: 1px solid blue;
			/*padding-left: 20px;   左内边距
			padding-top: 30px;*/
			/*padding: 10px 30px;   上下10   左右30*/
			/*padding: 10px 30px 50px;    上10  左右30 下50*/
			/*padding: 10px 20px 30px 40px;   上右下左  顺时针*/
			padding: 20px; /* padding如果只写一个值表示上下左右都是20像素*/
		}

外边距

margin属性用于设置外边距。设置外边距会在元素之间创建"空白"，这段空白通常不能放置其他内容
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
margin:上右下左外边距

外边距实现盒子居中

可以让盒子实现水平居中，需要满足一下两个条件：
1.必须是块级元素
2.盒子必须指定了宽度（width）
然后就给左右的外边距设置auto，就可使块级元素水平居中。
代码如下（常用）：
.header {
width:960px;
margin:0 auto;
}
注意：行内元素无效，必须是块级元素
例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: blue;
			/*margin-top: 100px;*/  
			/*margin-left: 50px;*/
			margin: 30px auto;  /*上下30 左右auto 自动 这样可以实现块级带有宽度的盒子水平居中对齐*/
			padding: 4px;
		}
		header {
			width: 900px;
			height: 120px;
			background-color: black;
			margin: 0px auto;           /*左右一定是auto就可以居中*/
		}
	</style>
</head>
<body>
	<div></div>
	<header>头部标签</header>
</body>
</html>

时松

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
盒子边框

语法：border:border-width border-style border-color边框属性-设置边框样式 none：没有边框即忽略所有边框的宽度solid：边框为单实线（最常用）deshed：边框为虚线dotted：边框为点线 div { width: 200px; height: 200px; border-width: 1px; ...
复制链接

扫一扫