争怎路由网/网站教程/内容

css完成3栏布局的3种方式（附代码）

网站教程2024-03-25 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
这篇文章给大家介绍的内容是关于css实现三栏布局的三种方式（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

浮动布局

分为三个div，另外一个父级包含这三个div，使用float，

注意点：三个div，left --> right ---> center 这种顺序

<!DOCTYPE html>
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style type="text/css"> 
body {
   margin: 0;   
   padding: 0; 
   } 
    .left {   
             float: left;   
             width: 300px;   
             height: 100px;   
             background-color: red; 
         } 
     .right {   
            float: right;    
            width: 300px;   
            height: 100px;   
            background-color: blue; 
           } 
      .center {
               margin: 0px 300px 0px 300px;   
               background-color: black;   
               height: 100px; 
              } 
</style> 
</head> 
<body> 
<div class="father"> 
<div class="left">1</div> 
<div class="right">2</div> 
<div class="center">3</div> 
</div> 
</body> 
</html>　　

Flex

设置中间盒子FLex：1，这样的话就可以实现自适应，默认水平排列

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.father {
  display: flex;
}
.left {
  width: 300px;
  height: 100px;
  background-color: red;
}
.center {
  flex:1;
  height: 100px;
  background-color: black;
}
.right {
  width: 300px;
  height: 100px;
  background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div> 
</body>
</html>

flex相关知识点，一般会使用到的

1、设置display：flex

2、容器图：

轴：水平main axis和垂直cross axis

3、容器的属性

flex-direction：主轴的方向，row (专业提供视频软件下载)

row-reverse (专业提供视频软件下载)

column (专业提供视频软件下载)

column-reverse;

flex-wrap：换行， nowrap (专业提供视频软件下载)

wrap (专业提供视频软件下载)

wrap-reverse;

flex-flow：flex-direction和flex-wrap简写

justify-content：主轴上的对齐方式， flex-start (专业提供视频软件下载)

flex-end (专业提供视频软件下载)

center (专业提供视频软件下载)

space-between (专业提供视频软件下载)

space-around；

align-items：交叉轴上如何对齐，flex-start (专业提供视频软件下载)

flex-end (专业提供视频软件下载)

center (专业提供视频软件下载)

baseline (专业提供视频软件下载)

stretch;

绝对定位对齐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one {
  background-color: red;
  position: absolute;
  left: 0;
  width: 300px;
  height: 100px;
}
.two {
  left: 300px;
  right: 300px;
  background-color: blue;
  position: absolute;
  height: 100px;
}
.three {
  right: 0px;
  width: 300px;
  background-color: yellow;
  position: absolute;
  height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="one">1</div>
<div class="two">1</div>
<div class="three">1</div>
</div> 
</body>
</html>
相关文章推荐：
设计前端网页页面时,怎么使导航栏居中对齐?（代码实测）
CSS布局有哪些？css常见的布局方式（附代码）
以上就是css实现三栏布局的三种方式（附代码）的详细内容，更多请关注php中文网其它相关文章！
				
				

					
  • 微信
    • 
					
    • 
				

    网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



          
    ……
    标签:css完成3栏布局的3种方式（附代码）
     
    相关阅读