51dev.com IT技术开发者社区

51dev.com 技术开发者社区

弹性盒子

CSS3弹性盒子(Flex Box)

CSS3弹性盒子(Flex Box)

CSS3弹性盒子(FlexBox)一、容器的属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 1、flex-direction属性决定主轴的方向(即项目的排列方向)flex-direction:row|row-...

基于淘宝弹性布局方案lib-flexible的问题研究

基于淘宝弹性布局方案lib-flexible的问题研究

上篇文章《淘宝弹性布局方案lib-flexible实践》结合一个简单的实例,说明了lib-flexible的基本用法,但是lib-flexible的这种适配方式在适配的时候会修改viewport的initial-scale,导致viewport的width不等于devicewidth,使得那些根据width编写的med...

淘宝弹性布局方案lib-flexible实践

淘宝弹性布局方案lib-flexible实践

2个月前,写过一篇文章《从网易与淘宝的font-size思考前端设计稿与工作流》总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那篇文章的总结,可惜的是因为项目的关系,这两个月来几乎没有机会做移动类项目的工作,所以那些理论一直没有得到真正的实践。这次因为公司有一...

javascript运动系列第五篇——缓冲运动和弹性运动

javascript运动系列第五篇——缓冲运动和弹性运动

  缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点。而弹性运动同样是减速运动,但元素并不是直接停在目标点,而是在目标点附近弹几下再停止。本文将以一种新的思路来详细介绍缓冲运动和弹性运动 缓冲运动  在变速运动中,曾经用物理学的知识实现过缓冲运动。缓冲运动实际上就是减速运动的一种特殊形式,指元素做减...

CSS弹性盒模型flex在布局中的应用

CSS弹性盒模型flex在布局中的应用

  前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法,本文将介绍flex在布局中的应用 元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items<style>.parent{display:flex;justify-content:center;a...

深入理解CSS弹性盒模型flex

深入理解CSS弹性盒模型flex

  CSS3引入了一种新的布局模型——flex布局。flex是flexiblebox的缩写,一般称之为弹性盒模型。和CSS3其他属性不一样,flexbox并不是一个属性,而是一个模块,包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局,以适应各种类型的显示设备和各种尺...

css-盒子模型

css-盒子模型

    ...

(转)详解css3弹性盒模型(Flexbox)

(转)详解css3弹性盒模型(Flexbox)

今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性。Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩...

css3 flex弹性盒自动铺满写法

css3 flex弹性盒自动铺满写法

<styletype="text/css">.flexcontainer{width:100%;height:100%;position:absolute;left:0px;top:0px;display:flex;flex-direction:column;}.flex1{width:100%;heigh...

Ajax轮询消息自动提示(消息盒子)

Ajax轮询消息自动提示(消息盒子

经过一下午写了个消息盒子的例子,用的是ajax方式轮询读取,没有用到后台自动“推”数据的方式,效果良好。  <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="mainTalk.aspx.cs"Inherits="...

四、续绑定SignaIR的用户管理-(添加好友和消息盒子)

四、续绑定SignaIR的用户管理-(添加好友和消息盒子

CREATETABLEMSG_INFO(MSG_IdINTPRIMARYKEYAUTO_INCREMENT,--消息标识MSG_TypeINTDEFAULT0,--消息类型0普通消息1、申请消息,2、群聊消息MSG_GroupIdINTDEFAULT0,--分组id//可选用User_IdINTDEFAULT0,--发...

CSS 盒子模型(Box model)中的 padding 与 margin

CSS 盒子模型(Box model)中的 padding 与 margin

   本文将讲述HTML和CSS的关键—盒子模型(Boxmodel)。理解Boxmodel的关键便是margin和padding属性,而正确理解这两个属性也是学习用CSS布局的关键。  如果有一点HTML基础的话,就应该了解一些基本元素(Element),如p,h1~h6,br,div,li,ul...

【转】移动web页面支持弹性滚动的3个方案

【转】移动web页面支持弹性滚动的3个方案

传统pc端中,子容器高度超出父容器高度,通常使用overflow:auto可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同、版本不同,导致有部分机型不支持对弹性滚动,从而在开发中制造了所谓的BUG。 上图如果在PC端中,我们可以利用position:fixed和overflow:a...

在盒子(2CCC)的日子

盒子(2CCC)的日子

盒子(2CCC)的日子DELPHIER的足迹印在DFW,印在2CCC。曾经的DFW和2CCC,学术气氛非常浓烈。有人提问,众人纷纷热心解答,仿佛是在解答自己难题。大家只为技术争的面红耳赤。很怀念当时的情形。DELPHIER可还记得自己在DFW争相写博客排名第一的情形?我可是数量排名第二名的(自豪)。随着DFW的关闭,...

弹性布局详解——5个div让你学会弹性布局

弹性布局详解——5个div让你学会弹性布局

 在网页制作过程中,布局是我们最重要的一个环节。可以说布局的好坏直接影响到整个网页的成败!布局成,则事半功倍;布局败,则事倍功半。随着移动互联的到来,响应式网站风靡。这也就兴起了一种新兴的布局方式——弹性布局。取代我们之前“display+float+position”的...