CSS设计指南---页面布局

最新推荐文章于 2024-08-09 16:30:00 发布

怎么啥都不会

最新推荐文章于 2024-08-09 16:30:00 发布

阅读量1.8k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_40794404/article/details/118334357

版权

本文是关于CSS设计指南中的页面布局部分，重点讨论了多栏布局，包括固定宽度、流动和弹性布局。针对三栏固定宽度布局，讲解了浮动栏下滑问题的解决方案，如更新元素宽度、使用CSS3的box-sizing属性。此外，还介绍了如何处理图片过大和长字符换行问题。对于三栏中栏流动布局，提到了负外边距和CSS3单元格实现的方法。最后，讨论了CSS选择符的应用，提倡使用ID作为选择器，以提高代码可读性。

摘要由CSDN通过智能技术生成

CSS设计指南—页面布局

教材：CSS设计指南

实现多栏布局

三种方案：

固定宽度：固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到1100像素宽。
流动：流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。
弹性：弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了的感觉。

布局高度：多数情况下，布局中结构化元素（乃至任何元素）的高度是不必设定的，设置为默认值auto，方便元素随内容的增加而在垂直方向上扩展。

布局宽度：与高度不同，我们需要更精细地控制布局宽度，以便随着浏览器窗口宽度的合理变化，布局能够作出适当的调整，确保文本行不会过长或过短。即使必须设定栏宽，也不要给包含在其中的内容元素设定宽度，应该让这些内容元素自动扩展到填满栏的宽度。

多栏布局—三栏固定宽度布局

分别创立三个栏的布局，确定好他们的宽度对他们应用float，页脚应用clear属性。
为每个栏设定一个宽度，但是栏中的内容不设定宽度，这样会默认拓展满栏的宽度。

* {
   margin:0; padding:0;}
#wrapper {
   width:960px; margin:0 auto; border:1px solid;}
header {
   background:#f00;}
nav {
   
width:150px;
float:left;
background:#dcd9c0;
}
nav li {
   
list-style-type:none;
}
article {
   
width:600px;
float:left;
background:#ffed53;
}
aside {
   
width:210px;
float:left;
background:#3f7ccf;
}