2. 科技
  3. （十一）布局与定位

（十一）布局与定位

it2022-05-26  75
浏览器使用流在页面中放置元素。块元素从上向下流，各元素之间有一个换行。默认的，每个块元素会占浏览器窗口的整个宽度。内联元素在块元素内部从左上方流向右下方。如果需要多行，浏览器会换行，在垂直方向上扩展外围块元素，来包含这些内联元素。正常页面流中两个块元素上下相邻的外边距会折叠为最大外边距的大小，或者如果两个外边距大小相同，会折叠为一个外边距。浮动元素会从正常流中取出，浮动到左边或右边。浮动元素放在块元素之上，不会影响正常的页面流。不过，内联内容会考虑浮动元素的边界，围绕着这个浮动元素。clear属性用来指定一个块元素左边或右边（或者左右两边）不能有浮动元素。设置了clear属性的块元素会下移，直到它旁边没有块元素。浮动元素必须有特定的宽度width，不能设置为auto。流体布局是指，扩展浏览器窗口时，页面中的内容会扩展以适应页面。冻结布局是指，其中内容的宽度是固定的，不会随着浏览器窗口扩展或收缩。这有一个好处，可以对设计提供更多控制，不过也要付出代价，这样就不能有效地使用浏览器宽度了。 <body> 　　<div id="allcontent"> 　　　　<div id="header"> 　　　　　　...... 　　　　</div> 　　　　...... 　　</div> </body> #allcontent { 　　width:800px; 　　padding-top:5px; 　　padding-bottom:5px; 　　background-color:#675c47; }

 

凝胶布局是指，其中内容的宽度是固定的，但是外边距会随着浏览器窗口扩展或收缩。凝胶布局通常会把内容放在中央，这与冻结布局有同样的好处，不过通常更美观。

　　　　

#allcontent { 　　width:800px; 　　padding-top:5px; 　　padding-bottom:5px; 　　background-color:#675c47; 　　margin-left:auto; 　　margin-right:auto; }

 

position属性可以设置为4个值：static（静态）、absolute（绝对）、fixed（固定）【将元素放在相对于浏览器窗口的一个位置上（而不是相对于页面）】和relative（相对）【会让元素正常地流入页面，不过在页面上显示之前要进行偏移，用于更高级的定位和特殊效果】。静态定位是默认方式，将元素放在页面给的正常流中。绝对定位允许将元素放在页面上的任何位置。默认地，绝对定位元素会相对于页面边界来放置。注意：流元素并不知道绝对定位元素的存在，所以流元素中的内联内容不会围绕绝对定位元素。如果一个绝对定位元素嵌套在另一个定位元素中，这个元素就会相对于外包含元素定位。使用绝对、固定和相对定位时，属性top、right、bottom和left可以用来指定元素的位置。 #sidebar { 　　position:absolute; 　　top:100px; 　　right:200px; 　　width:280px; } 绝对定位元素可以使用z-index属性分层放置，使一个元素在另一个元素上面。z-index值越大，说明它层次越高（在屏幕上离你越近）。固定定位元素总是相对于浏览器窗口定位，页面滚动时，固定定位的元素不会移动。页面中的其他内容会在这些固定定位元素下面正常滚动。相对定位元素首先正常流入页面，然后按指定的量偏移，从而留出它们原先所在的空间。使用相对定位时，left、right、top和bottom是指距正常流中该元素位置的偏移量。CSS表格显示允许按一种表格布局来摆放元素。要创建CSS表格显示，需要使用对应表格的一个块元素，对应行的块元素，以及对应单元格的块元素。通常，这些块元素都是<div>元素。如果需要建立多栏布局，而且内容栏是均匀的，表格显示就是一个很好的布局策略。

　　　

......header <div id="tableContainer"> 　　<div id="tableRow"> 　　　　<div id="main"> 　　　　...... 　　　　</div> 　　　　<div id="sidebar"> 　　　　... 　　　　<div> 　　</div> </div> ......footer body { 　　background-color:#b5a789; 　　font-family:Georgia,"Times New Roman",Times,serif; 　　font-size:small; 　　margin:0px; } #header { 　　background-color:#675c47; 　　margin:10px 10px 0px 10px; 　　height:108px; } #tableContainer { 　　display:table; 　　border-spacing:10px; } #tableRow { 　　display:table-row; } #main { 　　display:table-cell; 　　background:#efe5d0 url(images/xxx.gif) top left; 　　font-size:105%; 　　padding:15px; 　　vertical-align:top; } #sidebar { 　　display:table-cell; 　　background:#efe5d0 url(images/xxx.gif) bottom right; 　　font-size:105% 　　padding:15px; 　　vertical-align:top; } #footer { 　　background-color:#675c47; 　　color:#efe5d0; 　　text-align:center; 　　padding:15px; 　　margin:0px 10px 10px 10px; 　　font-size:90%; }

 

CSS布局策略

浮动布局：float属性元素浮动，其他元素围绕着它，clear属性可消除覆盖问题，不允许有浮动内容。缺点是页面内容顺序会调整，还有无法创建两个高度相同的列。

凝胶布局：auto属性允许外边距扩展。提供一个适当居中、固定大小的内容区，它的外边距可以扩展。缺点是内容不会扩展来填满整个浏览器窗口。

绝对定位：position:absolute; 提供一个漂亮的流体主内容区，还有一个固定的边栏。缺点是浏览器变宽时，边栏会再次覆盖页脚，这时不能使用clear属性，因为流元素根本不知道绝对定位元素的存在。

表格显示布局：采用表格显示布局，可以得到均匀的两栏，可以随浏览器窗口的大小扩展和收缩，还可以扩展多行多列。

 

 

转载于:https://www.cnblogs.com/giscode/p/6605935.html

相关资源：数据结构—成绩单生成器

专利

最新回复(0)