html5——伸缩布局

【html5——伸缩布局】的更多相关文章

html5——伸缩布局

基本概念 1.主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向 2.侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的 3.方向:默认主轴从左向右,侧轴默认从上到下 4.主轴和侧轴并不是固定不变的,通过flex-direction可以互换 display: flex;//给父盒子加flex属性,父盒子将具有伸缩属性,子盒子默认平铺效果特征 1.设置了伸缩属性,在没有设置宽度的情况下是100% 2.设置了伸缩属性,行内元素会转化成块级元素,可以设置宽高,独占一行主轴方向 flex-…

第 29 章 CSS3 弹性伸缩布局[下]

学习要点: 1.新版本主讲教师:李炎恢本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一．新版本新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案,这个草案是由 W3C 推出的最新语法.这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现了统一. 首先,设置伸缩盒的 display 有如下两个属性值: 属性值说明 flex 将容器盒模型作为块级弹性伸缩盒显示(新版本) inline-fle…

第 29 章 CSS3 弹性伸缩布局[中]

学习要点: 1.混合过度版主讲教师:李炎恢本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一．混合过渡版混合版本的 Flexbox 模型是 2011 年提出的工作草案,主要是针对 IE10 浏览器实现的伸缩布局效果,其功能和旧版本的属性大同小异.我们还是采用上一节课的文件,然后使用混合过渡代码,实现 IE10 的伸缩布局. 首先,设置伸缩盒的 display 有如下两个属性值: 属性值说明 flexbox 将容器盒模型作为块级弹性…

第 29 章 CSS3 弹性伸缩布局[上]

学习要点: 1.布局简介 2.旧版本主讲教师:李炎恢本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一．布局简介 CSS3 提供一种崭新的布局方式:Flexbox 布局,即弹性伸缩布局模型(Flexible Box).用来提供一个更加有效的方式实现响应式布局.但是用于这个布局方式还处于 W3C 的草案阶段,并且它还分为旧版本.新版本以及混合过渡版本三种不同的编码方式.在发展中,可能还有各种改动,浏览器的兼容性还存在问题.所以,本节课作…

CSS3伸缩布局Flex学习笔记

如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些还好,关键移动端竟然不支持这个属性,移动端支持的还是老版本的display:-webki-box;不过对于学习来说,也不管它支持不支持了,学了再说吧,更何况Chrome已经把flex的前缀去了,说明flex多少还是有些稳定的. 下面列出了关于CSS与flex一起使用的一些属性 display 显示方…

html5 基本布局+新标签+新选择器 + 线性渐变

html5 基本布局+新标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> header{background:#abcdef; height:150px;} nav{height:30px; b…

CSS3弹性伸缩布局（二）——flex布局

上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介新版本的Flexbox模型是2012年9月提出的工作草案,这个草案是由W3C 推出的最新语法.这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现统一. 这里我们还是继续上一篇博客中的例子,使用最新版本的flex布局来实现相同的效果. html代码: <div> <p>发生过的空间还是看价格哈健康啊水…

CSS3弹性伸缩布局(一)——box布局

CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了.但是这个布局方式还处于W3C的草案阶段,并且它还分为旧版本.新版本以及混合过渡版本三种不同的编码方式.其中混合过渡版本主要是针对IE10做了兼容.目前flex布局用得比较多的还是在移动端的布局,所以本次主要讲解一下旧版本和新版本在移动端使用的各个知识点,让大家对神秘的flex布局熟悉起来.…

flexbox弹性伸缩布局

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>flexbox弹性伸缩布局</title> <style> p{width:150px;border:1px solid #000;margin:5px;padding:5px;background:#eee;} div{ width:100%; d…

CSS3 伸缩布局盒模型记

CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间. 更重要的是,Flexbox布局方向不可预知,不像常规的布局(块级从上到下,内联从左到右),而那些常规的适合页面布局,但对于支持大型或者复杂的应用程序就缺乏灵活性. 如果常规布局是基于块和内联文本流方向,那么Flex布局就是基于"Flex-flow"方向.先来了解一下伸缩…