CSS盒子简介及边框

最新推荐文章于 2024-03-07 19:45:00 发布

syyy9090

最新推荐文章于 2024-03-07 19:45:00 发布

阅读量152

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/syyy9090/article/details/105104494

版权

CSS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

页面布局要学习三大核心：盒子模型，浮动和定位。

网页布局过程：

1.先准备好相关的网页元素，网页元素基本都是盒子box
2.利用css设置好盒子样式，然后摆放到相应位置。（核心）
3.往盒子里面装内容

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框、外边距、内边距、和实际内容。

padding是边框和内容之间的距离

margin是盒子与其他盒子之间的距离

边框

border-style：solid（实线边框）dashed（虚线边框）dotted（点线边框）；

边框的简写：

border：1px solid red；没有顺序

边框分开写：

border-top：1px solid red；//只设定上边框，其余同理

（先写border-top在写border则不)

边框会影响盒子实际大小

因此有两种方案解决：

1.测量盒子大小的时候，不量边框。
2.如果测量盒子的时候包含了边框，则需要width/height减去边框宽度。

联系代码如下：表格

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子边框</title>
	<style>
		div{
			width: 300px;
			height: 200px;
			border-width: 5px;  /*边框粗细*/
			border-color: pink;
			border-style: solid;
		}
		table {
			width: 500px;
			height: 250px;
		}
		th {
			height: 35px;
		}
		table,
		th,
		td {
			/*border-width: 0.5px;
			border-color: pink;
			border-style: solid;*/
			border: 1px solid pink;  /*复合写法*/
			border-collapse: collapse;  /*相邻边框合并在一起*/
			text-align: center;
			font-size: 14px;

		}
	</style>
</head>
<body>
	<div></div>
	<br>
	<br>
	<table align="center" cellspacing="0">
		<tr>
			<th>排名</th>
			<th>关键词</th>
			<th>趋势</th>
			<th>进入搜索</th>
			<th>最近7天</th>
			<th>相关链接</th>
		</tr>
		<tr>
			<td>1</td>
			<td>西游记</td>
			<td>西游记</td>
			<td>西游记</td>
			<td>西游记</td>
			<td>西游记</td>
		</tr>
		<tr>
			<td>2</td>
			<td>西游记</td>
			<td>西游记</td>
			<td>西游记</td>
			<td>西游记</td>
			<td>西游记</td>
		</tr>
		<tr>
			<td>3</td>
			<td>西游记</td>
			<td>西游记</td>
			<td>西游记</td>
			<td>西游记</td>
			<td>西游记</td>
		</tr>
		<tr>
			<td>4</td>
			<td>西游记</td>
			<td>西游记</td>
			<td>西游记</td>
			<td>西游记</td>
			<td>西游记</td>
		</tr>
	</table>
</body>
</html>

syyy9090

关注

0
点赞
踩
0

收藏

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

页面布局要学习三大核心：盒子模型，浮动和定位。网页布局过程：1.先准备好相关的网页元素，网页元素基本都是盒子box 2.利用css设置好盒子样式，然后摆放到相应位置。（核心） 3.往盒子里面装内容CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框、外边距、内边距、和实际内容。padding是边框和内容之间的距离margin是盒子与其他盒子之间的距离...
复制链接

扫一扫