DIVCSS 第四章 CSS 边框border与边界padding和margin_网站教程_教程吧

fdcyf

注册会员2020-04-21 17:57:42

DIVCSS 第四章 CSS 边框border与边界padding和margin

x今天的DIV+CSS基础内容：1、CSS 中边框border的使用，2、CSS 中边界padding和margin的使用。这2个基本在写CSS的时候都会用到，而且IE6的兼容性问题也大部分时候都是这2个因素导致。

一、CSS 中边框border的使用

属性名称	属性值	说明
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;

复制代码

二、CSS 中边界padding和margin的使用

padding属性名称	属性值	说明
padding-bottom	长度/百分比	元件下端边线的空隙
padding-left	长度/百分比	元件左端边线的空隙
padding-right	长度/百分比	元件右端边线的空隙
padding-top	长度/百分比	元件上端边线的空隙

简易写法：

padding:10px;
padding:2px 4px;
padding:2px 6px 10px;
padding:1px 2px 3px 4px;

复制代码

属性名称	属性值	说明
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;

复制代码

模板中常用的居中：

margin:0 auto;

复制代码

很多同学都想做模板，但htm和CSS都会的不多，可以看看我们htm和CSS的知识，做Discuz模板的时候才会得心应手，坚持学习，相信一定会成功。

本贴采集于网上

"收藏是宝，翻阅是金"

加入收藏

本站文章如没有特殊说明，均采集网上收集，若要转载请务必注明出处，尊重他人劳动成果共创和谐网络环境。声明：某些文章来源于网络，所采集的到信息本站只为传递信息和分享，不做任何双方证明，也不承担任何法律责任。文章内容若侵犯你的权益，请联系本站客服删除！本文地址:https://2jc.cn/article/course/540.html

CSS样式 CSS教程模板制作模板基础 htm代码

16点赞

人阅读