第四讲 盒子模型和元素分类

本章内容

1.盒子模型

2.元素分类

第一节 盒子模型

整个网页中所有的元素，都是一个盒子，网页设计实质:CSS摆位置，填内容

1.1 盒子组成

组成部分	说明
border	边框 盒子
padding	内填充 泡沫
margin	外补丁，外填充
conten	内容

1.2 盒子大小

border:可以通过border设置上下左右，也可以通过border-left/right/top/bottom

padding: 40;/*上下左右*/
padding: 40px 20px;/*上下 左右*/
padding: 40px 20px 30px;/*上 左右  下*/
padding: 40px 20px 30px 30px ;/*上右  下左*/

box-sizing: content-box/border-box

1.3 盒子水平位置

对于水平方向的盒子，间距是两个盒子水平方向上margin 之和：margin-right+margin-left

对于垂直方向的盒子，垂直方向的间距是较大的margin，而不是垂直方向的两者之和

float:CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

float:none/left/right

overflow:在两个方向上设置元素溢出的所需行为，即当元素的内容太大而无法适应其块格式设置上下文时。

overflow:hidden/scroll/auto

z-index:Z轴所处的位置 值越大越靠近屏幕

第二节 元素分类

从有无语义上:

​ 语义标签:标签有一定的语义：a,p,ul,ol,hr,br,h1

​ 无语义标签:div,span,div+css实现页面布局

2.1 块状标签

​ 特点:独占一行，默认宽度100%,可以设置宽高，默认高度为0

2.2 行内标签

​ 特点:不能设置宽高，大小由内容决定，默认宽度0，高度0，不独占一行

2.3 转换

display:block(独占一行能设置宽高)/in-line(不能设置宽高 不独占一行)/inline-block(可以设置宽高 不独占一行)

浮动-float：left/right不再有独占一行特点——脱离文档流

​ 浮动塌陷：1. 子集元素全部浮动 2.父级元素没有设置高度

​ 解决方法：1.使用clear 2.建一个空的div style=“clear:both” 3.overflow 4.在CSS里父类中:

after{
    conten:"";
    display:block;
    clear:both;
}