CSS 布局总结——变宽度布局

最新推荐文章于 2024-10-17 21:18:21 发布
最新推荐文章于 2024-10-17 21:18:21 发布
阅读量538 收藏
点赞数
分类专栏： css 文章标签： css

变宽度布局

1-2-1 等比例变宽



总宽度设置 width: 85%; min-width: 650px; （关于IE6的min-width支持，可用）
content 设置 width: 66%; float: left;
side 设置 width: 33%; float: right;
加入clear 空div

HTML 结构：
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <title>1-2-1 等比例变宽</title>  
  5.         <meta charset="utf-8" />          
  6.     </head>  
  7.       
  8.     <body>  
  9.         <div id="header">  
  10.             <p>Header</p>  
  11.         </div>  
  12.               
  13.         <div id="container">  
  14.             <div id="content">  
  15.                 <h2>Content Header</h2>  
  16.                 <div class="main">  
  17.                     <p>  
  18.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  19.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  20.                     </p>  
  21.                 </div>  
  22.             </div>  
  23.             <div id="side">  
  24.                 <h2>Side Header</h2>  
  25.                 <div class="main">  
  26.                     <p>  
  27.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  28.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  29.                     </p>  
  30.                 </div>  
  31.             </div>  
  32.             <div id="clear"></div>  
  33.         </div>  
  34.               
  35.         <div id="footer">  
  36.             <p>footer footer footer footer footer footer footer footer</p>  
  37.         </div>  
  38.     </body>  
  39. </html>  
CSS：
[css]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. body{  
  2.     font: 13px/1.5 Arial;  
  3.     margin: 0;  
  4.     padding: 0;  
  5. }  
  6. #header, #container, #footer{  
  7.     width: 85%;  
  8.     margin: 10px auto;  
  9.     min-width: 650px;  
  10. }  
  11. #header{  
  12.     border: 1px solid black;  
  13.     background-color: #666;  
  14. }  
  15. #content{  
  16.     border: 1px solid black;  
  17.     background-color: #999;  
  18.     width: 66%;  
  19.     float: left;  
  20. }  
  21. #side{  
  22.     border: 1px solid black;  
  23.     background-color: #999;  
  24.     width: 33%;  
  25.     float: right;  
  26. }  
  27. #clear{  
  28.     clear: both;  
  29. }  
  30.   
  31. #footer{  
  32.     border: 1px solid black;  
  33.     background-color: #CCC;  
  34. }  

1-2-1 单列变宽


side 固定宽度，content 随窗口宽度变化
side设置 width: 200px; float: left;
在content外层加入 contentWrap，contentWrap 设置为 width: 100%; margin-right: -220px; float: right;
而content 设置为 margin-right: 220px;
这样就利用了wrap实现了content的宽度为 100%-320px

HTML 结构：
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <title>1-2-1 单列变宽</title>  
  5.         <meta charset="utf-8" />          
  6.     </head>  
  7.       
  8.     <body>  
  9.         <div id="header">  
  10.             <p>Header</p>  
  11.         </div>  
  12.               
  13.         <div id="container">  
  14.             <div id="contentWrap">  
  15.                 <div id="content">  
  16.                     <h2>Content Header</h2>  
  17.                     <div class="main">  
  18.                         <p>  
  19.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  20.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  21.                         </p>  
  22.                     </div>  
  23.                 </div>  
  24.             </div>  
  25.               
  26.             <div id="side">  
  27.                 <h2>Side Header</h2>  
  28.                 <div class="main">  
  29.                     <p>  
  30.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  31.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  32.                     </p>  
  33.                 </div>  
  34.             </div>  
  35.             <div id="clear"></div>  
  36.         </div>  
  37.               
  38.         <div id="footer">  
  39.             <p>footer footer footer footer footer footer footer footer</p>  
  40.         </div>  
  41.     </body>  
  42. </html>  

CSS：
[css]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. body{  
  2.     font: 13px/1.5 Arial;  
  3.     margin: 0;  
  4.     padding: 0;  
  5. }  
  6. #header, #container, #footer{  
  7.     width: 85%;  
  8.     margin: 10px auto;  
  9.     min-width: 700px;  
  10. }  
  11. #header{  
  12.     border: 1px solid black;  
  13.     background-color: #666;  
  14. }  
  15. #contentWrap{  
  16.     width: 100%;  
  17.     margin-right: -220px;  
  18.     float: right;  
  19. }  
  20. #content{  
  21.     border: 1px solid black;  
  22.     background-color: #999;  
  23.     margin-right: 220px;  
  24. }  
  25. #side{  
  26.     border: 1px solid black;  
  27.     background-color: #999;  
  28.     width: 200px;  
  29.     float: left;  
  30. }  
  31. #clear{  
  32.     clear: both;  
  33. }  
  34. #footer{  
  35.     border: 1px solid black;  
  36.     background-color: #CCC;  
  37. }  

1-3-1 单侧列宽固定




nav 固定宽度 width: 200px; float: left;
在content 和 side 外层加入两层 div：outerWrap 和 innerWrap 
outerWrap 设置为 width: 100%; margin-right: -210px; float: right;
innerWrap 设置为 margin-right: 210px;
然后content 和 side 相当于在 innerWrap 内部等比例变宽

HTML结构：
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <title>1-3-1 单侧列宽固定</title>  
  5.         <meta charset="utf-8" />          
  6.     </head>  
  7.       
  8.     <body>  
  9.         <div id="header">  
  10.             <p>Header</p>  
  11.         </div>  
  12.               
  13.         <div id="container">  
  14.             <div id="nav">  
  15.                 <h2>Nav Header</h2>  
  16.                 <div class="main">  
  17.                     <p>  
  18.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  19.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  20.                     </p>  
  21.                 </div>  
  22.             </div>  
  23.               
  24.             <div id="outerWrap">  
  25.                 <div id="innerWrap">  
  26.                     <div id="content">  
  27.                         <h2>Content Header</h2>  
  28.                         <div class="main">  
  29.                             <p>  
  30.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  31.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  32.                             </p>  
  33.                         </div>  
  34.                     </div>  
  35.                     <div id="side">  
  36.                         <h2>Side Header</h2>  
  37.                         <div class="main">  
  38.                             <p>  
  39.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  40.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  41.                             </p>  
  42.                         </div>  
  43.                     </div>  
  44.                 </div>  
  45.             </div>  
  46.             <div id="clear"></div>  
  47.         </div>  
  48.               
  49.         <div id="footer">  
  50.             <p>footer footer footer footer footer footer footer footer</p>  
  51.         </div>  
  52.     </body>  
  53. </html>  

CSS：
[css]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. body{  
  2.     font: 13px/1.5 Arial;  
  3.     margin: 0;  
  4.     padding: 0;  
  5. }  
  6. #header, #container, #footer{  
  7.     width: 85%;  
  8.     margin: 10px auto;  
  9.     min-width: 800px;  
  10. }  
  11. #header{  
  12.     border: 1px solid black;  
  13.     background-color: #666;  
  14. }  
  15. #nav{  
  16.     border: 1px solid black;  
  17.     background-color: #999;  
  18.     width: 200px;  
  19.     float: left;  
  20. }  
  21. #outerWrap{  
  22.     width: 100%;  
  23.     margin-right: -210px;  
  24.     float: right;  
  25. }  
  26. #innerWrap{  
  27.     margin-right: 210px;  
  28. }  
  29. #content{  
  30.     border: 1px solid black;  
  31.     background-color: #999;  
  32.     width: 66%;  
  33.     float: left;  
  34. }  
  35. #side{  
  36.     border: 1px solid black;  
  37.     background-color: #999;  
  38.     width: 33%;  
  39.     float: right;  
  40. }  
  41. #clear{  
  42.     clear: both;  
  43. }  
  44.   
  45. #footer{  
  46.     border: 1px solid black;  
  47.     background-color: #CCC;  
  48. }  

1-3-1 中间列宽固定


content 宽度固定
在 nav 和 side 分别加上外层 div ：navWrap 和 sideWrap
navWrap 设置为 width: 50%; margin-left: -210px; float: left;
nav 设置为 margin-left: 210px;
同理，sideWrap 和 side 也做类似的设置

HTML结构：
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <title>1-3-1 中间列宽固定</title>  
  5.         <meta charset="utf-8" />          
  6.     </head>  
  7.       
  8.     <body>  
  9.         <div id="header">  
  10.             <p>Header</p>  
  11.         </div>  
  12.               
  13.         <div id="container">  
  14.             <div id="navWrap">  
  15.                 <div id="nav">  
  16.                     <h2>Nav Header</h2>  
  17.                     <div class="main">  
  18.                         <p>  
  19.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  20.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  21.                         </p>  
  22.                     </div>  
  23.                 </div>  
  24.             </div>  
  25.       
  26.             <div id="content">  
  27.                 <h2>Content Header</h2>  
  28.                 <div class="main">  
  29.                     <p>  
  30.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  31.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  32.                     </p>  
  33.                 </div>  
  34.             </div>  
  35.               
  36.             <div id="sideWrap">  
  37.                 <div id="side">  
  38.                     <h2>Side Header</h2>  
  39.                     <div class="main">  
  40.                         <p>  
  41.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  42.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  43.                         </p>  
  44.                     </div>  
  45.                 </div>  
  46.             </div>  
  47.               
  48.             <div id="clear"></div>  
  49.         </div>  
  50.               
  51.         <div id="footer">  
  52.             <p>footer footer footer footer footer footer footer footer</p>  
  53.         </div>  
  54.     </body>  
  55. </html>  

CSS：
[css]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. body{  
  2.     font: 13px/1.5 Arial;  
  3.     margin: 0;  
  4.     padding: 0;  
  5. }  
  6. #header, #container, #footer{  
  7.     width: 85%;  
  8.     margin: 10px auto;  
  9.     min-width: 700px;  
  10. }  
  11. #header{  
  12.     border: 1px solid black;  
  13.     background-color: #666;  
  14. }  
  15. #navWrap{  
  16.     width: 50%;  
  17.     margin-left: -210px;  
  18.     float: left;  
  19. }  
  20. #nav{  
  21.     border: 1px solid black;  
  22.     background-color: #999;  
  23.     margin-left: 210px;  
  24. }  
  25. #content{  
  26.     border: 1px solid black;  
  27.     background-color: #999;  
  28.     width: 400px;  
  29.     float: left;  
  30.     margin-left: 10px;  
  31. }  
  32. #sideWrap{  
  33.     width: 49.9%;  
  34.     margin-right: -210px;  
  35.     float: right;  
  36. }  
  37. #side{  
  38.     border: 1px solid black;  
  39.     background-color: #999;  
  40.     margin-right: 210px;  
  41. }  
  42. #clear{  
  43.     clear: both;  
  44. }  
  45.   
  46. #footer{  
  47.     border: 1px solid black;  
  48.     background-color: #CCC;  
  49. }  

1-3-1 双侧列宽固定


nav 和 side 宽度固定
nav 设置为 width: 200px; float: left;
在 content 和 side 外层加上 outerWrap 和 innerWrap ，这样就相当于单列固定宽度的设置，nav 固定宽度
然后再在 content 外层加上 contentWrap ，也相当于在 innerWrap 内部单列固定宽度设置，side 固定宽度

HTML 结构：
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <title>1-3-1 双侧列宽固定</title>  
  5.         <meta charset="utf-8" />          
  6.     </head>  
  7.       
  8.     <body>  
  9.         <div id="header">  
  10.             <p>Header</p>  
  11.         </div>  
  12.               
  13.         <div id="container">  
  14.             <div id="nav">  
  15.                 <h2>Nav Header</h2>  
  16.                 <div class="main">  
  17.                     <p>  
  18.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  19.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  20.                     </p>  
  21.                 </div>  
  22.             </div>  
  23.               
  24.             <div id="outerWrap">  
  25.                 <div id="innerWrap">  
  26.                     <div id="contentWrap">  
  27.                         <div id="content">  
  28.                             <h2>Content Header</h2>  
  29.                             <div class="main">  
  30.                                 <p>  
  31.                                     文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  32.                                     文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  33.                                 </p>  
  34.                             </div>  
  35.                         </div>  
  36.                     </div>  
  37.                       
  38.                     <div id="side">  
  39.                         <h2>Side Header</h2>  
  40.                         <div class="main">  
  41.                             <p>  
  42.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  43.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  44.                             </p>  
  45.                         </div>  
  46.                     </div>  
  47.                 </div>  
  48.             </div>  
  49.             <div id="clear"></div>  
  50.         </div>  
  51.               
  52.         <div id="footer">  
  53.             <p>footer footer footer footer footer footer footer footer</p>  
  54.         </div>  
  55.     </body>  
  56. </html>  

CSS：
[css]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. body{  
  2.     font: 13px/1.5 Arial;  
  3.     margin: 0;  
  4.     padding: 0;  
  5. }  
  6. #header, #container, #footer{  
  7.     width: 85%;  
  8.     margin: 10px auto;  
  9.     min-width: 800px;  
  10. }  
  11. #header{  
  12.     border: 1px solid black;  
  13.     background-color: #666;  
  14. }  
  15. #nav{  
  16.     border: 1px solid black;  
  17.     background-color: #999;  
  18.     width: 200px;  
  19.     float: left;  
  20. }  
  21. #outerWrap{  
  22.     width: 100%;  
  23.     margin-right: -210px;  
  24.     float: right;  
  25. }  
  26. #innerWrap{  
  27.     margin-right: 210px;  
  28. }  
  29. #contentWrap{  
  30.     width: 100%;  
  31.     margin-left: -110px;  
  32.     float: left;  
  33. }  
  34. #content{  
  35.     border: 1px solid black;  
  36.     background-color: #999;  
  37.     margin-left: 110px;  
  38. }  
  39. #side{  
  40.     border: 1px solid black;  
  41.     background-color: #999;  
  42.     width: 100px;  
  43.     float: right;  
  44. }  
  45. #clear{  
  46.     clear: both;  
  47. }  
  48.   
  49. #footer{  
  50.     border: 1px solid black;  
  51.     background-color: #CCC;  
  52. }  

1-3-1 中列和侧列宽固定

nav 和 content 固定宽度，side 外层加上 sideWrap ，相当于1-2-1单列变宽

HTML 结构：
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <title>1-3-1 中列和侧列宽固定</title>  
  5.         <meta charset="utf-8" />          
  6.     </head>  
  7.       
  8.     <body>  
  9.         <div id="header">  
  10.             <p>Header</p>  
  11.         </div>  
  12.               
  13.         <div id="container">  
  14.           
  15.             <div id="nav">  
  16.                 <h2>Nav Header</h2>  
  17.                 <div class="main">  
  18.                     <p>  
  19.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  20.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  21.                     </p>  
  22.                 </div>  
  23.             </div>  
  24.               
  25.             <div id="content">  
  26.                 <h2>Content Header</h2>  
  27.                 <div class="main">  
  28.                     <p>  
  29.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  30.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  31.                     </p>  
  32.                 </div>  
  33.             </div>  
  34.               
  35.             <div id="sideWrap">  
  36.                 <div id="side">  
  37.                     <h2>Side Header</h2>  
  38.                     <div class="main">  
  39.                         <p>  
  40.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  41.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  42.                         </p>  
  43.                     </div>  
  44.                 </div>  
  45.             </div>  
  46.             <div id="clear"></div>  
  47.         </div>  
  48.               
  49.         <div id="footer">  
  50.             <p>footer footer footer footer footer footer footer footer</p>  
  51.         </div>  
  52.     </body>  
  53. </html>  

CSS：
[css]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. body{  
  2.     font: 13px/1.5 Arial;  
  3.     margin: 0;  
  4.     padding: 0;  
  5. }  
  6. #header, #container, #footer{  
  7.     width: 85%;  
  8.     margin: 10px auto;  
  9.     min-width: 800px;  
  10. }  
  11. #header{  
  12.     border: 1px solid black;  
  13.     background-color: #666;  
  14. }  
  15. #nav{  
  16.     border: 1px solid black;  
  17.     background-color: #999;  
  18.     width: 200px;  
  19.     float: left;  
  20. }  
  21. #content{  
  22.     border: 1px solid black;  
  23.     background-color: #999;  
  24.     margin-left: 10px;  
  25.     width: 400px;  
  26.     float: left;  
  27. }  
  28. #sideWrap{  
  29.     width: 100%;  
  30.     margin-right: -620px;  
  31.     float: right;  
  32. }  
  33. #side{  
  34.     border: 1px solid black;  
  35.     background-color: #999;  
  36.     margin-right: 620px;  
  37. }  
  38. #clear{  
  39.     clear: both;  
  40. }  
  41.   
  42. #footer{  
  43.     border: 1px solid black;  
  44.     background-color: #CCC;  
  45. }  
lwj0310
关注
专栏目录
CSS（十四）——变宽度布局
程序员的时光
03-20 469
利用相对于浏览器的百分比来设置页面布局大小： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> body{ text-align: ce...
css极速入门 —— grid布局
05-01
Grid布局是一种强大的CSS布局方案，它可以将容器划分成行和列，产生单元格，然后指定项目所在的单元格。相比Flex布局，Grid布局更为灵活和强大，但学习成本相对困难一些。 基本概念： 1. 容器（container）：有...
50个常用的css代码
m0_54829066的博客
08-04 1692
47. 设置div的下边距。
如何使用CSS的布局来控制网页的布局
2301_77795034的博客
05-03 619
在这种布局方式下，元素会在页面中上下浮动，并且会占据剩余的空间。首先，我们要明确一点：CSS布局并不是什么高深莫测的技术，它只是用来控制网页元素在页面中的位置、大小和样式的一种简单工具。Grid布局是一种非常流行的布局方式，它可以将页面划分成多个列（column）和行（row），从而实现更好的响应式效果和布局灵活性。每个浏览器都有自己独特的盒模型，因此在进行布局时，我们需要根据不同浏览器的盒模型来设置元素的样式和位置。好了，现在我们已经学习了最基本的CSS布局方式，那么接下来我们要讲解一些高级的技巧。
web前端学习笔记(CSS变化宽度布局)
weixin_30877181的博客
06-05 257
Posted on2013-09-30 09:03Stephen_Liu阅读(2406) 评论(6)编辑收藏 一、“1-2-1”单列变宽布局： 对于变宽度的布局，首先要使内容的整体宽度随浏览器窗口宽度的变化而变化。因此中间的container容器中的左右两列的总宽度也会变化，这样就会产生不同的情况。这两列是按照一定的比例同时变化，还是一列固定，另一列变化...
响应式网页布局的实现方法原理
04-17 820
昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计？》，我觉的响应式网页设计不仅仅是一种趋势，还更是一个新的设计解决方案！它有助于解决不同的分辨率和设备（台式电脑，笔记本电脑，平板，手机）相关的设计问题。既然是设计的问题，这里就会涉及到很多层面的角色，包括交互设计师，视觉设计师，前端工程师，后台开发工程师。 交互设计师，要满足各自不通分辨率和设备的页面布局展现方式。而视觉设计...
定宽自适应布局的实现方式
username_xu的博客
03-15 875
定宽自适应布局：定宽的内容保持不变，自适应的内容随屏幕的大小的改变而改变。方式一：浮动 float + 外边距 margin基本思路： 1.  父元素设置 padding 将需要定宽的位置预留出来；2.  子元素浮动；3. 定宽的子元素，固定宽度，自适应的子元素，设置宽度100%；4. 定宽的子元素，设置 margin 为负值，填补父元素 padding 预留出来的位置。html&lt;!-- 以...
两侧列固定中间列变宽Div布局参考
06-12 1100
两侧列固定中间列变宽2 body{ font:12px/18px Arial; margin:0; } #header,#footer { background:#CCCCFF; width:85%; margin:0 auto; } #Nav { background:#dfC0FF; width:85%; margin:0 auto; } h2{ margin:0
<CSS设计指南> 学习总结 -- 页面布局
lihei12345的专栏
02-10 733
布局的基本概念 多栏布局有三种基本的实现方式：固定宽度、流动、弹性 1. 固定宽度：该布局的大小不会随用户调整浏览器窗口大小而变化，一般是900到1100像素宽。其中960像素是最常见的，因为这个宽度适合所有现代显示器，而且能够被16、12、10、8、6、5、4和3整除，不仅容易计算出等宽分栏的数量，而且计算结果也能得到没有小数的像素数。 2. 流动： 布局的大小会随着用户调
web布局固定宽度+变化宽度实现思路
weixin_33754913的博客
02-06 524
前言 页面当中常规布局我想大家都会的，但有些布局是常规布局中实现不了的，比如变宽和固宽结合的，需要实现(300px)＋(100%－300px)的两列布局。以下样式代码前提均为盒模型为border-sizing 的前提下。 html部分 &lt;div class="main"&gt; &lt;section class="left"&gt; 左边内容 &lt;/section&gt;...
web网页 页面布局的几种方式
热门推荐
lyyo_cd的博客
06-16 4万+
网页基本布局方式： （1）流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，这位网页提供了很强的可塑性和流动性。换句话说，通过设置百分比，我们不需要考虑设备尺寸或者屏幕宽度大小了，可以为每种情形找到一种可行的方案，应为你的设计尺寸将适应所有的设备尺寸。流布局与媒体查询和优化样式技术密切相关。 （2
CSS-变宽度布局
cc098818的博客
08-13 639
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>变宽度布局</title> <style type="text/css"> body{ text-align: center; } #head,#container,#content...
固定宽度与变宽度页面布局分析
LHL62411570的专栏
04-04 675
11111
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
10-16 2136
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
第六章 元素应用CSS
最新发布
2301_79780386的博客
10-17 607
在CSS中，设置字体样式（font style）是通过一系列与字体相关的属性来实现的。
DIV+CSS两列布局教程：实现宽度自适应与清除浮动技巧
作为DIV+CSS布局教程系列的第二篇，它着重于实现一个宽度自适应的两列布局结构。这种布局方式利用HTML和CSS的灵活特性，使网页内容能够根据浏览器窗口的大小动态调整。 首先，两列布局的实现通常通过浮动技术来构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值