day 7

CSS盒模型

盒模型又叫框模型，是CSS的重要布局属性，分别是width（属性），height（高度），padding（内边距），border（边框），margin（外边距）

盒子的实际加载区域：width + height

盒子可以使用实体化显示区域：width + height + padding + border

盒子实际占位区域：width + height + padding + border + margin

 

 

 

鼠标右键选择检查：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

通过盒模型我们能了解盒子的占位情况

 

宽度（width）和高度（height）

作用：设置加载内容的区域

宽度：width

高度：height

属性值：
以px为单位的数字表示法：数值是多少表示宽度活着高度为多少像素

 

 

 

百分比表示法：

 

 

 

Attention：

如果盒子不设置宽度，会默认撑满父标签的宽度。

如果盒子不设置高度，则会默认被内容撑高。

 

 

内边距（padding）

作用：设置宽和高到边框的间距

特点：不能加载内容，可以加载背景（颜色）

属性名：padding

属性值：以px为单位的数值

padding属性是一个综合属性，可以根据不同方向进行单一属性设置

 

 

 

如果写成padding：10px 20px 30px 40px；

则按照上右下左来进行内边距的加载

 

 

 

 

简称四值法

 

三值法：三个值分别代表上，左右，下

padding：10px 20px 10px；

 

 

 

 

 

二值法：两个值分别表示上下，左右。

padding：10px 20px；

 

 

 

较为常用的是单值法和双值法

 

 

边框（border）

作用：设置盒子的边框（显示边缘）

属性名：border

border属性值有三个值，border是一个综合属性

 

 

 

按照border的属性类别划分三个属性值分别代表：边框宽度：border-width、线型：border-style、线的颜色：border-color

边框宽度：border-width：

 

 

 

 

 

 

 

线型：border-style

属性值：类型padding，也有四值法

 

 

 

Border-style的种类：

solid：实线

dashed：虚线

dotted：点线

double:双线

groove：边框凹陷效果

rideg：边框凸显效果

inset：内容凹陷效果

outset：内容凸显效果

 

border-color：边框颜色

属性值：border-color

类似padding，也有四值法

 

 

 

 

无论是线型还是线的厚度还是线的颜色，都可以单一设置某一个方向

比如需要设置右侧边框颜色为紫色

border-right-color:purple；

先是方向然后是类型

 

外边距（margin）

作用：设置盒子与其他盒子之间的间距

属性名：margin

属性值：完全类似于padding，包括单一写法和复杂写法

四值法：

 

 

 

 

二值法：

 

 

 

 

 

盒模型小练习（get）

 

 

 

清除默认样式

很多标签都有自己的默认样式，这些默认样式是开发中不需要的，比如h系列标签的字号加粗，比如p标签的默认边距，比如ul li默认的小圆点

清除ul，li标签的小圆点：
ul,li{

list-style:none;

}

清除默认样式：

 

网站除了清除默认样式外，还需要对部分标签或者整体文本进行初始设置

 

 

 

 

 

height属性的拓展

一个盒子必须有高度，否则看不到内容样式，高度可以有多个配置内容，比如超出部分，如何显示？

如果盒子没有设置高度，则被内容撑高，如果设置了高度，内部高度大于盒子本身的高度，不会被隐藏，会自动超出盒子内容显示。

 

 

 

 

 

 

关于高度超出部分，是有属性可配置的，overflow，其作用指的是超出盒子部分怎么显示

属性值：visible，可见的，默认的

 

 

 

属性值hidden:作用是超出盒子部分隐藏

 

 

 

属性值scroll：作用是盒子（页面）增加滚动条（无论文字内容是否超出了盒子，都加滚动条）

 

 

 

属性值auto：作用是盒子内容超出部分滚动条显示

 

 

 

 

还可以通过设置高度属性为auto，如果希望盒子自动被内容撑开，可以设置auto值。

即：height：auto；

 

 

居中

关于居中，主要有两种，一种是关于盒子的，一种是关于文字的。

水平居中：
使用text-align：center；

 

 

 

单行文字的垂直居中，设置line-height的高度和盒子一样高

 

 

 

Conclusion：如果需要单行文本水平垂直都居中，设置text-align：center，line-height：盒子高度

如果是多行文本设置垂直居中，不能使用行高等于盒子高

此时不设置高度，设置上下相同的padding

 

 

 

 

盒子也有居中的写法

盒子的水平居中：

 

 

 

方法：给目标元素设置margin：自定义值 auto；

 

 

 

盒子的垂直居中，和文字类似，父盒子不设置高度而设置上下padding

 

 

 

Conclusion：如果设置盒子上下左右都居中的状态，首先子盒子设置margin：0 auto；父盒子不设置高度，而设置上下padding。

 

 

 

工作中真正设置垂直居中使用的是定位，很少使用padding去挤掉高度

 

Css模型拓展：margin塌陷现象（通常指的是上下塌陷）

同方向的margin会有塌陷

在垂直方向上，如果想遇到margin，两个盒子之间不是属性值的和，而是比较两个盒子，谁的margin值大，使用margin值更大的高度。

同级盒子的塌陷：

 

 

 

 

 

 

父子元素也有margin塌陷的现象

 

 

 

 

 

 

父子盒子，如果子盒子设置了margin-top，父盒子没有设置或者margin-top的值小于了子盒子，此时会存在margin塌陷的现象。

 

如何解决margin塌陷的现象？

首先如果是兄弟关系，统一都设置一个方向margin，比如都设置margin-bottom

如果是父子盒子，可以给父盒子加border或者padding。其实这两种方法都不合理，因为正常情况下都不会使用子盒子去向上踹父盒子，而是使用父盒子加padding

 

 

标准文档流

开发网页更像是写word文档，因为我们开发网页有自己的书写规律，从上往下，从左往右，前面内容的变化会影响后面内容的位置

以上也是标准文档流的特性

HTML文件就是一种标准文档流的文件，也有自己的一些特性。