有的网站设计还在使用固定宽度(如960px),期望给所有终端用户带来较为一致的浏览体验.这种固定宽度设计在笔记本上显示刚好,而在部分高分辨率显示器上却会在两边多出些空白,这样的网页给高分辨率用户的体验是极差的,而弹性布局刚好解决了这个bug.
浮动+百分比布局
.box{ border: 1px solid red; width: 100%; padding:10px; } aside{ float:left; width: 30%; background:red; padding:10px; } article{ width:65%; margin-left:10px; float:left; background:yellow; }Flex布局
Flex布局是在CSS3中引入的,又称为弹性盒模型.该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.
Flex布局对于设计比较复杂的页面非常有用,可以轻松地实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变,同时减少了依赖浮动布局实现元素位置的定义以及重置元素的大小
Flex布局主要有以下几点功能:
在屏幕和浏览器窗口大小发生改变时也可以灵活地调整布局.
控制元素在页面的布局方向
按照不同于文档对象模型(DOM)所指定的排序方式对屏幕上的元素重新排序.
/*弹性布局语法*/ .box{ display:flex; border:1px solid red; padding:10px; }综合弹性盒模型的好处如下:
可以让盒子里面的元素排在一行盒子里面元素的高度相同弹性盒模型的其他属性:
伸缩性 flex
/*父容器*/ .box{ border: 1px solid red; width: 60%; height: 400px; /*将父容器变成 flex容器*/ display: flex; } .div1{ /*占用父级容器的总宽度*/ /*width: 40%;*/ /*占父容器的占比 1*/ flex: 1; height: 300px; background-color: yellow; float: left; } .div2{ /*width: 60%;*/ /*占父容器的占比 2*/ flex: 2; height: 400px; background-color: red; float: left; } /*解决父级边框塌陷问题*/ .clear:after{ clear: both; content: ''; display: block; }伸缩流方向 flex-direction
flex-direction属性决定主轴的方向(即项目的排列方向),可以很简单地将多个元素的排列方向从水平方向修改为垂直方向,或者从垂直方向修改为水平方向
flex-direction:row | row-reverse | column | column-reverse .box{ display:flex; flex-direction:column; border:1px solid red; padding:10px; } row:主轴为水平方向,起点为左端,即网页元素排版方式从左到右排列(默认值)row-reverse:主轴为水平方向,起点在右端.与row排列相反,元素从右到左排列.column:主轴为垂直方向,起点在上端,类似于row,不过是从上到下排列.column-reverse:主轴为垂直方向,起点在下端.类似row-reverse,不过是从下到上排列伸缩换行 flex-wrap
flex-wrap属性适用于伸缩容器,也就是伸缩项目的父元素,主要是用来定义伸缩容器里是单行还是多行显示.侧轴的方向决定了新行堆放的方向、
flex-wrap:nowrap | wrap | wrap-reverse nowrap:默认值,伸缩容器单行显示,伸缩项目不会换行.wrap:伸缩容器多行显示,伸缩项目会换行wrap-reverse:伸缩容器多行显示,伸缩项目会换行,并且颠倒行顺序主轴对齐 justify-content
justify-content属性适用于伸缩容器,也就是伸缩项目的父元素.主要用来定义伸缩项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around flex-start:伸缩项目向一行的起始位置靠齐flex-end:伸缩项目向一行的结束位置靠齐center:伸缩项目向一行的中间位置靠齐space-between:伸缩项目会平均分布在行里,第一个伸缩项目在一行中的最开始位置,最后一个伸缩项目在一行的最终点位置space-around:伸缩项目会平均分布在行里,两端保留一半的空间侧轴对齐align-items
align-items 属性定义伸缩项目在侧轴上的对齐方式.align-items和justify-content相呼应,可以把它想象成侧轴(垂直于主轴)的justify-content.
align-items: flex-start | flex-end | center | baseline | stretch flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始边flex-end:伸缩项目在侧轴终点边的外边距紧靠住该行在侧轴终点边center:伸缩项目的外边距盒在该行侧轴上居中放置baseline:伸缩项目根据伸缩项目第一行文字的基线对齐stretch:默认值.伸缩项目拉伸填充整个伸缩容器媒体查询是向不同设备提供不同样式的一种不错的方式,它为每种类型的用户提供了最佳的体验效果,要使用媒体查询来制作网页,首先需要学习三个属性:媒体类型,媒体特性和关键词.
1.媒体类型
媒体类型(Media Type)在CSS2中是一个常见的属性,可以通过媒体类型对不同的设备指定不同的样式
在CSS2中常遇到的媒体类型是all(全部),screen(屏幕),print(页面打印或打印预览模式),W3C共列出十种媒体类型
值设备类型all所有设备braille盲文触觉回馈设备embossed盲文打印机handheld便携设备print打印用纸或打印预览视图projection投影设备screen电脑显示器speech语音或音频合成器tv电视机设备tty使用固定密度字母栅格的媒介,如电传打印机和终端企业中最常用的就是all,screen,print三种,不过媒体类型引入方式常用的有两种
@media方式
我们可以用@media的方式引入,@media是CSS3中新引入的一个特性,称为媒体查询.
@medid 媒体类型{ 选择器{ /*你的样式代码写在这里...*/} } 例: @media screen{ .box{ background-color: yellow; } li{ color: black; } }link方法
link方法引入媒体类型 其实就是在标签引入样式的时候,通过link标签中的media属性来指定不同的媒体类型
<link rel="stylesheet" herf="style.css" media="媒体类型"/>2.媒体特性
媒体特性(Media Query)是CSS3对媒体类型(Media Type)的增强版,其实可以将Media Query看成"Media Type(判断条件)+CSS(符合条件的样式规则)"
属性值min/max描述device-widthlengthYes设置屏幕的输出宽度device-heightlengthYes设置屏幕的输出高度widthlengthYes渲染界面的宽度heightlengthYes渲染界面的高度orientationportrait/landscapeNo横屏或竖屏resolution分辨率(dpi/dpcm)Yes分辨率color整数Yes每种色彩的字节数color-index整数Yes色彩表中的色彩数Media Query能在不同的条件下使用不同的样式,使页面在不同终端设备下达到不同的渲染效果
@media 媒体类型 and (媒体特性){ CSS样式 } 例: @media screen and (max-width: 639px){ .box{ background-color: yellow; } li{ color: black; } }3.关键词
媒体特性有的时候不止一条,当出现多个条件并存的时候,就需要通过关键词连接.
and 关键词,表示同时满足这两者时生效,到达限定范围only关键词,用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器not关键词,用来排除某种指定的媒体类型,也就是排除符合表达式的设备.换句话说,not关键词表示对后面的表达式执行取反操作4.媒体查询的使用
在使用媒体查询制作网页的时候有些地方需要注意一下:
1.遇到冲突时的机制
2.设置主要断点
简单地理解就是,设置宽度的临界点,在Media Query中,媒体特性min-width和max-width对于的属性值就是响应式设计中的断点值.使用主要断点创建媒体查询的条件,而每个断点会对应调用一个样式文件(或者样式代码)
常见的断点值为320px,480px,640px,768px,1024px等
响应式布局的优点:
面对不同分辨率设备灵活性强,能够快捷解决多设备显示问题更少维护,开发一个网站,多终端使用响应式布局的缺点:
兼容各种设备,工作量大代码累赘,会出现隐藏无用的元素,加载时间长