【温故知新】CSS学习笔记（盒子边框介绍）

CSS盒子边框

CSS中其实就三个大模块：盒子模型、浮动、定位。

其中所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个装内容的容器，每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）构成。

看透网页的本质：把网页元素比如文字或者图片，放入盒子里面，然后利用CSS摆放盒子的过程，就叫做网页的布局。

其实CSS确实没有太多的逻辑可言，就好比下图中的例子，是不是就类似我们小时候玩的积木，可以自由随意的进行摆放，实现我们想要的效果。

盒子模型（Box Model）分为以下三个部分：

盒子边框（border）
内边距（padding）
外边距（margin）

这一节我们主要介绍盒子边框（border）。边框就好比外面的一层皮。

具体语法：

Border : border-width / border-style / border-color

1、border-width：边框的粗细（单位px）

2、border-color：边框的颜色

3、border-style：边框的样式（常用的如下）

none：无边框（默认）
hidden：隐藏边框
dotted：点线边框
dashed：虚线边框
solid：实线边框（重点）

【实例】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子边框介绍</title>
	<style>
		div {
			width: 200px;
			height: 200px;

			border-width: 2px;
			border-color: deeppink;
			border-style: solid;

			/*border-style: dashed;*/
			/*border-style: dotted;*/

			/*border: 2px solid deeppink; /*边框连写格式*/*/
		}
	</style>
</head>
<body>
	<div>钓鱼岛是中国的！</div>
</body>
</html>

当然一条一条属性分开来写略显麻烦，这里也提供了连写的方式。

边框连写语法：

border: 2px solid deeppink;

其实盒子的边框四条线可以拆分开来显示，分为上、下、左、右：

上边框：border-top
下边框：border-bottom
左边框：border-left
右边框：border-right

去掉所有边框写法：border:0;

【实例】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子边框练习</title>
	<style>
		input {
			border: 0; /*去掉所有边框*/
			border-bottom: 1px dashed deeppink;
		}
		button {
			width: 50px;
			height: 30px;
			border: 1px solid blue;
		}
	</style>
</head>
<body>
	账户：<input type="text">
	<br> <br> <br>
	<button>提交</button>
</body>
</html>

盒子边框的扩展学习

之前在HTML的学习中我们接触过对表格边框的粗细进行设置，但是在CSS这里只需要一句话就可以搞定了。

我们给table和td属性加上这么一句是不是就可以了“border: 1px solid red;”，话糙理不糙，但是细心的朋友会发现这边框咋比正常的略微粗了一点，这是因为单元格与单元格之间设置了无缝隙，那么两个边框就紧挨在了一起，当然会比一般的边框看上去粗一点，这个时候就

用到下面这种写法：

Border-collapse：collapse；表示边框合并在一起（相邻边框合并）

【实例】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格细线边框</title>
	<style>
		table {
			width: 450px;
			height: 300px;
			border: 1px solid red; 
		}
		td {
			border: 1px solid red;
			text-align: center; /*内容居中对齐*/
		}
		table,td {
			border-collapse: collapse; /*相邻边框合并*/
		}
	</style>
</head>
<body>
	<table cellpadding="0" cellspacing="0">
		<tr>
			<td>京东京东我最强</td>
			<td>京东京东我最强</td>
			<td>京东京东我最强</td>
		</tr>
		<tr>
			<td>淘宝淘宝我最棒</td>
			<td>淘宝淘宝我最棒</td>
			<td>淘宝淘宝我最棒</td>
		</tr>
		<tr>
			<td>最牛还是拼多多</td>
			<td>最牛还是拼多多</td>
			<td>最牛还是拼多多</td>
		</tr>
	</table>
</body>
</html>

Tip：Sublime注释快捷键“CTRL+/”

【温故知新】CSS学习笔记（盒子边框介绍）

CSS盒子边框

猜你喜欢