flex是一个灵活性强的布局方式,它能够很好的控制内部元素的宽度,高度或者剩余的空间部分,来适应不同的显示设备和不同的屏幕尺寸,而真正达到一种自适应效果. flex布局与常规布局截然不同,常规布局虽然在页面上显示很好,但对于大而复杂的项目,在方向改变,自适应大小,伸展和收缩等方面缺乏灵活性,flex最适合作为应用程序的组件,小规模布局使用;网格布局适用大规模布局. flex整个模块不只是一个属性,它涉及很多东西以及一系列属性.设置为flex标签的被称为flex容器,而这个容器内的子节点元素称为f…

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type=&qu…

CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简称为Flex. 1.如何才能让DIV的宽度跟随浏览器窗口变化而变换呢?在CSS3中我们只要使用一个box-flex属性,使得我们的盒布局变成弹性盒布局即可,兼容性写法: -webkit-box-flex(safari浏览器.chrome浏览器) -moz-box-flex(firefox浏览器) 链…

flexbox详解 flexbox的出现是为了解决复杂的web布局,因为这种布局方式很灵活.容器的子元素可以任意方向进行排列.此属性目前处于非正式标准. flex布局模型不同于块和内联模型布局,块和内联模型的布局计算依赖于块和内联的流方向,而flex布局依赖于flex directions.简单的说:Flexbox是布局模块,而不是一个简单的属性,它包含父元素(flex container)和子元素(flex items)的属性.   属性解析 链接:https://cruxf.github.i…

新的锁定类提高了同步性 —— 但还不能现在就抛弃 synchronized JDK 5.0为开发人员开发高性能的并发应用程序提供了一些很有效的新选择.例如,java.util.concurrent.lock 中的类 ReentrantLock 被作为 Java 语言中synchronized 功能的替代,它具有相同的内存语义.相同的锁定,但在争用条件下却有更好的性能,此外,它还有 synchronized 没有提供的其他特性.这是否意味着我们应当忘记synchronized ,转而只用 Reen…

calc()能做什么? calc()可以通过计算得到元素的宽度或者高度,让我们很容易进行自适应布局. 你可以为一个div元素,使用百分比.em.px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素div的宽度值到底是多少,而把这个任务交由浏览器去计算. calc()语法 calc()语法非常简单,就像我们小时候学加 (+).减(-).乘(*).除(/)一样,使用数学表达式来表示: .elm { width: calc(expres…

box-flex:也就是让子容器针对父容器的宽高属性依照一定的规则来划分 Eg: html代码: <div class="wrap"> <div class="box1">01</div> <div class="box2">02</div> <div class="box3">03</div> </div> CSS样式: <…

什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替. 这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一行显示过长或者自动换行.可是有的时候我们就想在固定宽度的一行中显示,如果多出的部分那就用点点点代替,这样就不会撑乱表格了.那么该如何做呢? 一般来说我们会用到如下属性 /*溢出部分样式*/ .txt-ell { white-space:nowrap; //强制在一行显示 overflow:hidde…

columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列的宽度:[ column-count ]:设置或检索对象的列数. css代码: body{font:14px/1.5 georgia,serif,sans-serif;} p{;padding:5px 10px;background:#eee;} h1{margin:10px 0;font-size…

1.等高布局 1.1 代码 等高布局是指子元素在父元素中高度相等的布局方式 <div class="father"> <div class="f1"> 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世…