box | 易学教程

virtualbox 扩容存储

阅读更多关于 virtualbox 扩容存储

本文讲解一种方式：　　第一步：　　　　我们需要将virtual box 设置成全局的环境变量　　第二步：　　　　找到要修改的xxx.vdi文件，通过命令来修改下面操作步骤　　1.设置virtual box 的环境变量　　　　　　　　　　2.修改文件　　　　1.通过cmd 进入要修改xxx.vdi文件的目录下　　　　2.通过下面命令即可 VBoxManage modifyhd 虚拟机vdi文件位置 --resize 扩容量VBoxManage modifyhd D:\linux_tool\nginx_keepalived.vdi --resize 10240 #扩展为10G 　　来源： https://www.cnblogs.com/MrRightZhao/p/11586046.html

百分比布局

阅读更多关于百分比布局

百分比布局，可以实现宽度自适应 <style> .contain{ width: 80%; height: 200px; border: 1px solid #000; margin: 100px auto; } .box{ width: 33.33%; height: 200px; float: left; background-color: lime; } .box:nth-child(2){ background-color: red; } </style> <div class="contain"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> 来源： https://www.cnblogs.com/zhaodz/p/11572637.html

原生javascript 弹出层

阅读更多关于原生javascript 弹出层

BFC、IFC、FFC、GFC

阅读更多关于 BFC、IFC、FFC、GFC

FC（Formatting Context）它是W3C CSS2.1规范中的一个概念，定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC（block formatting context）直译为“块级格式化上下文” W3C原文： Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents. In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The

flex布局笔记整理

阅读更多关于 flex布局笔记整理

flex布局笔记整理了解-webkit-box 利用postcss进行css代码的向后兼容时，display:flex兼容后的代码常会带有display：-webkit-box。部分移动端内核较低，只支持老版本的box布局，不支持flex布局。 box布局是flex布局的前身，与float不同，float超出边界时会自动换行，box和flex不会。 box与flex区别容器部分子元素总宽度超过父元素时： box => 子元素溢出父元素边界 flex => 子元素被挤压查看对比修改排列时的主轴： box => -webkit-box-orient: (horizontal | vertical) flex => flex-direction: (row | column) (效果相同，差异仅是属性名不同) 排列时的顺序: box => -webkit-box-direction: (normal | reverse) flex => flex-direction: (row-reverse | column-reverse) 注： flex的反转效果，以row-reverse为例，是从容器最右边开始排列的，box反转效果是从容器最左边排列的( 查看对比 ) 主轴富余空间管理： box => -webkit-box-pack: /* start: 富余空间在右边 / end

JavaScript 中的 style.top / style.left 不生效

阅读更多关于 JavaScript 中的 style.top / style.left 不生效

在 JS 中使用 .style.top 方法，如下，发现不生效。 var box = document.createElement('div'); box.style.top = 30; 解决：需要添加单位 px、cm 等. var box = document.createElement('div'); box.style.top = 30 + “px”; 来源： https://blog.csdn.net/qq_32539403/article/details/100921996

文本最多两行展示

阅读更多关于文本最多两行展示

// 文本最多两行展示 .text-line-2 { overflow: hidden; text-overflow: ellipsis; word-break: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } 来源： https://www.cnblogs.com/guangzhou11/p/11528194.html

js实现图片局部等比放大

阅读更多关于 js实现图片局部等比放大

我们在浏览例如淘宝等网站的时候，经常能见到这样的效果左边是一张完整的图片，当你的鼠标光标放置在图片上的时候，左边图片会在光标的对应位置产生一个半透明的矩形，在右边会产生一个和左边图片等大的局部放大图。模拟实现放大镜的效果，今天，我就来说说如何使用js实现这样的效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .s_box,.b_box{width:400px;height:300px;position: absolute;top:100px;} .s_box{left:50px;} .s_box img{width: 400px;height: 300px;} .s_box span{position: absolute;left:0;top:0;background: rgba(200,200,200,0.5);display: none} .b_box{left:500px

3、手把手教React Native实战之flexbox布局

阅读更多关于 3、手把手教React Native实战之flexbox布局

flexbox是Flexible Box的缩写，弹性盒子布局主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。按照伸缩流的方向布局伸缩容器有主轴和交叉轴组成！主轴既可以是水平轴，也可以是垂直轴 flexbox目前还处于草稿状态，所有在使用flexbox布局的时候，需要加上各个浏览器的私有前缀，即-webkit -moz -ms -o等 ###伸缩容器的属性 1.display display:flex | inline-flex 块级伸缩容器行内级伸缩容器 2.flex-direction 指定主轴的方向 flex-direction:row（默认值）| row-reverse | column | column-reverse 3.flex-wrap 伸缩容器在主轴线方向空间不足的情况下，是否换行以及该如何换行 flex-wrap:nowrap（默认值） | wrap | wrap-reverse 4.flex-flow 是flex-direction和flex-wrap的缩写版本

Flexbox布局

阅读更多关于 Flexbox布局

Flexbox布局（ Flexible Box 或CSS3 弹性布局），是CSS3中的一种新的布局模式，是可以自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间，收缩内容防止内容溢出，确保元素拥有恰当的行为的布局方式。使用Flexbox来布局更容易，可以使用更少的代码，更简单的方式实现更复杂的布局。它可以实现：如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；可以快速让他们布局在一列；可以方便让他们对齐容器的左、右、中间等；无需修改结构就可以改变他们的显示顺序；如果元素容器设置百分比和视窗大小改变，不用提心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。浏览器兼容性红色代表不支持，绿色代表支持，暗绿色代表部分支持，其中IE10、IE11目前使用中出现了大量的bug，Android4.3只支持老的flexbox规范。可以发现该属性在移动端的使用还是可能的，不过要加上老的规范写法。容器属性（父元素属性）主轴：项目排列方向的轴（可以是水平或者垂直），每一行（列）项目代表一条轴交叉轴：与主轴垂直的轴（可以是水平或者垂直）；可以通过访问 flexBox 测试以下属性 1. display 取值： flex 将对象作为弹性容器显示 inline-flex

订阅 box