文档章节

布局:box-sizing ,clear float,flex

名字已被取
 名字已被取
发布于 2016/03/31 23:31
字数 807
阅读 25
收藏 1

清除浮动

.clearfix{
    &:after{        clear:both;        height:0;        content:'';        display: table;    
    }
}

说明:

  • content: 用处也很大,可以用来添加一些文字提醒。

  • display: table,flex 都可以,让文档继续按照正常的盒模型渲染。

  • 伪类用处以后在总结example1

给父一级的添加

overflow: hidden;

box-sizing re.

盒模型:border,padding,margin

box-sizing: border-box, content-box

content-box(默认): 元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度/高度(content width/height);

border-box : 内容宽度/高度=width/height-border-padding

example

开发中的用处:

  • re bt set reset

*{
  .box-sizing(border-box);
}
*:before,
*:after {
  .box-sizing(border-box);
}
  • 去除因为padding与border带来的溢出

  • 重置 input

flexbox 布局

re. 中文,
re.2,
re. 英文

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex-grow: 控制扩展比例 数值(不可为负)

flex-shrink: 控制收缩比例 数值(不可为负)

flex-basis: auto | <'width'> 基础宽度

可用空间 =(容器大小 - 所有相邻项目flex-basis总和);
每项伸缩大小 = 伸缩基准值 + ((可用空间 / 所有相邻项目flex-grow总和) x 此项的flex-grow值);

这个公式有待考究

常用的flex设置和他的意义

flex: 0 auto / flex: initial

this is equivalent to flex: 0 1 auto, which is the initial value. This value sizes the item based on the width/height properties. (If the item’s main size property computes to auto, this will size the flex item based on its contents.) Makes the flex item inflexible when there is positive free space, but allows it to shrink to its min-size when there is insufficient space.

flex: auto

This is equivalent to flex: 1 1 auto. This value sizes the item based on the width/height properties, but makes them fully flexible, so that they absorb any free space along the main axis. If all items are either flex: auto, flex: initial, or flex: none, any positive free space after the items have been sized will be distributed evenly to the items with flex: auto.

flex: none

This is equivalent to flex: 0 0 auto. This value sizes the item according to the width/height properties, but makes the flex item fully inflexible. This is similar to initial, except that flex items are not allowed to shrink, even in overflow situations.

flex: <positive-number>

This value is equivalent to flex: <positive-number> 1 0%. This value makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

  • flex-direction

    flex-direction: row | row-reverse | column | column-reverse

    控制显示的方向

  • flex-wrap

    flex-wrap: nowrap | wrap | wrap-reverse

    控制是否多行显示

综合体 flex-flow: <'flex-direction'> <'flex-wrap'>

  • justify-content

    justify-content: flex-start | flex-end | center | space-between | space-around

主轴对齐方式:指定伸缩项目沿主轴对齐方式 (水平方向)

  • align-items: flex-start | flex-end | center | baseline | stretch

    align-items: flex-start | flex-end | center | baseline | stretch

    侧轴对齐方式:指定伸缩项目沿着侧轴对齐方式  (垂直方向)

  • align-content

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;

当伸缩容器的侧轴还有多余空间时,align-content属性可以用来调准伸缩行在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的justify-content属性类似。

请注意本属性在只有一行的伸缩容器上没有效果。只有多行的伸缩容器才会在侧轴上有多余的空间以供对齐,因为仅包含一行的伸缩容器中,唯一的一行会自动伸展填充全部的空间。

  • align-self

    align-self: auto | flex-start | flex-end | center | baseline | stretch

    控制单个条目的样式布局

+ order 控制显示的顺序


© 著作权归作者所有

名字已被取
粉丝 3
博文 44
码字总数 4065
作品 0
杭州
网页/平面设计
私信 提问
好程序员web前端分享CSS3弹性盒

好程序员web前端分享CSS3弹性盒 一、盒模型 box-sizing box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 box-sizing box-sizing 属性允许您以特定的方式定义匹配某个区域的特...

好程序员IT
05/07
11
0
CSS3 Flex布局(伸缩布局盒模型)学习

https://www.cnblogs.com/sxz2008/p/6635196.html 实例:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html CSS2定义了四种布局:块布局、行内布局、表格布局盒定位布局。 CSS3引入...

壹峰
2018/08/08
70
0
使用 Flex 布局与其他普通布局的简单对比

最近使用 flex 布局来做各种居中真的带来了不少方便,现在来总结一下平时的普通布局是怎样使用 flex 布局来实现一样的效果。 一、左右 1:1 布局 布局: 利用 float 属性 在使用 flex 之前,实...

Gwokhov
2018/12/08
0
0
CSS3 display:flex和display:box的区别

display:box; 是老语法,display:flex;是新语法,二者还有以下不同:与子元素 display 方式的相关性不同display:box; 作用下,如果子元素是 block 的,竖着排,如果子元素是 inline、inline-...

莫西摩西
2018/04/26
0
0
Flexible Box 布局与小程序开发

Flexible Box 布局与小程序开发 参考资料: 1.A Complete Guide to Flexbox BY CHRIS COYIER 2.Flex 布局教程:语法篇 3.Flex 布局教程:实例篇 4.A Visual Guide to CSS3 Flexbox Propertie......

坚果jimbowhy
2018/05/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

zk服务预启动和启动选举过程

QuorumPeerMain类public static void main(String[] args) { QuorumPeerMain main = new QuorumPeerMain(); try { main.initializeAndRun(args); } catch (Illega......

writeademo
27分钟前
5
0
深究递归和迭代的区别、联系、优缺点及实例对比

http://blog.csdn.net/laoyang360/article/details/7855860 http://www.zhihu.com/question/20278387 深究递归和迭代的区别、联系、优缺点及实例对比 1.概念区分 递归的基本概念:程序调用自身...

slagga
29分钟前
4
0
基于SOM-TL6678核心板而研发的TL6678-EasyEVM开发板硬件说明书

TL6678-EasyEVM是广州创龙基于SOM-TL6678核心板而研发的一款多核高性能DSP开发板。开发板采用核心板+底板方式,底板采用沉金无铅工艺的四层板设计,尺寸为200mm*106.65mm,它为用户提供了SOM...

Tronlong创龙
33分钟前
3
0
分别在有网和无网状态下批量安装python库

## 连网状态下,批量安装python库查看当前python环境下已安装的库包版本查看命令:pip freeze"""alabaster==0.7.10anaconda-client==1.6.3anaconda-navigator==1.6.2anaconda-projec......

KYO4321
36分钟前
3
0
fiddler、Charles-断点

一、添加Charles断点 1、用Charles抓包发起一次接口请求 2、对要打断点的接口右键,选择【Breakpoints】 二、Charles断点设置 1、点击Charles菜单-【Proxy】-【Breakpoint...】,此时会弹出【...

果树啊
36分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部