咸鱼前端—CSS盒子模型

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45020839/article/details/95981540

盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
在这里插入图片描述
(图片来源网络,侵删。谢谢)

盒子边框(border)

盒子边框(border)

语法:

border : border-width || border-style || border-color 

在这里插入图片描述
边框属性—设置边框样式(border-style)

边框样式用于定义页面中边框的风格,常用属性值如下:

属性 说明
none 没有边框即忽略所有边框的宽度(默认值)
solid 边框为单实线(最为常用的)
dashed 边框为虚线
dotted 边框为点线
double 边框为双实线
圆角边框(CSS3)

语法格式:

border-radius: 左上角  右上角  右下角  左下角; |  border-radius: 全体;

在这里插入图片描述

内边距(padding)

padding属性用于设置内边距。 是指 边框与内容之间的距离。

属性 说明
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

注意: 后面跟几个数值表示的意思是不一样的。

值的个数 表达意思
1个值 padding 上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值 padding 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值 padding 上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值 padding 上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针
外边距(margin)

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。

属性 说明
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 上外边距
margin:上外边距 右外边距  下外边距  左外边

取值顺序跟内边距相同。

盒子阴影

在这里插入图片描述

  1. 前两个属性是必须写的。其余的可以省略。
  2. 外阴影 (outset) 但是不能写 默认 想要内阴影 inset
    在这里插入图片描述
展开阅读全文

没有更多推荐了,返回首页