HTML布局定位

html我总结了下定位方法大致有floaposition
1.floa浮动是让元素脱离了文档流,不占网页的位置,讲到了这儿我就不得不说下block元素和inline元素在文档流中的排列方式。
(1).block元素(块级元素)有自己特有的形式如:.block元素独占一行;多个block元素在一起的时候,每个元素都会独占一整行,当元素没有设置宽高的时候,block元素的宽高由内容决定,block元素明显的特点是可以设置width,right,margin,padding属性。
(2).inline元素(内联元素)不会独占一行,直到一行排列不下的时候才会换到下一行继续排列,无法设置元素的宽高,元素的宽高由内容的大小决定,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom对它没有任何的效果。
(3).我自己总结了下block元素(块级元素)大致有:div元素,form元素,table元素,p元素,pre元素,h1-h5元素,dl元素,ol元素,ul元素 …
inline元素(内联元素)有:span元素,a元素,label元素,input元素,select元素,textarea元素,img元素…
1.float浮动定位
1.浮动元素脱离了普通的文档流不占据页面空间的其他没有浮动的元素会自动上前部位
2.浮动元素会停靠在父级元素的左边或者右边,或者停靠在其他已经浮动的元素的边缘上
3.浮动元素只会在当前行内浮动
4.浮动元素依然位于父元素内
5.让多个元素在一行内显示
2.语法:float: left(左浮动) right(右浮动) none(默认,无浮动的效果)
3.清除浮动:
如果元素浮动起来之后,除了影响到自己的位置还会影响到后续的元素
在这样的情况下 不想被前面浮动元素影响的话 可以使用清除浮动来解决这个问题。
语法;
clear:

left:清除当前元素前面的元素左浮动带来的影响(只和自己相关,并不和前面的元素相关)
当前元素不会向前占位并且左边不允许有浮动元素。
right:
清除当前元素前面的元素右浮动带来的影响,当前元素不会向前占位并且右不允许有浮动元素。
both:
清除当前元素前面的元素左浮动和右浮动带来的影响,当前元素不会向前占位并且左右不允许有浮动元素。
浮动引发的特殊效果:
1.父级元素的宽度不够的时候,浮动的子元素会的最后一个会被自动换行
2.元素一旦浮动起来之后,那么宽度将变成自适应(非人为指定的情况下)
3.元素一旦浮动起来后,那么将变成块级元素尤其对行内元素影响最大
4.文本元素和行内元素,行内块元素会采用环绕方式排列,是不会被浮动元素压在底下的胡巧妙的避开浮动元素。
浮动元素对父元素带来的影响
由于浮动元素脱离了文档流所以导致不占据父元素页面空间
解决问题:
1.直接给父级元素设置高度
弊端:必须要知道父级准确的高度
2.设置父级元素的浮动
弊端:对后续的元素会有影响
3.设置父级元素overflow hidden或auto
弊端:如果子级溢出的话 会一起被隐藏
4.在父元素中追加一个空元素(子元素)并且设置他clear:both

position定位又分为:
1.relative 相对定位
元素会相对于原来的位置的左上角进行位置偏移相对定位是占有之前的位置空间的。
2.absolute 绝对定位
元素不会占有之前的位置(脱离了文档流),
绝对定位的元素相对于它最近的已有定位的父级及以上元素进行位置偏移,如果没有已经有定位的父级相对于最初的body进行位置偏移。
3.fixed 固定定位
将元素固定在页面的某个地方,不会随着滚动条变化而发生变化。
注意:
脱离了文档流
是随着页面的body标签的左顶点进行位置偏移的

position定位通过调left,top,right,bottom的距离来进行详细的位置定位。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章