2.边框属性的格式 2.1连写(同时设置四条边的边框) border: 边框的宽度 边框的样式 边框的颜色;
快捷键: bd+ border: 1px solid #000;
注意点: 1.连写格式中颜色属性可以省略, 省略之后默认就是黑色 2.连写格式中样式不能省略, 省略之后就看不到边框了 3.连写格式中宽度可以省略, 省略之后还是可以看到边框
2.2连写(分别设置四条边的边框) border-top: 边框的宽度 边框的样式 边框的颜色; border-right: 边框的宽度 边框的样式 边框的颜色; border-bottom: 边框的宽度 边框的样式 边框的颜色; border-left: 边框的宽度 边框的样式 边框的颜色;
快捷键: bt+ border-top: 1px solid #000; br+ bb+ bl+
2.3连写(分别设置四条边的边框) border-width: 上 右 下 左; border-style: 上 右 下 左; border-color: 上 右 下 左;
注意点: 1.这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右 2.这三个属性的取值省略时的规律 2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样 2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样 2.3上 右 下 左 > 上 > 右下左边取值和上边一样
3.非连写(方向+要素) border-left-width: 20px; border-left-style: double; border-left-color: pink;
内边距属性 1.什么是内边距? 边框和内容之间的距离就是内边距2.格式 2.1非连写 padding-top: ; padding-right: ; padding-bottom: ; padding-left: ;
2.2连写 padding: 上 右 下 左;
2.这三个属性的取值省略时的规律 2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样 2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样 2.3上 右 下 左 > 上 > 右下左边取值和上边一样
注意点: 1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化 2.给标签设置内边距之后, 内边距也会有背景颜色
外边距属性 1.什么是外边距? 标签和标签之间的距离就是外边距2.格式 2.1非连写 margin-top: ; margin-right: ; margin-bottom: ; margin-left: ;
2.2连写 margin: 上 右 下 左;
2.这三个属性的取值省略时的规律 2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样 2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样 2.3上 右 下 左 > 上 > 右下左边取值和上边一样
注意点: 外边距的那一部分是没有背景颜色的
外边距合并现象 在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
