目标：实现照片墙布局和鼠标经过图片时的动画效果 涉及知识点：CSS3的动画、过渡、变形（缩放），绝对定位与相对定位 疑点：绝对定位与相对定位对页面元素显示层次的影响 参考极客学院布道师iwen的课程 源码?? html部分： CSS部分(picwall.css)： *{ margin: 0px;}body{ backgroun...
响应式建筑设计、响应式家具设计、响应式办公设计，这些词可能是已有的专业名词，也可能是我自己想出来的一些名词。 因为在生活中，我们常常会见到很多让人惊叹的设计，为什么同一套东西经过不同的方式变化之后会给人不同的使用感受和体验呢？ 这样既节约制造成本，又节省空间，还能体验创意性的生活。 没错！大黄蜂为应对紧急战斗而瞬间由汽车变为战斗机，沙发床、沙发座椅是我们见过再平常不过的家具了。 ...
flex是一个灵活性强的布局方式,它能够很好的控制内部元素的宽度,高度或者剩余的空间部分,来适应不同的显示设备和不同的屏幕尺寸,而真正达到一种自适应效果. flex布局与常规布局截然不同,常规布局虽然在页面上显示很好,但对于大而复杂的项目,在方向改变,自适应大小,伸展和收缩等方面缺乏灵活性,flex最适合作为应用程序的组件,小规模布局使用;网格布局适用大规模布局. flex整个模块不只是一个属性,它涉及很多东西...
一、什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。 随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一...
CSS3引入了新的网格布局（grid layout），以适应显示和设计技术的发展（尤其是移动设备优先的响应式设计）。 主要目标是建立一个稳定可预料且语义正确的网页布局模式，用来替代过往表现不稳定且繁琐的table、flow以及JS脚本混合技术来实现的网页动态布局。 本文将简单而准确的介绍网格布局属性的基本概念和使用方法（摘自踏得网在线HTML5教程）。 1. 概述 网格模板区域（grid-template-areas）、网格模板行（grid-templ...
网格模板（grid-template）属性及其普通写法（longhands）定义了一个固定数量的轨道，构成显式网格。 当网格项目定位在这些界限之外，网格容器通过增加隐式网格线生成隐式网格轨道。 这些隐含的和显式的网格线一起构成隐式网格（implicit grid）。 隐式网格轨道的尺寸由网格自动行（grid-auto-rows）和网格自动列（grid-auto-columns）属性来确定。 网格自动流（grid-auto-flow）属性用来控制无明确位置的网格项的自...
网格布局支持弹性尺寸（flex-size），这是一个很好的自适应布局技术。 弹性尺寸使用fr尺寸单位，其来自 "fraction" 或 "fractional unit" 单词的前两个字母，表示整体空间的一部分。 比如下面的CSS规则： grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr); 表示有4列，第一列100px固定尺寸，第三列 max-content 代表刚好包含元素不溢出不换行的尺寸，剩下的2列都是弹性尺寸。 按照弹性尺寸...
写在前面 最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。 常见的页面布局 在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一种最合理的，结构清晰的布局。下面我先根据一些典型的网站案例列举一下几种常见的页面布局。 T型布局 这个是我们比较常见的布局，其页面的顶部一般放置横网站的标志或...
弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。 其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下： flex-flow: <flex-direction> || <flex-wrap> flex-direction: row（初始值） | row-reverse | column | column-reverse flex-wrap: nowrap（初始值） | wrap | wrap-reverse flex-direction定义了弹性项目在弹性容器...
使用css3的@media，可以实现针对不同媒体、不同分辨率的响应式布局。 方法1：根据不同分辨率使用不同css文件 例如 方法2：同一css文件中，根据不同分辨率使用不同样式 .first {background-color: white;}.second {background-color: black;}@media screen and (max-width: 800px) { /*当屏幕尺寸小于800px时，应用下面的CSS样式*/ .first {background-color: green;} .second {backgroun...
弹性项目可以按弹性容器当前行的cross axis来对齐，和justify-content类似，但在垂直方向上。其中align-items属性用于弹性容器，而align-self用于弹性项目。 align-items 为弹性容器中所有项目设置缺省对齐属性，包括匿名弹性项目。align-self 可以为单独的弹性项目设置对齐来覆盖缺省值。 （对于匿名弹性项目，align-self总是匹配对应弹性容器的align-items的值。） 如果弹性项的cross-axis外边距是auto，align-self属性没有效果...
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的对齐。 注意：弹性布局中有两个基本术语main axis和cross axis，一般情况下，我们可以把它们各自看作是屏幕上的行向和列向（但是严格讲，这和写模式有关）。 那么main-start和main-end就可以分别被看作是...
响应式布局有哪些优点和缺点 优点： 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点： 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况 1、Media Query CSS3中的Media Query（媒介查询）Media Query是制作响应式布局的一...
上次简要的说了一些css3中flex的相关概念（详细： css学习16：css3 flex流动自适应响应式布局设计 ），这次继续说下css3的flex，简单的举几个实例。 一、图片自适应居中 实例图： 实例HTML： 实例CSS： .demo{ width: 100px; height: 100px; border: 2px solid #ddd; background: #f5f5f5; padding: 6px; float: left; margin-left: 20px; /*flex布局（作用于容器）*/ display: flex; /*水平居中...
实现css水平垂直居中的方法有很多，在这里我简单的说下四种比较常用的方法： 1.使用CSS3中的Flex布局 对于flex，我们要了解的是它是一个display的属性，而且必须要给他的父元素设置flex属性(flex必须配合绝对定位使用！！！！！)，除了设置display：flex之外，还有另外两个属性需要设置，分别是justify-content和align-items，他们的意思分别是水平居中和垂直居中。HTML+CSS代码如下： body { position: abso...