CSS盒子模型—3

最新推荐文章于 2022-11-25 19:00:00 发布

kkkk_1112

最新推荐文章于 2022-11-25 19:00:00 发布

阅读量273

点赞数

文章标签： css

本文链接：https://blog.csdn.net/kkkk_1112/article/details/108790558

版权

一、CSS盒子模型

概念：
盒子模型四部分组成：内容、边框(border)、内边距(padding)、外边距（margin）
内容：盒子里面的文字和图片等元素组成内容
边框：指的是盒子的厚度
内边距：盒子内容与边框之间的距离
外边距：盒子与盒子之间的距离

1、边框 border

语法：
border : border-width ||border-style ||border-color

属性	作用
border-width	定义边框粗细，单位px
border-style	边框的样式
border-color	边框颜色

边框的样式
none：没有边框（默认）
solid：边框为单实线（最常用的）
dashed：边框为虚线
dotted：边框为点线
代码

	<style >
		div{
    
			width: 300px;
			height: 200px;
			/*线的粗细*/
			border-width: 10px;
			/*border-style:solid实线；dashed 虚线 dotted 点线*/
			border-style: solid;
			border-color: black;
		}
	</style>

边框简写：border: 10px dotted yellow;
三个属性没有先后顺序。

边框的样式写法

上边框	下边框	左边框	右边框
border-top-style 样式	border-bottom-style 样式	border-left-style 样式	border-right-style 样式
border-top-width 宽度	border-bottom-width 宽度	border-left-width 宽度	border-right-width 宽度
border-top-color 颜色	border-bottom-color 颜色	border-left-color 颜色	border-right-color 颜色
（重点）border-top：样式宽度颜色	border-bottom：样式宽度颜色	border-left：样式宽度颜色	border-right：样式宽度颜色

举例代码：

div{
			width: 200px;
			height: 100px;
			/*先写大的，后些小的*/
			border :none;
			border-top:1px black solid;
			border-left: 1px yellow solid;
			border-right: 1px green solid;
			border-bottom: 1px blue solid;
		}

border-collapse：collapse；（合并的意思）表示相邻边框合并在一起

/*相邻边框合并在一起，让边框变细一点，实现 1 + 1 = 1 的效果*/
border-collapse: collapse;

2、内边距 padding

概念
内边距（padding）：是指边框与内容之间的距离。
设置

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

当我们给盒子指定padding之后，发生了2件事情：

内容和边框有了距离，添加了内边距
对盒子的影响：盒子会变大了

/*内边距的距离：赋值顺序为 上右下左 顺时针*/
padding: 10px 20px 30px 5px;

padding赋值个数不同，表达的意思不同：

值的个数	表达意思
1个值	padding：上下左右内边距
2个值	padding：上下内边距左右内边距
3个值	padding：上内边距左右内边距下内边距
4个值	padding：上右下左顺时针赋值

举例子：新浪官网的导航栏

<!DOCTYPE html>
<html>
<head>
	<title>新浪网导航栏</title>
	<style >
		.nav
		{
    
			/*设置盒子的高度*/
			height: 41px;
			/*设置盒子的背景颜色*/
			background-color: #FCFCFC;
			/*设置上下边框的属性*/
			border-top: #ff9900 3px solid

最低0.47元/天解锁文章

kkkk_1112

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型—3

一、CSS盒子模型概念：盒子模型四部分组成：内容、边框(border)、内边距(padding)、外边距（margin）内容：盒子里面的文字和图片等元素组成内容边框：指的是盒子的厚度内边距：盒子内容与边框之间的距离外边距：盒子与盒子之间的距离1、边框 border语法：border : border-width ||border-style ||border-color属性作用border-width定义边框粗细，单位pxborder-style边框的样
复制链接

扫一扫