kissxq

注册会员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-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.2jc.cn/article/course/540.html
人阅读

发表评论

加载中~
嘿,我来帮您!

VIP · 会员全站通免费下载

1,全站任意主题资源免费下载

2,专属客服一对一服务

3,积分规则:点击查看