CSS学习 - 盒模型&flex

css学习

盒子模型

  • padding:即内边距,围绕着内容(比如段落)的空间。
  • border:即边框,紧接着内边距的线。
  • margin:即外边距,围绕元素外部的空间。

块元素 -- 独占一行(块) 内联元素 -- 没有干扰的话。会在前面的元素后面

flex 模型

主轴就是水平轴,交叉轴就是垂直轴

  • 主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为** main start** 和** main end**。
  • 交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和** cross end**。
  • 设置了 display: flex 的父元素(在本例中是 <section>)被称之为 flex 容器(flex container)。

** display: flex 使下级元素变成弹性盒子,垂直平均切分 本来是这样子的:

我们需要给这些 flexible 元素的父元素 display 设置一个特定值。在本例中,我们想要设置 <article> 元素,因此我们给 <section>(变成了 flex 容器)设置 display:

flex-wrap: wrap 标识弹性盒子可以换行,换行的标准是下级元素设置flex: 200px来决定的 ,弹性盒子里面的元素最小是200px flex:1 直接接数值的,表示比例,四个元素,全部都是1的话,表示四等分,第三个是2(1 1 2 1)表示第三个元素占据 2/4的空间 flex: 1 200px 设置了一个最小值。然后剩余空间再去计算比例 常用css:

{
        display: flex;
        /* flex-direction: row;
        flex-wrap: wrap; */
        flex-flow: row wrap; -- row:水平;column:垂直;wrap :换行
  			align-items: center;  -- 交叉轴,垂直方向
        justify-content: space-around; -- 主轴,水平方向
      }

浮动

width: 90%;
max-width: 900px;

在宽度道道900之前,占据90%的宽度,当超过了900px就固定900了。。。 换句话说,90%这个是动态的,但最大跨度为900px

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 性能测试 -- 实际问题

    现象: 自动化云主机(10.199.146.xx )上的osp-cart服务过一段时间会自动停掉 分析过程: 1、通过top命令,查看整理的资源情况,发现osp...

    千往
  • php 换行符问题

    公司有个业务需要用户上传csv文件,里面的内容以逗号(,)分隔 ,然后每一行代表一条数据,业务代码读取数据根据业务规则入库。 有用户反馈,自己上传的csv文件“...

    千往
  • play framework - 初识

    研发代码框架是play-framework框架,想看代码的话,需要学习下play框架。IDE工具的话之前一直用的idea,所以本文涉及的idea play的配置...

    千往
  • CSS:10分钟搞定Flex布局

    Flexbox Layout(弹性盒子布局),是CSS3的一种新型布局模式,给很多CSS老大难问题提供了优雅的解决方案(例如:垂直居中

    WEBJ2EE
  • CSS6:flex布局

    display inline-block主要用来做横向的布局。 用分离负maigin用来产生位移。

    代码之风
  • 10分钟理解CSS3 FlexBox

    设置父元素的display属性为flex,则子元素都变成flex item,由此可以控制子元素的排列方式、尺寸、间距等;

    MudOnTire
  • Vue.js学习笔记(5)

    容器默认两个轴 main axis:水平主轴 cross axis:垂直交叉轴

    程序员不务正业
  • 【融职培训】Web前端学习 第2章 网页重构15 flex布局

    此前我们制作的所有网页都是基于盒子模型和浮动布局完成的,本节我们一起学习弹性布局(或者叫弹性盒子布局),这是一种更先进的布局方式,可以让网页布局更简洁,更易于维...

    学习猿地
  • Web前端学习 第2章 网页重构15 flex布局

    此前我们制作的所有网页都是基于盒子模型和浮动布局完成的,本节我们一起学习弹性布局(或者叫弹性盒子布局),这是一种更先进的布局方式,可以让网页布局更简洁,更易于维...

    学习猿地
  • 弹性(Flex)布局的使用

    最近我参与实施的两个项目中,一个页面交互复杂,而另一个相对传统,两个项目相比之下凸显出了页面布局样式的时间占比不可忽视,使用了弹性布局代码量精简了不少。

    嘉为科技

扫码关注云+社区

领取腾讯云代金券