16 ， CSS 边框与边界

Yi_Zhi_Yu 发布于2019-04-23 11:42 / 3394人阅读

摘要：宋体中边框的使用宋体中边界的使用宋体中边框的使用宋体属性名称宋体属性值宋体说明宋体十六进制可依序设置上，右，下，左线颜色宋体英文名称宋体四边均为红色宋体三原色宋体上下为红色，左右为绿色宋体上为红色左右为绿

1.CSS 中边框的使用

2.CSS 中边界的使用

16.1 CSS 中边框的使用

属性名称属性值说明

border-color 十六进制可依序设置上，右，下，左线颜色

英文名称 border-color:red(四边均为红色)

三原色 border-color:red green

(上下为红色，左右为绿色)

border-color:red green blue

(上为红色、左右为绿色、下为蓝色)

border-color:red green blue yellow

(上右下左分别为红绿蓝黄)

border-style none 不显示边线

dotted 点线

dashed 虚线

solid 实线

double 双线

border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;

border-width:1 2 3 4;

简化方案：border:形态长度颜色

例如 border:1px solid black;

16.2 CSS 中边界的使用

padding 属性介绍

属性名称属性值说明

padding-bottom 长度/百分比元件下端边线的空隙

padding-left 长度/百分比元件左端边线的空隙

padding-right 长度/百分比元件右端边线的空隙

padding-top 长度/百分比元件上端边线的空隙

简易写法：padding:10px

padding:2px 4px

padding:2px 6px 10px

padding:1px 2px 3px 4px

margin 系列属性介绍

属性名称属性值说明

margin-bottom auto 自动调整空隙

长度/百分比设置下端空隙

margin-left auto 自动调整空隙

长度/百分比设置左端空隙

margin-right auto 自动调整空隙

长度/百分比设置右端空隙

margin-top auto 自动调整空隙

长度/百分比设置上端空隙

简化方案：margin:2px 4px

margin:2px 6px 10px

margin:1px 2px 3px 4px

常用网页顶格设置：margin:0;

CSS 1CSS 中边框的使用

中边框的使用中边界的使用

padding 属性介绍

 CSS 中边界的使用
padding 属性介绍
		属性名称 属性值 说明
		padding-bottom 长度/百分比 元件下端边线的空隙
		padding-left 长度/百分比 元件左端边线的空隙
		padding-right 长度/百分比 元件右端边线的空隙
		padding-top 长度/百分比 元件上端边线的空隙
		简易写法：padding:10px
		padding:2px 4px
		padding:2px 6px 10px
		padding:1px 2px 3px 4px
margin 系列属性介绍
		属性名称 属性值 说明
		margin-bottom auto 自动调整空隙
		长度/百分比 设置下端空隙
		margin-left auto 自动调整空隙
		长度/百分比 设置左端空隙
		margin-right auto 自动调整空隙
		长度/百分比 设置右端空隙
		margin-top auto 自动调整空隙
		长度/百分比 设置上端空隙
		简化方案：margin:2px 4px
		margin:2px 6px 10px
		margin:1px 2px 3px 4px
常用网页顶格设置：margin:0;

云服务器 GPU云服务器 html5与边框间距 css与html html与css div与css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1044.html

CSS入门指南-2：盒子模型、浮动和清除

摘要：会在元素内容而不是元素后插入一个伪元素使用意味着中新增的子元素会被清除左右浮动元素。这一篇主要介绍了盒子模型，浮动和清除。这是CSS设计指南的读书笔记，用于加深学习效果。上一篇介绍了css 的工作原理，这一篇主要介绍盒子模型和浮动。盒子模型所谓盒子模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。可见的页面版式主要由三个属性...

ConardLi 2019-08-29 12:59 评论0 收藏0
CSS入门指南-2：盒子模型、浮动和清除

摘要：会在元素内容而不是元素后插入一个伪元素使用意味着中新增的子元素会被清除左右浮动元素。这一篇主要介绍了盒子模型，浮动和清除。这是CSS设计指南的读书笔记，用于加深学习效果。上一篇介绍了css 的工作原理，这一篇主要介绍盒子模型和浮动。盒子模型所谓盒子模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。可见的页面版式主要由三个属性...

charles_paul 2019-08-01 17:13 评论0 收藏0
CSS学习摘要-盒子模型

摘要：你也可以单独设置某一个边的三个不同属性，如，等。属性设置与元素相关联的盒子模型的左外边距。首先是我们的代码然后是代码上述代码产生以下结果轮廓轮廓最后，还有重要的一点，一个框的是一个看起来像是边界但又不属于框模型的东西。注：全文摘要自网络开发者网站，当然间隔也会整理一些思路和格式排版添加进去。 CSS框模型（译者注：也被称为盒模型）是网页布局的基础 ——每个元素被表示为一个矩形的方框，框的内容...

keithxiaoy 2019-04-23 13:40 评论0 收藏0
CSS入门指南-4：页面布局

摘要：属性是中最重要的用于控制布局的属性。布局的高度多数情况下，布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...

ethernet 2019-08-02 15:57 评论0 收藏0
CSS入门指南-4：页面布局

摘要：属性是中最重要的用于控制布局的属性。布局的高度多数情况下，布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...

Stardustsky 2019-08-29 13:08 评论0 收藏0