【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
2023-09-14 09:07:26 时间
一、网页布局本质
构建一个网页 ,
- 首先 , 创建盒子模型 , 设置盒子的大小和摆放位置 , 下图中红色矩形框就是盒子模型 ;
- 然后 , 将 文本 , 图片 , 链接 , 表单 等网页元素 , 按照一定的样式 , 填充进盒子中 , 就形成了我们看到的网页 ;
盒子 中 还可以嵌套 若干盒子 ;
二、盒子模型
HTML 的 一个布局 可以看做一个 矩形的 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 的容器 ;
盒子模型 组成 : 由内到外顺序如下 :
- 内容 Content : 下图中 内容为 100 x 100 像素的元素 ;
- 内边距 Padding : 内边距 Padding 位于 边框 与 内容 之间 ;
- 边框 Border : 边框 包裹 内边距 , 在 外边距 与 内边距 之间 , 边框 1 像素 ;
- 外边距 Margin : 最外层 元素 , 与其它盒子的距离 ;
三、盒子边框 Border
1、CSS 2.0 文档查询
在 CSS 2.0 手册中 , 搜索 border , 可以查询到 盒子边框 相关的文档 ,
文档中可以查询到边框的详细细节 :
2、边框设置语法
边框设置语法 :
- 设置边框宽度 : border-width 属性值为 像素值 ;
border-width: 10px;
- 设置边框样式 : border-style 属性值 设置边框样式 , 可设置的值由如下选择 :
- none : 默认选项 , 忽略边框宽度 ;
- solid : 设置 实线边框 ;
- dashed : 设置 虚线边框 ;
- dotted : 设置 点线边框 ;
border-style: solid;
- 设置边框颜色 :
border-color: red;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
div {
width: 200px;
height: 200px;
/* 边框宽度 4px */
border-width: 4px;
/* 边框样式 */
/* 边框样式-实线 */
/*border-style: solid;*/
/* 边框样式-虚线 */
/*border-style: dashed;*/
/* 边框样式-点线 */
border-style: dotted;
/* 边框颜色 */
border-color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="https://blog.csdn.net/" class="blog">博客</a>
<a href="https://download.csdn.net/">下载</a>
<a href="https://edu.csdn.net/">学习</a>
<a href="https://bbs.csdn.net/">社区</a>
</div>
</body>
</html>
效果展示 : 下图是 边框样式-点线 ;
边框样式-虚线 :
边框样式-实线 :
3、边框设置综合写法
盒子边框设置综合写法 : 在 border 属性 后设置 边框宽度 边框样式 边框颜色 三个值 , 使用空格隔开 , 这三个值没有顺序 ;
border : border-width border-style border-color
之前的边框需要写 3 行代码 , 设置 3 个属性 ,
/* 边框宽度 4px */
border-width: 4px;
/* 边框样式-点线 */
border-style: dotted;
/* 边框颜色 */
border-color: red;
边框设置综合写法 , 只需要写一行代码 , 即可替代上述 3 行代码 ;
/* 边框样式综合写法 */
border: 4px dotted red;
代码示例 : 在下面的代码中 , 使用一行综合写法 , 即可实现上个章节的边框样式内容 ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
div {
width: 200px;
height: 200px;
/* 边框宽度 4px */
/*border-width: 4px;*/
/* 边框样式 */
/* 边框样式-实线 */
/*border-style: solid;*/
/* 边框样式-虚线 */
/*border-style: dashed;*/
/* 边框样式-点线 */
/*border-style: dotted;*/
/* 边框颜色 */
/*border-color: red;*/
/* 边框设置综合写法 可替代上述三行代码 */
border: 4px dotted red;
}
</style>
</head>
<body>
<div class="nav">
<a href="https://blog.csdn.net/" class="blog">博客</a>
<a href="https://download.csdn.net/">下载</a>
<a href="https://edu.csdn.net/">学习</a>
<a href="https://bbs.csdn.net/">社区</a>
</div>
</body>
</html>
展示效果 :
相关文章
- html+css网页开发 之 头部导航条(logo、导航栏、搜索框)
- web前端设计与开发期末作品: 服装主题网页设计——女装下拉菜单带特效 (11页) HTML+CSS+JavaScript 网页设计期末作业个人主页…[通俗易懂]
- 开发那些事儿:如何解决js打包文件体积过大导致的网页加载慢问题?
- antd pro 网页title取不到问题解决
- 用Python提取网页中的超链接
- 【CSS教程】紫色渐变登陆布局html+css代码
- 【CSS教程】简约渐变色登陆布局html+css代码
- CSS 美化网页元素
- 【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- #grid:网页网格布局工具
- 数据库实现网页访问Oracle数据库的最佳方式(网页访问oracle)
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- 使用Redis提高网页浏览量(计算页面浏览量redis)
- 使用Redis让网页即时通讯无限可能(网页即时通讯redis)
- HTML结构化:实践DIV+CSS网页布局入门指南
- 用JavaScript获取网页中的js、css、Flash等文件
- CSS网页布局入门教程13:下拉及多级弹出式菜单
- css布局网页水平居中常用方法
- ASP获取网页全部图片地址并保存为数组的正则
- 幻灯片带网页设计中的20个奇妙应用示例小结
- Web网页对话框可拖动、关闭(自动)文字循环变化
- 网页计算器一个JS计算器
- js实现网页自动刷新可制作节日倒计时效果
- JavaScript实现防止网页被嵌入Frame框架的代码分享