html页⾯字段怎么排版,HTML排版(⽰例代码)
HTML排版总结
浏览器使⽤流在页⾯中放置元素。
块元素从上向下流 , 各元素之间有⼀ 个换⾏。 默认的,每个块元素会占浏览器窗⼝的整个宽度。 内联元素在块元素内部从左上⽅流向右下⽅。 如果需要多⾏ , 浏览器会换⾏ , 在垂直⽅向上扩展外围块元素 , 来包含这些内联元素。
正常页⾯流中两个块元素上下相邻的外边距会折叠为最⼤外边距的⼤⼩,或者如果两个外边距的⼤⼩相同,则会折叠成⼀个外边距。
浮动元素会从正常流中取出 ,浮动到左边或右边。浮动元素放在块元素之上,不会影响正常的页⾯流。不过 , 内联内容会考虑浮动元素的边界 ,围绕着这个浮动元素。
clear属性⽤来指定 ⼀ 个块元素左边或右边 (或者左右两边)不能有浮动元素。设置了clear属性的块元素会下移 ,直到它旁边没有块元素。
浮动元素必须有特定的宽度,不能设置为auto。
流体布局是指,扩展浏览窗⼝时, 页⾯中的内容会扩展以适应页⾯.
冻结布局是指 , 其中内容的宽度是固定的, 不会随着浏览器窗⼝扩展或收缩.这有⼀ 个好处 , 可以对设计提供更多控制 , 不过也要付出代价 , 这样就不能有效地使⽤浏览器宽度了。
凝胶布局是指 , 其中内容宽度是固定的, 但是外边距会随着浏览器窗⼝扩展或收缩. 凝胶布局通常’会把内容放在中央。这与冻结布局有同样的好处,不过通常更美观。
css布局左边固定右边自适应position属性可以设望为4个值:static(静态的,这是默认属性),absolute(绝对的),fixed(固定)和(relative)(相对的)
静态定位是默认⽅式 , 将元素放在页⾯的正常流中。
绝对定位允许将元素放在页⾯上的任何位置.默认地 绝对定位元素会相对于页⾯边界来放置.
如果⼀个绝对定位元素嵌套在另⼀个定位元素中,这个元素就会相对于外包含元素定位.
使⽤绝对、固定和相对定位时 , 属性top 、right,bottom和left。来指定元素的位置。
.
绝对定位元素可以使⽤z-index属性分层放置 , 使⼀个元素在另⼀ 个元素上⾯。z-index值越⼤ , 说明层层次越⾼(在屏幕上离你越近)。
固定定位元索总是相对于浏览器窗⼝定位 , 页⾯滚动时 , 固定定位的元素不会移动。页⾯中的其他内容会在这些固定定位元素下⾯正常滚动。
相对定位元素⾸先正常流⼊页⾯ , 然后按指定的位移量偏移 , 从⽽留出它们原先所在的空间。
使⽤相对定位,left 、right, top和bottom是指距正常流中该元素位置的偏移量。
css表格显⽰允许按⼀种表格布局来摆放元素.
要创建css表格显⽰,需要使⽤对应表格的⼀个块元素,对应⾏的块元素,以及对应单元格的块元素。通常,这些块元素都是<div>元素。
如果需要建⽴多栏布局,⽽且内容栏是均匀的,表格显⽰就是⼀个很好的布局策略。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论