CSS布局

最新推荐文章于 2024-05-14 18:25:49 发布

代码收割机

最新推荐文章于 2024-05-14 18:25:49 发布

阅读量258

点赞数

分类专栏：前端文章标签： CSS 前端

本文链接：https://blog.csdn.net/langwangak/article/details/100857881

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近，学了一些CSS布局的方法，这里总结一下。

1. 左右布局
用float实现左右布局，float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

float属性值	意义
left	表明元素必须浮动在其所在的块容器左侧的关键字。
right	表明元素必须浮动在其所在的块容器右侧的关键字。
none	表明元素不进行浮动的关键字。
inline-start	关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。
inline-end	关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。

这里我们用left属性和right属性即可实现左右布局。
html代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>css布局</title>
</head>
<body>
  <div class="left">左</div>
  <div class="right">右</div>
</body>
</html>

CSS代码如下：

.left{
  border:1px solid red;
  float:left;
}
.right{
  border:1px solid green;
  float:right;
}

展示效果：
左右布局
2. 左中右布局
用flex实现左中右布局，CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。
html代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>css布局</title>
</head>
<body>
<div class="father">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</div>
</body>
</html>

CSS代码如下：

.father{
  display:flex;
  border:1px solid;
}
.left{
  border:10px solid red;
}
.center{
  border:10px solid green;
  flex:1;
}
.right{
  border:10px solid blue;
}

展示效果：
左中右布局
3. 水平居中

行内元素

首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center; 如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;

块级元素

需要谁居中，给其设置 margin: 0 auto; html代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>css布局</title>
</head>
<body>
<div class="father">
  <div class="son">儿子</div>
</div>
</body>
</html>

CSS代码如下：

.father{
  border:1px solid;
}
.son{
  border:1px solid red;
  margin: 0 auto;
  width:100px;
}

展示效果：
水平居中
4. 垂直居中
使用flex布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;
html代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>css布局</title>
</head>
<body>
<div class="father">
  <div class="son">儿子</div>
</div>
</body>
</html>

CSS代码如下：

.father{
  border:1px solid;
  height:200px;
  display:flex;
  align-items: center;
}
.son{
  border:1px solid red;
  width:100px;
  height:100px; 
}

展示效果：
垂直居中
总结：
其实CSS布局用flex、float、position等方式来实现，根据实际需求，实现其效果即可，以后发现更优化的方式，进行更新即可。

代码收割机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局

最近，学了一些CSS布局的方法，这里总结一下。左右布局用float实现左右布局，float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。 float属性值意义 left表明元素必须浮动在其所在的块容器左侧的关键字。 right表明元素必须浮动...
复制链接

扫一扫

专栏目录