(本篇内容代表本人理解,如有错误请指出!)

box-sizing

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

/* 关键字 值 */
box-sizing: content-box;
box-sizing: border-box; /* 全局 值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

content-box

        <style>
.cen{
width:500px;
height:250px;
border: 5px solid red;
box-sizing:content-box;
background-color: darkcyan;
padding: 0 50px
}
</style>
</head>
<body>
<div class="cen"> width 和 height 属性包括内容,内边距和边框,但不包括外边距。</div>
</body>

上图以及代码可以看出box-sizing值为content-box的时候,你所设的宽度而不是实际宽度了,而实际宽度是:width(所设置的宽度)+border+padding

border-box

        <style>
.cen{
width:500px;
height:250px;
border: 5px solid red;
box-sizing: border-box;
background-color: darkcyan;
padding: 0 10%
}
</style>
</head>
<body>
<div class="cen"> width 和 height 属性包括内容,内边距和边框,但不包括外边距。</div>
</body>

从上图以及代码可以看出box-sizing的值为border-box的时候,设置的宽度已经包含border+padding+width

详细内容请查看MDN

Flex布局

任何一个容器以及行内元素都可以使用Flex布局。

.box {
display:flex
}

容器的6个属性:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction:决定主轴的方向

        <style>
body{
display: flex;
flex-direction: row;
}
div{
width: 100px;
height:50px;
background-color: yellow;
margin: 20px
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>

<style>
body{
display: flex;
flex-direction: row-reverse;
}
div{
width: 100px;
height:50px;
background-color: yellow;
margin: 20px
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>

这里只演示2个属性值,一下是各值得含义:

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

flex-wrap  属性定义,如果一条轴线排不下,如何换行。

它有3个值 当值为nowrap时不换行,也是默认值。

<style>
body{
display: flex;
flex-wrap: nowrap
}
div{
width: 100px;
height:50px;
background-color: yellow;
margin: 20px
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

nowrap(默认):不换行。

wrap:换行,第一行在上方。

wrap-reverse:换行,第一行在下方。

flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

举个例子;

      <style>
body{
display: flex;
flex-flow: row-reverse wrap
}
div{
width: 100px;
height:50px;
background-color: yellow;
margin: 20px
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

justify-content属性定义了项目在主轴上的对齐方式。

有五个属性值

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

列举一个居中的例子:

<style>
body{
display: flex;
justify-content: center
}
div{
width: 100px;
height:50px;
background-color: yellow;
margin: 20px
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>

align-items属性定义项目在交叉轴上如何对齐。

有五个属性值:

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

举一个baseline的例子

 <style>
body{
display: flex;
align-items: baseline
}
div{
width: 200px;
height:50px;
background-color: yellow;
margin: 20px
}
</style>
</head>
<body>
<div style="font-size:5px">javaScript 1</div>
<div style="font-size:25px">javaScript 2</div>
<div style="font-size:35px">javaScript 3</div>
</body>
flex-start

flex-end

center

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

列举居中的例子:

        <style>
body{
display: flex;
width:100%;
height:300px;
border: 1px solid cadetblue;
align-content: center;
flex-wrap: wrap
}
div{
width: 200px;
height:50px;
background-color: yellow;
margin: 20px
}
</style>
</head>
<body> <div style="font-size:5px;height:50px">javaScript 1</div>
<div style="font-size:25px;height:90px">javaScript 2</div>
<div style="font-size:35px;height:70px">javaScript 3</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

Flex弹性布局以及box-sizing的更多相关文章

  1. 记一下flex弹性布局

    flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...

  2. flex弹性布局的基本介绍

    最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...

  3. css进阶之二:flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

  4. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  5. flex弹性布局心得

    概述 最近做项目用flex重构了一下网页中的布局,顺便学习了一下flex弹性布局,感觉超级强大,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Solved by Flexbo ...

  6. flex弹性布局属性详解!

    详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...

  7. java基础之Flex弹性布局、JSP错误处理以及Log4J

    一.Flex弹性布局 1.产生的比较晚,目前在移动网页开发中可以使用,而且逐渐成为主流. 在桌面网页开发中使用的比较少(主要是桌面浏览器的兼容性问题更加严重) 2.开启方法: 在容器标签上加上 dis ...

  8. flex弹性布局,好用

    一直不太喜欢自己布局前端页面,都是扒别人的页面 ,最近在练习小程序,页面无处可扒,只有自己布局 发现flex弹性布局真好用,布局起来很简单,实现的效果也很好,赞 以后可以自己写一点前端了,哈哈

  9. flex弹性布局学习笔记

    前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...

  10. flex弹性布局

    Flex 布局教程:语法篇  原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 作者:  ...

随机推荐

  1. SpringBoot整合Netty并使用Protobuf进行数据传输(附工程)

    前言 本篇文章主要介绍的是SpringBoot整合Netty以及使用Protobuf进行数据传输的相关内容.Protobuf会简单的介绍下用法,至于Netty在之前的文章中已经简单的介绍过了,这里就不 ...

  2. Spring Boot配置拦截器及实现跨域访问

    拦截器功能强大,能够深入方法前后,常应用于日志记录.权限检查和性能检测等,几乎是项目中不可或缺的一部分,本文就来实现Spring Boot自定义拦截器的配置. 理论指导 问:Spring Boot怎么 ...

  3. asp.net easyui 动态绑定下拉框

    前台: <title>标题</title> <link href="EasyUi_v1.3.4/easyui/themes/default/easyui.css ...

  4. Python3 日期与时间戳相互转换

    开发中经常会对时间格式处理,对于时间数据,比如2019-02-28 10:23:29,有时需要日期与时间戳进行相互转换,在Python3中主要用到time模块,相关的函数如下: 其中unix_time ...

  5. Vue-zTree

    在vue中引入zTree,和引入其他组件类似,首先在main.js里将以下3个js引入: import "./js/jquery-3.3.1.min.js";import &quo ...

  6. Manacher's Algorithm(马拉车算法)

    ## 背景 该算法用于求字符串的最长回文子串长度. ## 参考文章 >[最长回文子串——Manacher 算法](https://segmentfault.com/a/1190000003914 ...

  7. Eclipse4JavaEE配置Tomcat运行环境

    如果我们想搭一个网站,我们可以使用Eclipse for JavaEE IDE进行开发. 初次使用需要配置网站的运行环境,可以去Apache官网下载Tomcat 8.5或Tomcat 9的版本 然后打 ...

  8. PHP接口APP接口

    使用PHP来生成APP接口数据是非常简单的,如果你还不了解PHP没有关系,只需要看过PHP的基本语法,再看本示例就可以了. APP接口一般都是json格式(当然也有少数xml格式)遵循restful规 ...

  9. 如何搭建基于C#和 Appium 的 Android自动测试环境

    本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 如果想做手机端的自动化测试,Appium是首选的测试框架,因为网上使 ...

  10. JMeter 接口测试-if控制器

    JMeter 接口测试-if控制器 ​ 使用场景: 当业务场景是用户登录才能支付操作, 不登录点击支付, 页面会跳转到登录页面. 对于接口也是这样, 一个接口需要执行前, 需要有前提条件, 比如0状态 ...