css基础知识(盒模型)

盒模型 同时被 2 个专栏收录
1 篇文章 0 订阅
2 篇文章 0 订阅

1、盒模型

<style type="text/css">
			body{
				/* margin: 0; *//*取消外边距*/
				}
			.nav{
				width: 1200px;
				height: 200px;
				border: 1px solid darkred;
				margin: 0 auto;/*居中*/
				 margin: 20px 10px 10px; /*上右下*/
			}
			.nav div{
				width: 500px;
				height: 50px;
				box-sizing: border-box;/*保持width和height的值不变*/
				padding: 10px;
				border-width: 1px;
				border-style: solid;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<div class="d1">
				<a href="#">首页</a>
			</div>
			<div class="d2">
				<a href="#">系统班</a>
			</div>
		</div>
	</body>

注:
1、margin、padding值可设置 */1-4个,1个则四面相同,其他的个数则自动取相对面的值
也可以写单边值例如:margin-left;padding-right;
2、border:的值分开写
border-width:1px 2px 3px 4px;
border-style:solid/dotted/dashed;实线 圆点虚线 虚线
border-color: red;默认为字体的颜色
3、外层未设置margin值时,里层设置了margin,则会被里层元素顶开
4、父元素容器会和第一个子元素/最后一个子元素的外边距进行合并
相连/邻容器的外边距会进行合并。
2、圆角边框

 /* 值可写1-4个 */
	border-radius: 10px;
	 /* 若是正方形则为圆,长方形为椭圆 */
	 border-radius: 50%;

3、盒子大小指定

/*默认*/
box-sizing: content-box;
padding: 10px;
	box-sizing: border-box;
	/* 此时的宽度为border+padding+content */

4、盒阴影(box-shadow)

/*右 下 模糊距离 阴影大小*/
	box-shadow: 0 5px 10px 10px red; /* 盒阴影 */
	box-shadow: 0 0 10px rgb(255,255,127); /* 外发光 */
	box-shadow: 0 0 10px red,inset 0 0 10px red;/* 内发光和外发光 */
	box-shadow: inset 0 0 10px red;/* 内发光 */

5、文本溢出(overflow)

overflow:hidden;
				/* visible:默认可见
					hidden:隐藏
					scroll:滚动
					auto:自动
				 */

6、轮廓(outline):不占空间,不可代替边框

border: 1px solid red;
	outline: 1px solid blue;
	/* outline-width: ; outline-style: ;outline-color: red; */
	outline-offset: 2px;/* 偏移(扩大) */
  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

杨码

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值