css布局

最新推荐文章于 2024-07-25 10:45:42 发布

　菜鸟　

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量95

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_42220904/article/details/118151093

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：观点仅个人看法，欢迎各位大神指教。

参照文章：https://www.cnblogs.com/Renyi-Fan/p/12173366.html#_labelTop

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

https://www.w3school.com.cn/cssref/pr_class_float.asp

1.flex布局（个人比较喜欢使用）

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

深入了解可以看阮一峰老师的文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>经典布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
body > div{
  display: flex;
  height: 20vh;
  width: 98vw;
  margin: 0 auto;
}
.left, .rigth{
	height: 100%;
	flex: 1 1 auto;
}
.left1, right1{
	height: 100%;
}
.left1{
  flex: 3 3 75%;
}
.rigth1{
  flex: 1 1 25%;
}
.left2, .center2, .rigth2{
	height: 100%;
	flex: 1 1 auto;
}
.left3, .rigth3{
	height: 100%;
	flex: 0 0 40px;
}
.center3 {
	height: 100%;
	flex: 1 1 auto;
}
</style>
<body>
  <p>一些用flex设置的经典布局</p>
  <h1>两栏布局(均分)</h1>
  <div>
	  <div style="background: red" class="left">
	  </div>
	  <div style="background: green" class="rigth">
	  </div>
  </div>
  <h1>两栏布局（3：1）</h1>
  <div>
	  <div style="background: red" class="left1">
	  </div>
	  <div style="background: green" class="rigth1">
	  </div>
  </div>
  <h1>三栏栏布局（均分）</h1>
  <div>
	  <div style="background: red" class="left2">
	  </div>
	  <div style="background: green" class="center2">
	  </div>
	  <div style="background: blue" class="rigth2">
	  </div>
  </div>
  <h1>三栏栏布局（两边定长，中间自动）</h1>
  <div>
	  <div style="background: red" class="left3">
	  </div>
	  <div style="background: green" class="center3">
	  </div>
	  <div style="background: blue" class="rigth3">
	  </div>
  </div>
</body>
</html>

2.float布局

利用float 属性对页面进行布局。

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

浮动元素的布局特点：

1.不影响其他块级元素的位置

2.上面贴非 float 元素

3.旁边贴 float 元素或者边框，尽量靠左（float:left）或右（float:right），如果那一行满足不了浮动元素的宽度要求，则元素会往下掉。

浮动元素布局的缺陷：

1.高度塌陷

浮动后的元素的高度和父级元素的高度无关，例如：给浮动后的元素一个高度100px，父级元素高度不设定，此时，父级元素内如果没有其他非浮动元素的时候，父级元素的高度依然为0，由于这种特性，使用浮动布局后就会出现一种现象。就是“高度塌陷”。

解决办法(不是全部，还有其他方式)：

1.父元素设置 overflow: auto 或者 overflow: hidden

2.追加一个伪类

             父级元素::after{
               content:'';
         clear:both;
         display:block;
     visibility:hidden;
       height:0;
             }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>经典布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
body > div{
  width: 98vw;
  margin: 0 auto;
  border: 1px solid;
}
body > div::after{
        content:'';
        clear:both;
        display:block;
        visibility:hidden;
        height:0; 
}
.left, .rigth{
  float: right;
  height: 100px;
  width: 50%;
}
.left1, .rigth1{
  height: 100px;
}
.left1{
  width: 75%;
  float: left;
}
.right1{
  width： 25%;
  float: right;
}
.left2 {
   height: 100px;
   float: left;
   width: 33%;
}
.center2{
   height: 100px;
   margin: 0 auto;
   width: 33%;
}
.rigth2{
   height: 100px;
   float: right;
   width: 33%;
}
.left3, .rigth3{
  height: 100px;
   width: 40px;
}
.left3{
  float: left;
}
.rigth3{
  float: right;
}
.center3 {
  height: 100px;
  margin: 0 40px;
}
</style>
<body>
  <p>一些用float设置的经典布局</p>
  <h1>两栏布局(均分)</h1>
  <div>
	  <div style="background: red" class="left">
	  </div>
	  <div style="background: green" class="rigth">
	  </div>
  </div>
  <h1>两栏布局（3：1）</h1>
  <div>
	  <div style="background: red" class="left1">
	  </div>
	  <div style="background: green" class="rigth1">
	  </div>
  </div>
  <h1>三栏栏布局（均分）</h1>
  <div>
	  <div style="background: red" class="left2">
	  </div>
	  <div style="background: blue" class="rigth2">
	  </div>
	  <div style="background: green" class="center2">
	  </div>
  </div>
  <h1>三栏栏布局（两边定长，中间自动）</h1>
  <div>
	  <div style="background: red" class="left3">
	  </div>
	  <div style="background: blue" class="rigth3">
	  </div>
	  <div style="background: green" class="center3">
	  </div>
  </div>
</body>
</html>

3.table布局（现在使用较少）

table布局就是直接使用table标签或者display：table属性进行布局。

table布局方式在早期有较多人使用，现在已经逐渐退出历史的舞台了。

table布局的局限性：

1. 比如 table 比其它 html 标记占更多的字节（造成下载时间延迟,占用服务器更多流量资源）

2.table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)

4.响应式布局

根据不同的窗口显示不同的页面加载效果。

具体参照：https://www.runoob.com/css/css-rwd-viewport.html

　菜鸟　

关注

0
点赞
踩
0

收藏

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

前言：观点仅个人看法，欢迎各位大神指教。参照文章：https://www.cnblogs.com/Renyi-Fan/p/12173366.html#_labelTop http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html https://www.w3school.com.cn/cssref/pr_class_float.asp1.flex布局（个人比较喜欢使用）...
复制链接

扫一扫