HTML入门学习笔记--CSS盒子模型(6)

42-边框属性

1.什么边框?

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

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;

45-内边距属性

1.什么是内边距?

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

2.格式

2.1非连写

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

2.2连写

padding: 上 右 下 左;

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

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

注意点:

1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化2.给标签设置内边距之后, 内边距也会有背景颜色

46-外边距属性

1.什么是外边距?

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

2.格式

2.1非连写

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

2.2连写

margin: 上 右 下 左;

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

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

注意点:
外边距的那一部分是没有背景颜色的

47-外边距合并现象

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

48-CSS盒子模型

1.什么是CSS盒子模型?

CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子

结论

1.在HTML中所有的标签都可以设置宽度/高度  == 指定可以存放内容的区域内边距  == 填充物边框  == 手机盒子自己外边距  == 盒子和盒子之间的间隙

49-盒子模型宽度和高度

1.内容的宽度和高度

就是通过width/height属性设置的宽度和高度

2.元素的宽度和高度

宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框高度 同理可证

3.元素空间的宽度和高度

宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距高度 同理可证

51-盒子box-sizing属性

1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变,和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度

3.box-sizing取值

3.1 content-box

元素的宽高 = 边框 + 内边距 + 内容宽高

3.2 border-box

元素的宽高 = width/height的宽高box-sizing: border-box;width: 200px;height: 200px;background-color: blue;float: right;border: 20px solid #000;padding: 20px;

53-盒子居中和内容居中

1.text-align:center;和margin:0 auto;区别

text-align: center;作用
设置盒子中存储的文字/图片水平居中

margin:0 auto;作用
让盒子自己水平居中