CSS布局之flexbox
参考链接：
https://www.cnblogs.com/qingchunshiguang/p/8011103.html
练习代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.container{
background-color: orange;
width:300px;
height:300px;
display:flex;
justify-content:space-between;
align-items: center;
}
.div1{
background-color: red;
width:100px;
height:100px;
}
.div2{
background-color: blue;
width:100px;
height:100px;
}
.div3{
background-color: green;
width:100px;
height:100px;
} </style>
</head>
<body>
<div class="container">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
</div> </body>
</html>
CSS布局之flexbox的更多相关文章
- 还在为垂直居中苦恼？CSS 布局利器 flexbox 轻轻松松帮你搞定
传统的 CSS 布局方式是基于盒模型(它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法),实现时依赖于 block, inline, table, position, float 这些属性, ...
- CSS布局（下）
1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- 解读CSS布局之-水平垂直居
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- 一览css布局标准
回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CS ...
- 响应式布局：Flexbox应用总结
距离上篇文章<布局神器:Flexbox>的发表已有一周时间,转眼这周又到了周五(O(∩_∩)O~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...
- css布局详解（二）——标准流布局（Nomal flow）
css标准流布局(Nomal flow) 一.正常流 这是指西方语言中文本从左向右,从上向下显示,这也是我们熟悉的传统的HTML文档中的文本布局.注意,在非西方的语言中,流方向可能不同.大多数元素都在 ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
随机推荐
- 找工作Java面试 题搜集
面向对象的特征有哪些方面?答:面向对象的特征主要有以下几个方面: 抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注这些行为的 ...
- 20191224 Spring官方文档（启动）
再学Spring 之前看过Spring教学视频,看过<Spring5高级编程>,但是对于Spring始终还是感觉差了一点,应该是底层没有学好,这次再学Spring,就是要将Spring底层 ...
- SpringMvc 整合mybatis项目搭建
1.使用idea创建maven项目 2.在项目src目录下 添加java文件夹 并设置类型为sources,添加resource文件夹 设置为resources 4.修改pom文件 添加引用 < ...
- springboot - 应用实践（3）springboot的核心
1.springboot的启动类与核心注解@SpringBootApplication 2.springboot基本配置 3.springboot自动配置原理
- redis内存满了怎么办？
redis最为缓存数据库,一般用于存储缓存数据,用于缓解数据库压力,但是缓存太多,内存满了怎么办呢.一般有以下几种方法 一.增加内存 redis存储于内存中,数据太多,占用太多内存,那么增加内存就是最 ...
- 腾讯万亿级分布式消息中间件TubeMQ正式开源
TubeMQ是腾讯在2013年自研的分布式消息中间件系统,专注服务大数据场景下海量数据的高性能存储和传输,经过近7年上万亿的海量数据沉淀,目前日均接入量超过25万亿条.较之于众多明星的开源MQ组件,T ...
- 22、nlpir 人工智能
练习介绍 [程序功能] 我们将完成一个和语义识别相关的爬虫程序,输入任意词汇.句子.文章或段落,会返回联想的词汇. [背景信息] 有一个非常牛的处理语言的网站nlpir,上面有非常多的处理语言的功能( ...
- CNN与图像高级应用
一.图像识别与定位 思路1:视作回归 4个数字,用L2 loss/欧氏距离损失(x,y,w,h)这四个数都是连续值 思路2:借助图像窗口 二.物体识别 0.图像识别与定位: (1)Classifica ...
- tab栏切换效果案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 2019-11-29-Roslyn-使用-Directory.Build.props-文件定义编译
title author date CreateTime categories Roslyn 使用 Directory.Build.props 文件定义编译 lindexi 2019-11-29 08 ...