一、网页布局本质

构建一个网页 ,

首先 , 创建盒子模型 , 设置盒子的大小和摆放位置 , 下图中红色矩形框就是盒子模型 ;
然后 , 将文本 , 图片 , 链接 , 表单等网页元素 , 按照一定的样式 , 填充进盒子中 , 就形成了我们看到的网页 ;

盒子中还可以嵌套若干盒子 ;

二、盒子模型

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>

展示效果 :

【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )相关推荐

html中的分离式布局,DIV+CSS技术在网页布局中的应用
摘要信息科学技术的进步使得互联网技术行业快速发展起来.其中网页设计作为互联网技术行业中重要的一部分,应用先进技术提高其工作效率与工作质量具有重要意义.DIV+CSS技术在网页布局中的优势作用使得其 ...
《Div+CSS 3.0网页布局案例精粹》扫描版[PDF]
电驴资源下面是用户共享的文件列表,安装电驴后,您可以点击这些文件名进行下载 [Div.CSS.3.0网页布局案例精粹].王大远.扫描版.rar详情 53.7MB 全选 53.7MB 下载地址(拷贝到 ...
html盒子页面居中,网页布局盒子(box)相关属性和盒子居中
网页布局中盒子的相关属性: 一.盒子的基础属性: 1.width和height:设置盒子的宽度和高度:常见单位:px,em,rem,vh/vm等 2.background:color(设置背景颜色), ...
CSS第二部分——网页布局三大核心
一.盒子模型 css盒子模型本质上是一个盒子,封装周围的html元素,它包括:边框.外边框.内边框和实际内容. 1.边框(border) 语法:border:border-width(定义边框粗细,单 ...
CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局一栏.两栏.三栏布局一栏布局特点:页面内容居中,宽度固定实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
60个高质量的CSS、XHTML网页布局模板下载
无论您下载和解剖预建模板是为了学习最新的CSS布局技术,或者下载的目的是为了易于编辑制作现成的独立网站,您都不应该仅限于免费且可用的一个拥有众多克隆版本.陈旧的且往往是枯燥的模板.网页设计的流行趋势和 ...
web前端入门到实战：css基础-定位+网页布局案例
position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...
php 验证码提交按钮样式,修改thinkphp验证码样式（颜色边框背景）
做网站,常常需要自定义一些自己喜欢的颜色背景样式,验证码也不例外. Thinkphp 默认验证码是白色调为主的.在比较暗色调的网站上非常的显眼不好看,于是我这里和大家说一下如何修改首先找到Thin ...

【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )

文章目录