1:html中常见的有3种布局方式:
1:文档流布局(电脑默认的布局方式)
2:浮动布局
3:定位
文档流布局
电脑默认的从页面左上角到右下角的布局方式,各种元素属性都遵循其各自特点,
比如:行元素a标签,在这种布局方式中仍然遵循其元素特点,可以和其他行元素共
存一行,设置宽高没有意义,由内容撑开宽高.
浮动布局
常见的第二种布局方式,常用的赋值有left和right,浮动的元素脱离电脑默认的文档流.
浮动的特点:
1:脱离文档流 不占据原来的位置
2:被浮动的块元素可以共存一行!!
3:被浮动的元素有浮动的边界(其父元素的宽)
浮动的不良影响:浮动的元素会对后面的元素产生影响
1:当子标签设置为float时,父标签的高度不会被撑开(他俩在两层),所以需要设置父标签的高度
2:让浮动元素整体水平居中,可以考虑加一个父级标签,然后让父级标签水平居中
解决办法
当有浮动元素时,其父标签写overflow:hidden
其后写的标签写clear:both
(同一级的标签的布局方式最好一样)
定位
定位,界面布局的第三种常用布局方式.定位分为相对定位,绝对定位和固定定位.
1:相对定位(relative)
(1) 原来的文档流中的位置依然占据
(2)当元素需要微调(调整位置变化不大时),才会用相对定位
(3)一般不用于重叠效果
(4)不脱离文档流,不改变元素的行块属性
(5)相对于原来文档流中的位置进行定位
(6)一般通常用于辅助绝对定位的元素!!!
2:绝对定位(absolute)
(1) 脱离文档流(既不是行也不是块)
(2) 不占据原来的文档流中的位置
(3) 脱离的元素:可以设置宽高,可以和其他元素共存一行,内容撑开宽高
(4) 如果不进行设置,绝对定位的位置相对于页面左上角进行偏移
(5) 绝对定位的位置是一级一级的查找父级元素,直到找到relative的父级,开始进行定位
(6) 绝对定位通常用于界面中的重叠效果!!
3:固定定位(fixed)
(1)脱离文档流格式
(2)脱离文档流的元素非块非行,可以设置宽高,内容撑开宽高,共存一行
(3)相对于!!浏览器窗口!!进行定位
(4)通常用于固定导航或者广告!
