浮动+flex布局

一.浮动

1.介绍

2.效果

<style>

.one{

width: 100px;

height: 100px;

background-color: red;

float: left;

}

.two{

width: 200px;

height: 200px;

background-color: blue;

float: right;

}

</style>

</head>

<body>

<div class="one">爱</div>

<div class="two">keadasf</div>

</body>

如果两个都是left,则效果为:

!!!如果只给一个div加float属性的话,会导致两个盒子重叠!!!

例如将.two中的float属性去掉,事实上只有.one才被系统承认

3.特点

顶对齐

具备行内块特点

脱离标准流

父级宽度不够,子级会浮动换行

4.案例

产品区域布局

4.1.效果

4.2代码

<style>

*{

margin: 0;

padding: 0;

}

li{

list-style: none;

}

.product{

margin: 50px auto;

width: 1229px;

height: 628px;

background-color: pink;

}

.left{

width: 234px;

height: 628px;

background-color: red;

float: left;

}

.right{

width: 978px;

height: 628px;

background-color: blue;

float: left;

}

.right li{

margin-bottom: 14px;

margin-right: 14px;

width: 234px;

height: 300px;

background-color: orange;

float: left;

}

.right li:nth-child(4n){

margin-right: 0;

}

</style>

</head>

<body>

<div class="product">

<div class="left"></div>

<div class="right">

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</div>

</div>

</body>

</html>

4.3总结

(1)父级宽度不够,浮动的盒子会掉下来

(2)可以利用无序列表的:nth-child()取消部分盒子的内外边框

(3)版心居中 margin:上下 auto (左右设置为auto即可)

二.清除浮动

1.介绍

<style>

*{

margin: 0;

padding: 0;

}

.product{

margin: 20px auto;

width: 900px;

height: 600px;

background-color: pink;

}

.left{

width: 200px;

height: 600px;

background-color: red;

float: right;

}

.right{

width: 700px;

height: 600px;

background-color: blue;

float: left;

}

.box{

height: 100px;

background-color: black;

}

</style>

</head>

<body>

<div class="product">

<div class="left"></div>

<div class="right"></div>

</div>

<div class="box"></div>

正常情况

当父级product没设置高度时:

product高度化为0,底下的box直接上移,影响布局

2.清除浮动方法

2.1额外标签法

在父元素内容的最后添加一个块元素,并设置CSS属性 clear:both (其中除了both还有left,right指去除xx方向的浮动影响)

.clearfex{

clear: both;

}

........

<div class="product">

<div class="left"></div>

<div class="right"></div>

<div class="clearfex"></div>

</div>

<div class="box"></div>

2.2单伪元素法

.clearfex::after{

content: ""; /*伪元素法必须要有content属性,否则无法生效*/

display: block;

clear: both;

}

..........

<div class="product clearfex"> /*top要调用clearfex*/

<div class="left"></div>

<div class="right"></div>

</div>

<div class="box"></div>

2.3双伪元素法(推荐)

/*其中before是为了解决外边距塌陷问题,子级设置的外边距可能会将父级下拉)*/

.clearfex::before,

.clearfex::after{

content: "";

display: table;

}

.clearfex::after{

clear: both;

}

............

<div class="product clearfex">

<div class="left"></div>

<div class="right"></div>

</div>

<div class="box"></div>

2.4 overflow属性

剪掉超出父级的选项

overflow:hidden

2.5效果

自动撑开高度,高度为子级中最大的高度。

三.flex布局(常用)

1.介绍

2.创建flex容器(display:flex)

.box{

/* 将盒子变为弹性布局 */

display: flex;

justify-content: space-between;

/* 如果去掉height,高度根据内容浮动,不会脱标 */

height: 300px;

border: 1px solid black;

}

关于拉伸和挤压:如果子级设置了宽高,由于较多子级,则自动挤压子级的原有宽度。如果子级没有设置高度,则自动将子级拉伸为与父级盒子同高。

3.主轴对齐 (justify-content)

常用后四个属性值

4.侧轴对齐方式

!!!注意:一个是全部,一个是单独处理

!!!stretch必须不设置弹性盒子的高度才能实现拉伸

!!!控制单个盒子使用伪类选择器:

.box div:nth-child(2){

align-self: center;

}

5.修改主轴方向(flex-direction)

!!!重点记住column,如果主轴方向变化,则侧轴也会跟着变主侧两轴始终垂直

6.弹性伸缩比(flex)

.box div:nth-child(2){

flex: 1;

}

弹性盒子2占父级除13外的尺寸一大份。

.box div:nth-child(2){

flex: 1;

}

.box div:nth-child(3){

flex: 3;

}

除去盒子1,弹性盒子23分别占剩余父级尺寸的1/4和3/4。

7.弹性换行(flex-wrap)

8.弹性行对齐(align-content)

!!!弹性行对齐对单行弹性盒子不生效,所以记得换行flex-wrap

四.案例

抖音解决方案

1.效果

2.代码

大体思路为:

1.清除格式

2.大盒子嵌套四个小盒子,四个小盒子可使用无序列表(无序列表属于行标签,记得转换为弹性盒子)

3.设置大盒子:盒子大小,盒子版心位置,边框线,是否圆角等性质。

4.无序列表转弹性盒子,调整各盒子在主轴对齐方式,换行,行对齐方式,内外边距等性质。

5.四个小盒子设置宽高,里面分两个小盒子,一个图片一个文本,转为弹性两个小盒子。

6.设置两个弹性小盒子在主侧轴的分布方式,盒子背景颜色等。

7.单独设置两盒子里面的图片格式和文字大小等性质。

<title>抖音解决方案</title>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

li{

list-style: none;

}

/*以上为清除格式*/

.box{

margin: 200px auto;

border-radius:20px;

width: 800px;

height: 400px;

border: 2px solid black;

}

.box ul{

display: flex;

justify-content: space-between; /*调整主轴方向对齐方式*/

flex-wrap: wrap; /*弹性盒子换行*/

align-content: space-around; /*行对齐*/

padding: 30px 20px 30px 20px;

height: 400px;

}

.box li{

width: 360px;

height: 150px;

display: flex;

justify-content: center;

align-items: center;

background-color: white;

}

.box .pic1{

margin-right: 15px;

}

.box .text1 h4{

font-size: 18px;

line-height: 30px;

}

.box .text1 p{

font-size: 15px;

color: #666;

}

</style>

</head>

<body>

<div class="box">

<ul>

<li>

<div class="pic1">

<img src="./抖音解决方案1.png" alt="">

</div>

<div class="text1">

<h4>一键发布多域</h4>

<p>发布头条i需要官网确认,比如新闻</p>

</div>

</li>

<li>

<div class="pic1">

<img src="./抖音解决方案2.png" alt="">

</div>

<div class="text1">

<h4>一键发布多域</h4>

<p>发布头条i需要官网确认,比如新闻</p>

</div>

</li>

<li>

<div class="pic1">

<img src="./抖音解决方案3.png" alt="">

</div>

<div class="text1">

<h4>一键发布多域</h4>

<p>发布头条i需要官网确认,比如新闻</p>

</div>

</li>

<li>

<div class="pic1">

<img src="./抖音解决方案4.png" alt="">

</div>

<div class="text1">

<h4>一键发布多域</h4>

<p>发布头条i需要官网确认,比如新闻</p>

</div>

</li>

</ul>

</div>

</body>

相关推荐
希忘auto3 小时前
详解Redis的常用命令
redis·1024程序员节
yaosheng_VALVE19 小时前
探究全金属硬密封蝶阀的奥秘-耀圣控制
运维·eclipse·自动化·pyqt·1024程序员节
dami_king19 小时前
SSH特性|组成|SSH是什么?
运维·ssh·1024程序员节
一个通信老学姐6 天前
专业125+总分400+南京理工大学818考研经验南理工电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节
sheng12345678rui6 天前
mfc140.dll文件缺失的修复方法分享,全面分析mfc140.dll的几种解决方法
游戏·电脑·dll文件·dll修复工具·1024程序员节
huipeng9267 天前
第十章 类和对象(二)
java·开发语言·学习·1024程序员节
earthzhang20217 天前
《深入浅出HTTPS》读书笔记(19):密钥
开发语言·网络协议·算法·https·1024程序员节
爱吃生蚝的于勒8 天前
计算机基础 原码反码补码问题
经验分享·笔记·计算机网络·其他·1024程序员节
earthzhang20218 天前
《深入浅出HTTPS》读书笔记(20):口令和PEB算法
开发语言·网络协议·算法·https·1024程序员节
一个通信老学姐8 天前
专业140+总分410+浙江大学842信号系统与数字电路考研经验浙大电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节