【你不知道的css各类布局（一）之固定布局、静态布局】的更多相关文章

你不知道的css各类布局（三）之自适应布局

自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局和静态布局类似也是采用绝对长度单位(px.pt.mm.cm.in),但不同点在于它通过media query为页面指定了多个固定宽度. 布局特点 自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围. 改变屏幕分辨率可以切换不同的静态局部(页面元素…

你不知道的css各类布局（一）之固定布局、静态布局

前言 当为大量用户设计网站时,设计人员必须考虑到访问者的差异: 屏幕分辨率, 浏览器的选择, 是否在浏览器最大化状态, 浏览器的额外工具栏的开启(历史记录,书签等), 操作系统和硬件. 我们知道css中有各类布局,从发展至今包括 固定布局.静态布局.栅格布局.流体布局.液体布局.自适应布局.响应式布局.弹性布局,但是概念总是模糊不清,最近在看一本很喜欢的书,决定要把css布局整理一下 固定布局 概念 固定布局(fixed layout)即传统Web设计,页面的大小采用固定的宽度,固定布局拥有固定…

你不知道的css各类布局（二）之流体布局、液体布局、栅格布局

流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局 概念 流体布局(Liquid/Fluid Layout)指的是利用元素“流”的特性实现的各类布局,流式布局采用了相对长度单位(%.em.rem.vm.vh).典型的流式布局是采用百分比(%)作为主要区块的单位, 当然其他的相对单位(em)也是同样适用 布局特点 ** 因为“流”本身具有自适应特性,所以流体布局往往都是具有自适应特性的,但是流体布局并不等同于自适应布局…

你不知道的css各类布局（五）之em布局、rem布局

em布局/rem布局 em和rem的区别 在了解弹性布局前我们需要先知道em和rem rem:font size of the root element,rem是相对于根元素<html>来设置字体大小的,这就意味着,我们只需要根据自己的需求在根元素确定一个参考值. em:以使用em为单位的元素本身的font-size大小为参考点,标准不统一,容易造成混乱 em/rem与px的换算 浏览器的默认字体高度一般为16px,即1em:16px,但是 1:16 的比例不方便计算,为了使单位em/rem更…

你不知道的css各类布局（四）之响应式布局

响应式布局 概念 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 布局特点 响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC.手机.手表.冰箱的Web浏览器等等)都能显示出令人满意的效果,对CSS编写者而言,在实现上不拘泥于具体手法,但通常是糅合了流式布局+自适应 布局.分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配.即:创建多个流体式布局,分别对应一个屏幕分辨率范围.可以把响应式布局看作是流式布局 和自适应布局设计理…

CSS百分比padding实现比例固定图片自适应布局

一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开. 对于padding属性而言,任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>元素: div { padding: 50%; } 或者: di…

css布局之左侧固定右侧自适应布局

参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div style="float:left; width:490px; border-right:5px #333 solid; height:100%;"> <table class="form"> @Html.HiddenFor(m => m.Notif…

静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC

静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是900px或其他px,只要浏览器缩小过这个最小值就不会自动化的调整. 自适应布局:创建多个静态布局,每个静态布局对应一个屏幕分辨率范围,使用@media媒体查询技术.但是字体不会改变 流式布局:rem布局+viewport;元素的宽高用百分比做单位,元素宽高按屏幕分辨率调整,布局不发生变化.屏幕尺度…

CSS 实现：两栏布局（一边固定，一边自适应）

☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <div class="main"></div> </body> √[实现]: // html 和 body 的高度默认为0,因此要先设置为100%,并且清除默认样式(margin:0; padding:0) html,body { /*width: 100%;*…

css 关于两栏布局，左边固定，右边自适应

好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它写出来,先说今天的吧.两栏布局,左边固定,右边自适应 百度了一下,使用了http://www.zhangxinxu.com/wordpress/2010/03/纯css实现侧边栏分栏高度自动相等/ 这个原理制作侧栏,分栏登等高做法 使用margin-bottom:赋值,和padding-bottom…