【web前端(十一)】html_盒模型——边框

最新推荐文章于 2023-10-23 22:11:08 发布
最新推荐文章于 2023-10-23 22:11:08 发布
阅读量220 收藏
点赞数
分类专栏： Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LED_of_Java/article/details/98869625
版权

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>border(边框)</title>
		<style>
			/*只有一个属性，盒子是看不见的*/
			#abc{
				width: 300px;
				height: 300px;
				
				/*左边框样式*/
				/*border-left-width:3px;*/
				/*边框样式：线型*/
				/*border-left-style: double;*/
				/*border: 1px dotted #FF0000;*/
				
				
				/*右边框样式*/
				/*border-right-width:5px;*/
				/*边框样式：线型*/
				/*border-right-style: dotted;*/
				
				/*border: 1px dotted #FF0000;*/
				
				
				/**
				 * 顺序：上、右、下、左
				 * （四边框样式）
				 
				/*简化写法*/
				border-width: 1px 2px 6px 14px;
				border-color: #FF0000;
				border-style: dotted;
				
				
				/**
				 * 参数；border里只能设置三个参数。
				 */
				border:4px solid #8A2BE2;
				
				
				/**
				 * 圆角化边框
				 * /
				/*border-radius只对块有用，对表格没有作用。*/
				border-radius: 25px;
			}
			
			
			/*线边框是对表格进行设置的*/
			/**
			 * 外边框
			 */
			table{
				border:1px solid #8A2BE2;
				/*border-collapse: collapse，
				 * 作用是使两个像素合并成一个像素，
				 * 即使两个细边框合并成一个细边框*/
				border-collapse: collapse;
			}
			
			
			/**
			 * 内边框
			 */
			td{
				border: 1px solid #8A2BE2;
			}
		</style>
	</head>
	<body>
		<div id="abc">
			我的盒子
		</div>
		<table cellspacing="0" border="0">
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
		</table>
	</body>
</html>

 

_临渔_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端网页制作秘密武器之盒模型边框
算法与编程之美
04-23 411
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。1 引言盒模型是CSS的一种基础设计模式，定义了Web页...
html盒模型中border的写法,【前端】盒子模型的边框样式属性和应用技巧讲解
weixin_28693447的博客
06-03 4208
分割页面中不同的盒子，常常需要给元素设置边框效果。在CSS中边框属性包括边框样式属性(border-style)、边框宽度属性(border-width)、边框颜色属性(border-color)、单侧边框的属性、边框的综合属性，如表1所示。表1 CSS边框属性仅通过表1的简单解释，初学者可能很难理解边框属性的应用技巧，下面我们将详细讲解边框属性。1. 边框样式边框样式用于定义页面中边框的风格，在...
盒子模型(边框,内外边距 ,合并和塌陷问题) 圆角边框 , 阴影
weixin_45282543的博客
11-19 216
网页布局的核心本质： 就是利用 CSS 摆放盒子。 网页布局的三大技术：盒子模型，浮动，定位。 盒子模型 组成部分，从外到内：外边距、边框、内边距、内容 盒子的大小包括 ：边框、内边距、内容 边框（border）： border-style: sloid (实线) ； dashed (虚线) ； dotted (点线)； border:border-width ( 边框粗细 ) border-style ( 边框样式 ) border-color( 边框颜色)
HTML + CSS 连载 | 15 - 盒子模型的边框与圆角
最新发布
JingnanJia的博客
10-23 1094
四个属性的缩写，并且这四个属性的初始值都是 0，在开发中通常会使用这种缩写属性，并不会一个一个的去设置圆角。属性用于设置盒子的边框，盒子边框在 HTML 页面中的应用非常多。边框样式、边框颜色和边框的宽度的编写顺序任意即可，没有固定的要求。常见的值可以设置数值，通常用来设置小的圆角，比如 6px；边框的颜色也可以设置上右下左四个边，分别使用。边框的样式也可以设置上右下左四个边，分别使用。是上面四个属性的简写，值的对应情况与。是这四个属性的缩写属性，对应关系与。是这四个属性的缩写属性，对应关系与。
【web前端开发 | CSS】页面布局之盒子模型
小赵不忙的博客
10-23 1192
思维导图 所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容 1：边框 border：border-width | border-style | border-color； div { /* 实线 虚线 点线 */ border-style: solid;
期末前端web大作业——我的家乡陕西介绍网页制作源码
08-10
- **盒子模型**：盒子模型是CSS的一个核心概念，它涉及到边距(margin)、边框(border)、填充(padding)以及实际内容(content)四部分。在本作业中，通过设置合适的盒子模型参数，实现了页面元素的合理分布。 - **浮动...
Web-前端html+css从入门到精通 165. 伪元素概念与意义.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础。HTML负责结构化内容，而CSS则负责样式和布局。本教程将深入探讨一个重要的CSS概念——伪元素及其意义，这对于前端开发者来说是提升页面设计能力的关键。 伪元素是CSS...
web前端期末大作业 ——电影主题介绍 你好，李焕英 ——html+css+javascript网页设计实例
08-10
- **CSS盒模型**: 包括`padding`（内边距）、`border`（边框）和`margin`（外边距），这些属性可以用来控制元素的空间布局。例如，`<div class="nav">`中的列表项之间可以通过调整`margin`来增加间距。 - **响应式...
web前端网页制作课作业——用DIV+CSS技术设计的家乡旅游主题网站
08-10
其中，Div+CSS 的使用是重点之一，涉及到盒子模型的嵌套、浮动、边距（margin）、边框（border）、背景（background）等属性的应用。此外，还包括了 hover 效果、表格、表单等高级功能的实现。 - **特色功能**: 为了...
HTML+CSS制作简单的家乡网页 ——我的家乡介绍广东 web前端期末大作业
08-10
- **盒模型**: CSS盒模型是由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成的。例如，可以通过设置`margin`属性使外部大盒子居中显示。 - **浮动(float)**: 用于使元素向左或向右移动，使其...
【前端基础篇】盒子模型、边距、边框、外边距合并问题详解
前端知识分享喵
06-16 1483
盒子模型相关、外边距合并问题详解
前端学习之CSS——盒子模型
Jane_xxxxxy的博客
07-29 302
1、网页布局的本质 网页布局的核心本质： 就是利用 CSS 摆盒子。 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 利用 CSS 设置好盒子样式，然后摆放到相应位置。 往盒子里面装内容 2、盒子模型（Box Model）组成 盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容 3、边框（border） 3.1、边框的使用
html框模型（盒模型）
liuzhe的博客
04-29 1098
大家来抄笔记啦
Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
星辰迷上大海的博客
05-01 3405
今天分享的是Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
Web基础(从零开始)——CSS盒子模型详解（边框，圆角边框，内边距，导航栏，外边距，父元素塌陷问题，盒子阴影）
qq_57633498的博客
11-16 2329
1.边框（border）：边框有三部分组成边框宽度、边框样式、边框颜色 border-width(边框粗细):6px;|| border-style(边框样式):solid(实线边框) | dashed(虚线边框) |dotted(点线) ||border-color(边框颜色) 以上属性可以简写：border:1px solid red;（没有顺序） ...
HTML 学习笔记 CSS样式（框模型）
ddiv24492的博客
12-16 181
CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述 元素框的最内部分是实际的内容 直接包围内容的是内边距 内边距呈现了元素的背景 内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此 不会遮挡其后的任何元素。 提示：背景应用于由内容和内边距 边框组成的区域。 内边距 和 外边...
Python全栈 Web（边框、盒模型、背景）
ParisGabriel
09-04 382
原文地址 　　https://yq.aliyun.com/articles/634926 ............................................................................................................
HTML----盒子模型
xry12354的博客
04-08 2954
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
html盒子模型，内容区（content）、 内边距（padding）、边框（border）、外边距（margin）及行与块级元素的转换
await_9的博客
07-11 1709
盒子模型由以几个部分组成 内容区（content）：存放内容 内边距（padding）：内容与边框的距离 边框（border）：盒子的边界 外边距（margin）：盒子与盒子之间的位置以下是边框的样式设置 内边距的设置 padding：上、右、下、左 外边距的设置margin：上、右、下、左 元素水平方向的布局 垂直方向布局...
Web前端开发：CSS布局模型与盒模型解析
本教程主要关注Web前端开发中的核心技术——Div和CSS。Div（Division）常用于网页布局，而CSS（Cascading Style Sheets）则是用于控制网页元素样式和布局的重要工具。这些知识点对理解和构建响应式、标准化的网页至...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_临渔_

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值