html盒模型向上浮动,css和css3弹性盒模型实现元素宽度（高度）自适应

最新推荐文章于 2022-12-18 20:52:39 发布

文润观书

最新推荐文章于 2022-12-18 20:52:39 发布

阅读量482

点赞数

文章标签： html盒模型向上浮动

本文介绍使用CSS实现固定宽度和自适应宽度布局的方法，包括通过定位、浮动及margin等传统CSS技术，以及利用现代CSS3弹性盒模型来实现更复杂的自适应布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、css实现左侧宽度固定右侧宽度自适应

1、定位

自适应

padding: 0;

margin: 0;

}

.left{

background: red;

width: 200px;

height: 200px;

position: absolute;/*定位*/

left: 0;

top:0;

}

.right{

background: blue;

height: 200px;

margin-left: 210px;

}

定宽

自适应

2、浮动

自适应

padding: 0;

margin: 0;

}

.left{

background: red;

width: 200px;

height: 200px;

float: left;/*浮动*/

}

.right{

background: blue;

height: 200px;

margin-left: 210px;

}

定宽

自适应

3、margin

自适应

padding: 0;

margin: 0;

}

.left{

background: red;

width: 200px;

height: 200px;

}

.right{

background: blue;

height: 200px;

margin-top: -200px;/*margin*/

margin-left: 210px;

}

定宽

自适应

二、css3弹性盒模型实现自适应

1、上下高度固定中间高度自适应

margin: 0;

padding: 0;

}

body,html{

height: 100%;

}

#contain{

display: flex;

flex-direction: column;/*列垂直方向*/

height: 100%;/*全屏效果该元素及其父元素及html、body height：100%*/

}

#top{

height: 200px;

background: red;

}

#center {

flex: 1;

background: blue;

}

#bottom{

height: 100px;

background: green;

}

你好

你也好

2、左侧宽度固定右侧宽度自适应

* {

margin: 0;

padding: 0;

}

#contain {

display: flex; /*父元素设置该属性*/

}

#left {

width: 100px;

height: 200px;

background: #fff8a8;

margin-right: 10px;

}

#right {

flex: 1; /*所占比例/份数*/

height: 200px;

background: #ff9bad;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。