关于html中元素和布局的笔记

一、元素类型
　　css标准文档流：默认的网页从左到右，从上到下的排列方式显示出网页效果

类型：
　　1.块级元素：（div,p,table……）
　　　　a.独占一行
　　　　b.可以设置宽度和高度
　　　　c.可以设置左右居中（整个块的位置），根据左右外边距进行设置（margin:auto/align:center）
　　2.行内元素：（a,span,label……）
　　　　a.默认排在一行，除非被挤下去
　　　　b.不能设置宽高（大小只由内容决定）
　　　　c.如果想实现左右居中，必须在其父类的块元素中设置text-align:center.
　　　　d.内边距有效果，但上下的paddding不会撑开外面的元素，不被父类div认可
　　　　e.margin左右有效果，上下无效果
　　3. 行内块元素：
　　　　a.默认排在一行（img……）
　　　　b.可以设置宽度和高度（可以设置标签，也可以只由内容决定）
　　　　c.居中参考行内元素的操作
　　　　d.padding和margin遵循盒子模型
　　4.他们之间的相互转换，通过属性display来实现
　　　　display：none（隐藏）block（设置为块元素）inline（设置为行内元素）inline-block（行内块元素）
二、布局：
　　1.浮动：float
　　　　代码>float:left（right）;
　　　　a.元素浮动后，会脱离（丢失）标准文档流，后面的元素会抢占他的位置
　　　　b.设置浮动的元素，不能覆盖前面也设置了浮动属性元素的上面，他们按照类似行内元素的形式排列在一行（不等同于行内元素的排列，例如br不能让他们换行）
　　　　c.浮动元素不会覆盖住非浮动元素的内容,但是当非浮动元素占据浮动元素原有位置后，为了内容不被遮盖，非浮动元素自身的行距会自动扩大，有可能出现设定的宽高所形成的盒子抢占了浮动元素的位　　　　　　　　置，也因此被浮动元素所覆盖了，而内容为了不被遮挡而留在浮动元素的外面
　　　　d.如果对当前元素设置clear:both;会导致其承认其他任意元素的非浮动性（但是在其他任意元素的视角中，浮动元素仍然为浮动元素），无论其本身是否浮动，都没有影响
　　2.定位：position
　　(偏移量：相对目标位置的移动距离，类似于坐标，可以通过：top，bottom，left，right进行偏移，进而移动元素的位置)
　　　　(1)相对定位(relative)
　　　　　　a.top：让原位置在移动后的位置上方，距离x的偏移量（其他也类似）
　　　　　　b.移动后，原位置不会被其他元素抢占，即不会丢失文档流
　　　　　　c.即使移动元素是浮动元素，仍然能够根据原位置进行移动（原位置即是该元素未移动前所在位子，原位置改变，移动后的元素位置也会改变）
　　　　　　d.目标是原位置（元素本身）
　　　　(2)绝对定位(absolute)
　　　　　　a.元素会脱离文档流
　　　　　　b.目标是设置了定位属性的父标签，如果父类没有，则继续向上找，直到body(body就算没有设置position，也可以成为定位目标)
　　　　　　c.top等移动属性，同样是相对距离（同相对定位中的a）
　　　　　　d.元素的层级升高，若与其他元素重叠，则会覆盖被重叠元素
　　　　(3)固定定位(fixed)
　　　　　　a.脱离文档流
　　　　　　b.目标是整个可视的网页窗口
　　　　　　c.top等移动属性，同样是相对距离（同相对定位中的a）
　　　　　　d.元素的层级升高，若与其他元素重叠，则会覆盖被重叠元素

巴特西

关于html中元素和布局的笔记

最新文章

热门文章