盒子模式之边框属性

一、边框属性

  1. 什么是边框?
  • 边框就是环绕在标签宽度和高度周围的线条。
  1. 边框属性的格式
    1. 连写. 同时设置四条边的边框的属性。
  1. border:边框的宽度 边框的样式 边框的颜色;

1.2.快捷键:bd+

1.3. 注意点:
1.3.1 连写格式中颜色属性可以省略,省略之后默认就是黑色
1.3.2 连写格式中样式不能省略,省略之后就看不到边框了。
1.3.3 连写格式中,宽度可以省略,省略之后还是可以看到边框

    1. 连写 分别设置四条边的边框

border-top:边框的宽度 边框的样式 边框的颜色;
border-right:边框的宽度 边框的样式 边框的颜色;
border-left:边框的宽度 边框的样式 边框的颜色;
border-bottom:边框的宽度 边框的样式 边框的颜色;
快捷键:bt+ : border-top:1px solid #000:

二、边框属性下

  1. 连写 分别设置四条边的边框

border-width:上 右 下 左
border-style: 上 右 下 左
border-color:上 右 下 左

注意点:

这三个属性的取值是按照顺时针来赋值,也就是按照上右下左来赋值。
这三个属性的取值省略时的规律:
1.1 上 右 下 左(省略左) > 上 右 下>左边的取值和右边的一样
1.2 上 右 > 左边的取值和右边一样,下面的取值和上面的一样
1.3 上>右边,左边, 和下,和上边的一样。

  1. 不是连写(方向+要素)

可以分别写上右下左的属性。

三、什么是内边距

  1. 什么是内边距?
  • 边框和内容之间的距离就是内边距。
  1. 格式
    2.1 非连写

padding-top:
padding-right::
padding-bottom:
padding-left:

2.2 连写的方式:
padding: 上 右 下 左

  1. 注意点:

这三个属性的取值是按照顺时针来赋值,也就是按照上右下左来赋值。
这三个属性的取值省略时的规律:
1.1 上 右 下 左(省略左) > 上 右 下>左边的取值和右边的一样
1.2 上 右 > 左边的取值和右边一样,下面的取值和上面的一样
1.3 上>右边,左边, 和下,和上边的一样。
给标签设置内边距之后,标签占有的宽度和高度会发生变化。
内边距也会有背景颜色。

四、外边距

  1. 什么是外边距?
  • 标签和标签之间的距离就是外边距
  1. 格式
    2.1 非连写

margin-top:
margin-right;
margin-bottom:
margin-right:

2.2 连写

margin:上 右 下 左;

注意点:

这三个属性的取值是按照顺时针来赋值,也就是按照上右下左来赋值。
这三个属性的取值省略时的规律:
1.1 上 右 下 左(省略左) > 上 右 下>左边的取值和右边的一样
1.2 上 右 > 左边的取值和右边一样,下面的取值和上面的一样
1.3 上>右边,左边, 和下,和上边的一样。

注意点:

  • 外边距是没有背景颜色的。

五、外边距的合并现象

  1. 什么是外边距合并现象?
  • 在默认布局的垂直方向上,默认情况下外边距是不会叠加的,会出现合并现象,谁的外边距比较大,就听谁的。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,408评论 0 7
  • # 边框属性 # 内边距 # 外边距 # CSS盒子模型 # box-sizing #清空默认边距 #行高(lin...
    KsKison阅读 696评论 0 0
  • CSS精灵图 作用:CSS精灵图是一种图像合成技术,可以减少请求的次数,以及降低服务器处理压力。使用:需要配合背景...
    佩佩216阅读 863评论 0 0
  • 盒子模型 课时104 边框属性上(掌握) 课时105 边框属性下(掌握) 课时106 边框练习(理解) 课时107...
    夜莺之刃阅读 726评论 0 0
  • 从小到大,也没旅游过,上了大学趁着五一小长假出去看看,见见不一样的世界。 俗话说,来沈阳不看一宫两陵就等于没来沈阳...
    1_9阅读 136评论 0 0