day03

day03

一、元素转换

1.html里面的元素分为三类：行元素  块元素  行内快元素
2.块元素不根据内容来进行填充 独占一行 如：div  p
3.行元素：根据内容来进行填充，不独占一行，如：span
4.行内块元素：既有行元素的特征也有块元素的特征，不是独占一行，但是可以设置其高度和宽度 如：img textarea

三种元素的转换：

1.display: block		转换为块元素
2.display: inline;     转换为行元素
3.display: inline-block;  转换为行内块元素
4.display: none;       隐藏元素

二、盒子模型：

1.盒子模型：内容 content +内边距padding+边框 border+外边距+margin 网页中的盒子模型
2. 图形：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IQceC1b3-1647522758508)(C:/Users/%E6%82%B2%E9%99%8C/AppData/Roaming/Typora/typora-user-images/image-20220317205343542.png)]

注意点：

两个盒子模型在并排显示的时候，都设置了margin值的时候，取得是最大的一个

两个盒子列排的时候是取两个盒子的margin值之和

嵌套盒子模型：

l两个盒子进行嵌套的时候，给小盒子设置margin值时候，

问题：父盒子会随着子盒子进行移动 父容器塌陷问题

解决方法：在父盒子中设置：overflow：hidden，

三、、浮动

注意点：

1.浮动的元素在遇见其他的元素后，会停止元素的浮动
2.浮动的元素会对不浮动的元素有影响，清除浮动：clear left

四、定位

1.position: fixed;   固定定位(相对于浏览器定位)
2.position: relative;  相对定位(相对于自身进行定位)
3.position: absolute;   绝对定位(相对于父容器来进行定位)
4.4.position: static;   默认 没有定位

绝对定位(相对于父容器来进行定位)
4.4.position: static; 默认 没有定位