一、盒子模型（Box Model） 盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。当设置一个元素的样式如下：DOCTYPE html> <html><head><me...
最近这些天都在弥补css以及css3的基础知识，在打开网页的时候，发现了火狐默认首页上有这样一个东西。第一个css属性就没有看懂。于是乎，开始各种找资料，各种看书。这些天把对于css3伸缩布局盒（flexbox）模型的理解写成博文，目的是对flexbox做一个简单的介绍。以下的内容会分为如下小节： 1.关于css3中flexbox需要掌握的概念 2.flexbox实现水平垂直居中对齐 3.三列等高自适应，页脚区域黏附底部的布局1.关于css3中flexbox需要掌...
使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如...
网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论，每天有数以百计的优秀网站被推荐上面，这对于网页设计师来说是很好的灵感来源。今天，我们选择了15赢得 CSS 设计大奖的优秀作品，帮助你学习网站布局设计。enjoy! Sony The Power of Full Frame Socialwhale First Launch Herbal Bises The Collaboratory Monster Energy COD Ghosts Pandra ...
讲到响应式布局， 相信大家都有一定的了解，响应式布局是今年很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果， 设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事，包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计（通 过CSS3 Media Query实现响应布局）。 一、什么是响应式布局？ 响应式布局是Ethan Marcotte在2010年...
1.如何使一个div在屏幕的中间显示....这里是屏幕的中间， 不是页面的中间 说明: position:absolute;left:50%;top:50%;margin-top:-25%;margin-left:-25%(或者margin个具体的像素值的负数)//又如下面的: var h = document.body.clientHeight; $("#update_info").css({ top: h/2 }); 这上面的代码，都是去到页面的中间而已... 我现在有几个折叠的ul，每个折叠的ul有好多内容，我如果全部打开，我测了一下高度是1820px; 但...
flexbox是CSS3提出的页面布局模块。flexbox可以把列表横向或者纵向排列，并且填满可以延伸到的空间。稍微复杂的布局可以通过嵌套flex container来实现。 利用flexbox可以方便的创建弹性布局，这使得在移动设备上，可以让元素在容器内扩展和收缩，更容易的实现常见布局，如三列布局。 弹性容器和弹性块 一个flex container中包含了left content right三个弹性块。 可以设置display为flex让块变为弹性块。 可以设置flex-flow来...
之前布局都是用float布局或者是display:inline-block;+width:**%；来计算，所以都不是真正意义上的流布局； 接下来的实例能完整的教给大家如何建立CSS3当中的流布局（以chrome为例） 三列自适应布局 .wrap { display: -webkit-box; -webkit-box-orient: horizontal; } .child { min-height: 200px; border: 2px sol...
1 /*css3中的布局*/ 2 .wrapper{ 3 margin:auto; 4 width:300px; 5 height:200px; 6 border:2px dotted blue; 7 -webkit-columns:15px 3;/*表示多列布局，每一列15px 有3列，内容多于3列则该参数失效！例如对一篇文章可以进行多列布局显示*/ 8 9 -webkit-column-count:3;10 -webkit-column-width:15px;/*将width和count属性拆开来单独使用，弱拆开且同时使用，浏览器根据具体情况会可能会使某一属性...
CSS 3中弹性盒布局的最新版概述 在CSS 3中，CSS Flexible Box模块为一个非常重要的模块，该模块用于以非常灵活的方式实现页面布局处理。 虽然可以使用其他CSS样式属性来实现页面布局处理，但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术，可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理。 虽然CSS Flexible Box模块已经被公布了好几年，但是自开始公布以来，该...
CSS 3中弹性盒布局的最新版概述 在CSS 3中，CSS Flexible Box模块为一个非常重要的模块，该模块用于以非常灵活的方式实现页面布局处理。 虽然可以使用其他CSS样式属性来实现页面布局处理，但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术，可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理。 虽然CSS Flexible Box模块已经被公布了好几年，但是自开始公布以来，该...
使用float属性或position属性布局的缺点 div { width: 20em; float: left; } #div1 { margin-right: 2em; } #div3 { width: 100%; background-color: yellow; height: 200px; } 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比...
box-flex：也就是让子容器针对父容器的宽高属性按照一定的规则来划分 Eg： html代码： 01 02 03 CSS样式： body,div { background:#fff; margin:0; padding:0;} .wrap { width:600px; height:200px; color:#fff; margin:20px 0 0 20px; text-align:center; display:-moz-box; display:-webkit-box; display:box; -moz-box-orient:block-axis; -webkit-box-orient:block-axis; box-orient:block-axis; -mo...
CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度，高度，以最佳方式填充可用空间。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。 更重要的是，Flexbox布局方向不可预知，不像常规的布局(块级从上到下，内联从左到右)，而那些常规的适合页面布局，但对于支持大型或者复杂的应用程序就缺乏灵活性。 如果常规布局是基于块和内联文本流方向，那...
原文：A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序，甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。 很多的设计师和开发者发现Flex布局很容易使用，它定位元素简单因此很多复杂的布局能够用很少的代码实现，引领更简单的开发过程。Flex布局的...