CSS 知识整理(四) 盒子模型及相关属性

CSS 知识整理(四)  盒子模型及相关属性

目录

CSS 知识整理(四)  盒子模型及相关属性

一、盒子模型

二、边框(Border)

三、轮廓(outline)

四、外边距(margin)和填充(padding)


一、盒子模型

在html中,每个标签都可以看做是一个盒子,通过调节这个盒子在网页中的位置,可以实现网页的布局以及美化网页,下面就是盒子模型的组成

 盒子模型分为:

  • Margin外边距:边框外的延伸的部分
  • Border边框:盒子的边框,可添加颜色和宽度
  • Padding内边距:边框到实际内容之间的部分
  • Content内容:显示具体的内容

一下代码实现了如何设置盒子模型基本元素的值:

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

此时盒子模型变为:

二、边框(Border)

边框属性允许我们对边框样式进行指定

  • 边框样式 border-style

允许定义边框样式:无边框,虚线边框,实线边框,双边框,3D边框

  • 边框宽度 border-width

可以直接使用像素值(px)进行设置,也可以使用程度副词(thick,medium,thin等)

  • 边框颜色 border-color

直接设置颜色,可以使用英文(red,yellow等)也可以使用RGB(#000000) ,

  • 边框分边设置

可以分别设置不同边的属性

注意区分各个值对应的边

border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted

 

三、轮廓(outline)

轮廓是外边框外围一层

可设置颜色,样式和宽度

四、外边距(margin)和填充(padding)

图如下:

可以分别天界上下左右的外边距和填充长度。

以上为笔记,具体实现参考菜鸟驿站,这里不重复。

 

 

 

 

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值