CSS基础篇分享之二

一、盒子模型

CSS它把每一个HTML标签都当作为一个盒子！

盒子主要是用来存放东西！

在CSS中有两个非常有名的盒子：div大盒子 块元素代表   span小盒子 行内元素

盒子里面是还可以嵌套盒子！一般我们只是用大盒子进行嵌套  

 

一个盒子的组成部分有哪些？

我们可以假设一个快递包裹：

内容手机+填充物+纸盒子

CSS中的盒子由哪些部分来组成：内容(content)+填充物(padding)+边框(border)+外边距(margin)

width：“宽度”的意思，它指的盒子里面内容的宽度  而不是盒子的宽度

height：“高度”的意思，它指的盒子里面内容的高度  而不是盒子的高度

padding：“填充”的意思，它指的盒子里面的内容到盒子边框的距离  

border：“边框”的意思，它指的盒子的边框

margin：“外边距”的意思，它指盒子与另外的盒子的之间距离  

 

 

 

如何去计算一个盒子的总宽度：

总宽度=内容的宽度+左右两边的填充+左右两边的边框

 

如何去保证一个盒子总宽度不变！

需要让我们的盒子总宽度为200像素  里面的内容的宽度为150  左右两边的填充为24

 

我们把盒子里面的内容变宽了 同时就要去减少盒子左右内填充

填充增加了 就要去减少内容的宽度

二、padding

padding它是“内填充”的意思！

padding它是有方向的，它有四个方向  关于这个方向的我们可以用两种方式来表示

小属性：

padding-top：上内填充

padding-right：右内填充

padding-bottom：下内填充

padding-left：左内填充

 

简写属性

• padding 这个属性它可以同时的去表示四个方向 但是它表示的时候是有顺序的 它的顺序是顺时针方向 ：上、右、下、左
• padding：10px   表示上下左右四个方向的内填充都是10px
• padding：10px  20px;  表示上下为10  左右为20
• padding：10px 20px 30px;   表示上10 左右20 下30
• padding：10px 20px 30px 40px  表示上10  右20 下30 左40

 

 

HTML中有一些标签它是有默认的内填充和外边距 在写CSS代码时 第一件事情就是要将这些标签的内外边距 都清除   margin:0;padding:0;

三、margin

margin它是“外边距”的意思！

margin它是有方向的，它有四个方向  关于这个方向的我们可以用两种方式来表示

小属性：

margin-top：上外边距

margin-right：右外边距

margin-bottom：下外边距

margin-left：左外边距
简写属性

• margin 这个属性它可以同时的去表示四个方向 但是它表示的时候是有顺序的 它的顺序是顺时针方向 ：上、右、下、左
• margin：10px   表示上下左右四个方向的外边距都是10px
• margin：10px  20px;  表示上下为10  左右为20
• margin：10px 20px 30px;   表示上10 左右20 下30
• margin：10px 20px 30px 40px  表示上10  右20 下30 左40

 

四、margin的注意事项

1）margin有塌陷现象

在标准文档流的盒子，竖直方向的margin值它不会叠加，只会取较大的值

 

 

注意：

浮动的元素它是没有塌陷现象！

 

2）margin实现盒子居中的问题

margin-left和margin-right将这两个值同时设置为auto就可以实现盒子在一个容器内居中！auto表示“自动”的意思！

• 如果要想让一个盒子居中  那么一定给其设置一个固定的宽度   行内元素是没有办法可以使用margin这个属性来实现居中  因为它不能设置宽度
• margin中auto这个属性它只能实现让一个盒子在一个容器内居中  而不能让里面的文本水平居中
• 浮动元素是没有办法使用margin来居中

 

 

 

3）善于使用父元素的padding而不使用子元素的margin

 

margin这个属性它本质上面是用来描述兄弟盒子之间的关系  而不是用来描述父子盒子之间的关系  如果是遇到了父子盒子之间的关系 时  我们要给其父元素设置padding而不要给子元素设置margin!!

 

能用padding时尽量少用margin  因为margin它会合并

 

六、border

border它就是“边框”的意思

border这个属性它有三要素：粗细 线型 颜色

 

线型：

 

 

边框它也是有方向的

border-top：上边框线

border-right：右边框线

border-bottom：下边框线

border-left：左边框线

 

七、display属性

它是“显示”的意思

它可以将块状元素转换为行内元素 同时也可以将行内元素转换为块状元素  

取值：inline(将块状元素转换为行内元素)、block(将行内元素转换为块状元素 )

 

特点：

将行内元素转换为块状元素  这个元素就会拥有块状元素的所有特点

将块状元素转换为行内元素  这个元素就会拥有行内元素的所有特点

 

 

转载于:https://www.cnblogs.com/SummerSuSu/p/6099534.html