您现在的位置是：网站首页> 编程资料编程资料

CSS中固定宽度布局的详细教程CSS中将Span标签设置为固定宽度的方法CSS三列布局两端固定宽度中间自适应CSS三栏布局探讨——中间固定宽度两边自适应宽度

2023-10-23 201人已围观

简介 这篇文章主要介绍了CSS中固定宽度布局的详细教程,包括元素内边距和边框等各种复杂的调试示例,极力推荐!需要的朋友可以参考下

.布局前的认知
1.1 三种基本方案

多栏布局有三种基本的实现方案：固定宽度、流动、弹性。

    固定宽度。布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到 1100 像素宽（最常见的是 960 像素）。

    流动。布局的大小会随用户调整浏览器窗口大小而变化。（结合 CSS 媒体查询，能够适应最大和最小的屏幕，业界称之为 响应式设计。）

    弹性。在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化。（实现太过复杂，不多介绍。）

1.2 布局高度

多数情况下，布局中结构化元素（乃至任何元素）的高度是 不必或者不应该设定的。因为保持元素 height 属性的默认值 auto 不变，才能使元素根据自己包含内容的增加而在垂直方向上扩展。这样扩展的元素会把下方的元素向下推，而布局也能随内容数量的增减而垂直伸缩。
1.3 布局宽度

为了使浏览器窗口宽度合理变化，布局能作出适当的调整，我们 需要精细地控制 布局宽度。
2.三栏-固定宽度布局

结构如下：
2015723171927362.png (600×367)

上代码：

XML/HTML Code复制内容到剪贴板
  1.   
  2. "en">   
  3.   
  4.     "UTF-8">   
  5.     三栏-固定宽度布局   
  6.        
  7.   
  8.   
  9.     "wrapper">   
  10.         
      
  11.             This is header.   
  12.            
  13.         
  14.             This is nav
      
  15.             This is nav
      
  16.             This is nav
      
  17.            
  18.         
      
  19.             This is article.
      
  20.             This is article.
      
  21.             This is article.
      
  22.             This is article.
      
  23.             This is article.
      
  24.             This is article.
      
  25.             This is article.
      
  26.             This is article.
      
  27.             This is article.
      
  28.         
  
  •         
  •             This is aside.   
  •            
  •         
  •             This is footer.   
  •            
  •  

    上一篇：使用css实现圆角图形绘制CSS3制作圆角图片和椭圆形图片Css3圆角边框制作代码CSS的一些圆角图形实例分享CSS3绘制圆角矩形的简单示例纯CSS实现圆角折叠菜单的方法CSS实现反方向圆角的示例代码

    下一篇：详解CSS中的栅格系统

    相关内容

    点击排行

    本栏推荐

    猜你喜欢