制作盒模型

文献种类:专题技术总结文献

开发工具与关键技术:   DW                            

作者:魏钦     ;年级:2003   ;撰写时间:2022   年 1 月  28

文献编号:                归档时间:   年   月   日

开发工具与关键技术: DW

作者:魏钦

撰写时间:2022/1/28

  1. CSS盒模型规定了元素处理元素内容(content)、内边距(padding)、边框(border)、外边距(margin)的方法。
  2. 在浏览器中检查时可以看到下面这张图,这张图是盒模型的模型图

 

  1. 内容(content):盒模型的内容,显示文本和图像。
  2. 内边距(padding):内容区与边框之间的部分,内边距是透明的。
  3. 外边距(margin):盒模型与邻元素的间距,外边距是透明的。
  4. 边框(border):盒模型的边框可以设置宽度,样式和颜色。
  5. 一个盒模型有4条边,因此与边框、内边距、外边距相关联的属性也各有4个,分别是:上(top)右(right)下(bottom)左(left)
  6. 边框相关属性:border-top(上边框) 、border-right(右边框)  

border-bottom(下边框) 、border-left(左边框)

  1. 内边距相关属性:padding-top(上内边距) 、 padding-right(右内边距)

padding-bottom(下内边距) 、padding-left(左内边距)

  1. 外边距相关属性:margin-top(上外边距) 、 margin -right(右外边距)

margin -bottom(下外边距) 、margin -left(左外边距)

  1. CSS为margin,border,padding分别规定了简写属性,通过一条声明就可完成设定。在每个声明中,属性值的顺序都是上右下左的顺序。
  2. 例如给某个元素设置上外边距3px、右外边距4px、下外边距5px、左外边距7px。

 

  1. 有些时候并不需要把他的三个字都写出,那边的值没写就会用他对边的值。

 

  1. 边框有3个相关的属性:宽度(border-width)、样式(border-style)、颜色(border-color)。
  2. 宽度(border-width):可以使用thin,medium,thick等文本值,也可以使用除百分比和负数之外的任何绝对值。
  3. 样式(border-style):有none(无边框),hidden(隐藏边框),dotted(点线边框),dashed(虚线边框),solid(实线边)
  4. 颜色(colo):可以使用任何的颜色值包括:十六进制,英文,rgb
  5. 边框样式用法:  

 

  1. 在CSS边框中除了前面三个相关样式意外还有3个新的样式属性分别为:圆角边框(border-radius)、边框阴影(border-shadow)、边框图片(border-image).

这是我所学到的盒模型的知识,所以我要分享给你们,希望可以帮助到你们。

以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值