box | 易学教程

BFC

阅读更多关于 BFC

今天想给大家分享一下有关于BFC的一些知识，作为我上个星期在逆战班所学到的知识总结。 BFC是H5里一个非常重要的知识点，我们来简单了解一下。什么是BFC 首先：什么是BFC呢？ BFC是Block formatting context的缩写，直译为“块级格式化上下文”。简单来说，就是它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC的布局规则那么说完什么是BFC，我们再来简单说一下BFC的布局规则，这里有六条，我来简单介绍一下： 1：内部的Box会在垂直方向，一个接一个地放置。如图： 2：Box垂直方向的距离由margin决定。属于同一个BFC里的两个相邻的Box的margin会发生重叠。如图: 上面这张图，我给上面的box设置了mrgin-bottom:50px;下面的box设置了margin-top:50px;但是他们之间的间距就只有50px；注意：重叠后会以两个margin里的最大值来显示。 3：每个元素的margin box的左边，与包含块border box的左边相接触。如图： 4：BFC的区域不会与float box 重叠。如图：上图左右两边的box全部是浮动元素，不会覆盖中间的box。 5：BFC就是页面上的一个隔离的独立容器

未知高度的图片垂直居中方法总结

阅读更多关于未知高度的图片垂直居中方法总结

图片的宽度和高度是未知的，没有一个固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中，想想感觉还是挺麻烦的，由于最近的项目可能会用到这个方案，所以把一些常用的方法都收集整理了一下。下图是理想中的效果图，外部容器的宽度和高度是固定的，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。但是实际中实现的效果并不是很完美，由于各浏览器的解析都各不相同，所以各浏览器都会有1px-3px的偏差。演示： http://www.websjy.com/bbs/viewthread.php?tid=8534 方法一（XHTML 1.0 transitional）：该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。 HTML结构部分： <div id="box"> <span><img src="images/demo.jpg" alt=""></span> </div> CSS 样式部分： <style type="text/css"> #box{ width:500px;height:400px;

单行省略 / 多行省略

阅读更多关于单行省略 / 多行省略

多行省略 { display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; white-space: normal;} 2.单行省略 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 来源： CSDN 作者： Sword_meaning 链接： https://blog.csdn.net/Sword_meaning/article/details/104542657

display:box和display:flex属性介绍

阅读更多关于 display:box和display:flex属性介绍

BFC的基础理解及应用场景

阅读更多关于 BFC的基础理解及应用场景

　　最近学习了BFC，开始学习的时候，单纯看概念，有种云里雾里的感觉，字都认识，凑一起啥意思大致也知道，但是具体有什么用呢？这个就有点迷迷糊糊的，经过老师的讲解，以及自己课后的代码实验与总结，就拨云见日了，在这里分享自己对BFC的一些理解。 BFC的概念：　　BFC 即（Block Formatting Context）块级格式化上下文，指一个独立的块级渲染区域，只有块级盒子（box）参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。　　　　与之对应的还有IFC、GFC、FFC。 BFC的形成：　　 1、根元素 html标签就是一个bfc 　　 2、float的值不为none 　　3、overflow的值不为visible 　　 4、display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex 　　5、position的值为absolute或fixed BFC的特性：　　 1、Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠　　2、计算BFC的高度时，浮动元素也参与计算　　3、BFC的区域不会与float box发生重叠　　4、BFC内部的Box会在垂直方向，一个接一个的放置。　　5、每个元素的margin

rxjs6 拖拽接龙

阅读更多关于 rxjs6 拖拽接龙

效果参考其他博客, 使用rxjs6实现拖拽接龙 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./rxjs.umd.js"></script> <style> .box { width: 50px; height: 50px; background: deepskyblue; position: absolute; left: 0; right: 0; border-radius: 50%; } </style> </head> <body> <div class="box move" style="background: deepskyblue;z-index: 10" id="box"></div> <div class="box move" style="background: red;z-index: 9" ></div> <div class="box move" style="background: orange;z-index: 8"></div> <div class="box move" style="background: yellow;z-index: 7"></div> <div class="box move

对BFC的深层理解

阅读更多关于对BFC的深层理解

BFC（Block Formatting Context）块级格式化上下文注意：BFC首先是块，其次需要具备下面的条件之一才可以（通俗来说，BFC就好比一所985或者211的高校，想要成为985或者211的高校，它是有前提条件的，首先他得是一所大学，不能拿一个小学来说，就好比BFC得先是块，才是BFC；当满足了前提条件，再需要具备其他的条件才可以。）在正式说BFC具体内容之前，先说一下Box和Formatting Context是个什么东西： Box ：大家应该都不陌生，Box是CSS布局的对象和基本单位，直观点说就是一个页面是由很多个Box组成的。不同类型的Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式来渲染。常见盒子类型： block-level box：display 属性为block, list-item, table 的元素，会生成block-level box。并且参与block fomatting context。 inline-level box：display属性为 inline, inline-block, inline-table 的元素，会生成inline-level box。并且参与inline fomatting context。 run-in box：CSS3中新增的

未知高度的图片垂直居中

阅读更多关于未知高度的图片垂直居中

未知高度的图片垂直居中（转自：http://stylechen.com/img-middle.html）图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。但是实际在浏览器中实现起来的效果并不是很完美，由于各浏览器的解析都各不相同，所以在各浏览器都会有1px-3px的偏差。方法一：该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为 display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。 HTML结构部分： 1 <div id= "box" > 2 <span><img src= "images/demo.jpg" alt= "" /></span> 3 </div> CSS样式部分： 01 <style type= "text/css" > 02 #box{ 03 width:500px;height:400px; 04 display:table; 05

win10系统在执行“ vagrant box add centos7 vagrant-centos-7.box”添加box时，报错“Vagrant failed to initialize at a very early stage: Failed to locate the powershell executable on the available PATH. ”

阅读更多关于 win10系统在执行“ vagrant box add centos7 vagrant-centos-7.box”添加box时，报错“Vagrant failed to initialize at a very early stage: Failed to locate the powershell executable on the available PATH. ”

一：我们为什么需要用这玩意我们在开发中经常会面临的问题：环境不一致，有人用Mac有人用Windos还有几个用linux的，而我们的服务器都是linux。在我本地是可以的啊，我测了都，没有问题啊，然后看着上线之后的500错误懵比。It works on my pc . 二：vagrant是什么东西 Vagrant是一个基于Ruby的工具，用于创建和部署虚拟化开发环境。它使用Oracle的开源VirtualBox虚拟化系统，使用 Chef创建自动化虚拟环境。-------------------来自百度百科。直白的说是一键生成特定虚拟机的工具。详细的我们下边会说。三：所需的软件： 1、virtualBox 可以到VirtualBox的官网进行下载： https://www.virtualbox.org/wiki/Downloads 2、vagrant 可以到vagrant官网下载 https://www.vagrantup.com/downloads.html 这个下载特别慢，这里放出百度云的链接链接: https://pan.baidu.com/s/1Toy3SRRACOWa8g0ybUHD8Q 密码: puwm 3、vagrant box vagrant部署环境，需要一个box文件。如果在公司里面，可以从他们那里拷一个box文件安装

css3 box-sizing属性

阅读更多关于 css3 box-sizing属性

box-sizing属性有3个值：content-box（default），border-box，inherit。 content-box：border和padding不计算入width之内 inherit：继承于父级 <style type="text/css"> div{ height:100px; width: 100px; padding:10px; border: 5px solid #000000; color:red; font-size: 14px; text-align: center; } .content-box{ box-sizing: content-box; } .border-box{ box-sizing: border-box; } </style> 来源： https://www.cnblogs.com/bruce-gou/p/5628324.html

订阅 box