本文编辑:小秋同学

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

小秋同学 04-21 17:57:42 网站教程
摘要: x今天的DIV+CSS基础内容:1、CSS 中边框border的使用,2、CSS 中边界padding和margin的使用。这2个基本在写CSS的时候都会用到,而且IE6的兼容性问题也大部分时候都是这2个因素导致。一、CSS 中边框border的使用摘要: x今天的DIV+CSS基础内容:1、CSS 中边框border的使用,2、CSS 中边界padding和margin的使用。这2个基本在写CSS的时候都会用到,而且IE6的兼容性问题也大部分时候都是这2个因素导致。一、CSS 中边框border的使用

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-stylenone不显示边线

dotted点线

dashed虚线

solid实线

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


border-width:1 2 3 4;




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

  1. border:1px solid black;

复制代码

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

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



简易写法:

  1. padding:10px;

  2. padding:2px 4px;

  3. padding:2px 6px 10px;

  4. padding:1px 2px 3px 4px;

复制代码
属性名称属性值说明
margin-bottomauto自动调整空隙

长度/百分比设置下端空隙
margin-leftauto自动调整空隙

长度/百分比设置左端空隙
margin-rightauto  自动调整空隙

长度/百分比设置右端空隙
margin-topauto自动调整空隙

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



简化方案:

  1. margin:2px 4px

  2. margin:2px 6px 10px

  3. margin:1px 2px 3px 4px

复制代码

常用网页顶格设置:

  1. margin:0;

复制代码

模板中常用的居中:

  1. margin:0 auto;

复制代码



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


本贴采集于网上


文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/540.html发布于 04-21 17:57:42
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享
加入收藏

发表评论
加载中~