HTML5前端开发入门之CSS边框属性及内外边距属性

边框属性

1.什么是边框？

边框就是环绕在标签宽度和高度周围的线条

 

2.边框属性的格式

2.1连写（同时设置四条边的边框）

border: 边框的宽度 边框的样式 边框的颜色;

 

快捷键：

bd+ 按下 tab  ==  border: 1px solid #000;

 

注意点：

1.连写格式中，颜色属性可以省略，省略之后默认就是黑色

2.连写格式中样式不能省略，省略以后就看不到边框了

3.连写格式中宽度可以省略，省略以后还是可以看到边框

 

 

2.2连写（分置四条边的边框）

border-top:边框的宽度 边框的样式 边框的颜色;

border-right:边框的宽度 边框的样式 边框的颜色;

border-bottom:边框的宽度 边框的样式 边框的颜色;

border-left:边框的宽度 边框的样式 边框的颜色;

 

2.3连写（分别设置四条边的边框）

border-width: 上 右 下 左;

border-style: 上 右 下 左;

border-color: 上 右 下 左;

 

注意点：

1.这三个属性的取值是按照顺时针来赋值，也就是按照上右下左来赋值，而不是按照日常生活中的上下左右

2.这三个属性的取值省略时的规律

2.1上右下左>上右下 > 左边的取值和右边一样

2.2上右下左>上右   > 下边和上边一样，左边和右边一样

2.3上下左右>上     > 右下左和上边一样，即只写一个值其他的值都和这个值一样

 

3.非连写(一个一个的单独设置，企业开发中基本不使用)

  border-top-width: ;

  border-top-style: ;

  border-top-color: #000;

内边距和外边距属性

1.什么时内边距？

边框和内容之间的距离就是内边距

 

2.格式

2.1非连写

padding-top：;

padding-right：;

padding-bottom：;

padding-left：;

 

2.2连写

padding: 上 右 下 左;

省略规则和边框属性一致

 

注意点：

给标签设置内边距之后，标签占有的宽度和高度会发生变化

内边距也会有背景颜色

1.什么是外边距？

标签与标签之间的距离就是外边距

 

2.格式

2.1非连写

margin-top: ;

margin-right: ;

margin-bottom: ;

margin-left: ;

 

2.2连写

margin: 上 右 下 左;

省略规则和边框，内边距属性均相同

 

注意点：

外边距的那一部分是没有背景颜色的

在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的