-
css3布局
2016-05-24 11:49:41CSS3-分栏布局 column-width 栏目宽度 column-count 栏目列数 column-gap 栏目距离 column-rule 栏目间隔线 CSS3-响应式布局 媒体类型 all 所有媒体 braille 盲文...CSS3-分栏布局
column-width 栏目宽度column-count 栏目列数column-gap 栏目距离column-rule 栏目间隔线CSS3-响应式布局
媒体类型
all 所有媒体braille 盲文触觉设备embossed 盲文打印机print 手持设备projection 打印预览screen 彩屏设备speech '听觉'类似的媒体类型tty 不适用像素的设备tv 电视关键字
andnot not关键字是用来排除某种制定的媒体类型only only用来定某种特定的媒体类型媒体特性
(max-width:600px)(max-device-width: 480px) 设备输出宽度(orientation:portrait) 竖屏(orientation:landscape) 横屏(-webkit-min-device-pixel-ratio: 2) 像素比devicePixelRatio 设备像素比window.devicePixelRatio = 物理像素 / dips样式引入
<link rel="stylesheet" href="css/index.css" media="print" />@import url("css/demo.css") screen;@media screen{ }<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”><link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”>@media screen and (min-width:360px) and (max-width:500px) {}<link rel="stylesheet" type="text/css" href="indexA.css" media="screen and (min-width: 800px)"><link rel="stylesheet" type="text/css" href="indexB.css" media="screen and (min-width: 600px) and (max-width: 800px)"><link rel="stylesheet" type="text/css" href="indexC.css" media="screen and (max-width: 600px)">补充:link和@import的区别,补充部分来自参考连接:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html
页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:
XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
XML/HTML代码
<style type="text/css" media="screen">
@import url("CSS文件");
</style>两者都是外部引用CSS的方式,但是存在一定的区别:
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。
移动设备
<meta name="viewport" content="" />width [pixel_value | device-width(设备宽度)]height [pixel_value | device-height(设备高度)]user-scalable 是否允许手动缩放 (no||yes)initial-scale 初始比例minimum-scale 允许缩放的最小比例maximum-scale 允许缩放的最大比例target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
-
css3 布局
2016-02-26 17:07:411 transform 如果用3d 形式,书写顺序对结果有影响吗? 有。 参考: http://www.hitthebits.com/2012/06/css3-3d-transforms-function-order.html1 transform 如果用3d 形式,书写顺序对结果有影响吗?
eg,先translate3d(-50,-50%,200px) scale(2) 与 scale(2) translate3d(-50,-50%,200px)
有。
注意: 如果先sclae3d(10,10,10) ,然后在translateZ(100px),其实在z轴上移动了100px * 10 = 1000px; 结论: scale3d 会放大数据
参考: http://www.hitthebits.com/2012/06/css3-3d-transforms-function-order.html -
css3布局样式
2016-11-28 23:17:13css3布局布局相关样式
多栏布局
通过column-count指定,将一个元素中的内容分为多栏进行显示。
不过需要将元素的宽度设置成多个栏目的总宽度,也可使用column-width指定每个栏目的宽度。div#div1{ width:40em; -moz-column-count: 2; -webkit-column-count: 2; } div#div3{ width:100%; background-color:yellow; height:200px; } //使用column-width div#div1{ -moz-column-count: 2; -webkit-column-count: 2; -moz-column-width:20em; -webkit-column-width:20em; }
可以使用column-gap属性来设定多栏之间的间隔距离。
使用column-rule在栏与栏之间增加一条间隔线。div#div1{ -moz-column-count: 2; -webkit-column-count: 2; -moz-column-width:20em; -webkit-column-width:20em; -moz-column-gap:2em; -webkit-column-gap:2em; -moz-column-rule: 1px solid red; -webkit-column-rule: 1px solid red; }
盒布局
在css三中,使用box属性来使用盒布局。可以解决使用float属性底部不对齐的缺点。
#container{ display: -moz-box; display: -webkit-box; } #left-sidebar{ width: 200px; padding: 20px; background-color: orange; } #contents{ width: 300px; padding: 20px; background-color: yellow; } #right-sidebar{ width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
盒布局与多栏布局的区别:
多栏布局宽度各栏宽度是相等的。在指定栏宽度时也只能指定一个统一的宽度。与不可能具体指定每一栏中显示什么内容。
弹性盒布局
使用自适应窗口的弹性盒布局:加上box-flex属性。
#contents{ -moz-box-flex:1; -webkit-box-flex:1; padding: 20px; background-color: yellow; }
box-ordinal-group:该属性用一个整数决定浏览器在显示的时候根据序号从小到大显示这些元素。
box-orient:用vertical改变元素从水平方向显示到垂直方向显示。也可用horizontal#container{ display: -moz-box; display: -webkit-box; -moz-box-orient: vertical; -webkit-box-orient: vertical; } #left-sidebar{ -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; width: 200px; padding: 20px; background-color: orange; } #contents{ -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -moz-box-flex:1; -webkit-box-flex:1; padding: 20px; background-color: yellow; } #right-sidebar{ -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; width: 200px; padding: 20px; background-color: limegreen; }
使用盒布局时元素的高度与宽度具有一定的自适应,可使用弹性盒布局消除空白。
可对多个元素使用box-flex属性,box-flex属性值也可使用大于1。原理是讲原来页面的空余部分划分为总的box-flex份进行分配。
指定水平方向与垂直方向的对齐方式
使用盒布局的时候,可以使用box-pack及box-align属性来指定元素中文字,图像及子元素水平方向或垂直方向的对齐方式。表如下:
让文字居中显示,代码示例:
div{ display: -moz-box; display: -webkit-box; -moz-box-align: center; -webkit-box-align: center; -moz-box-pack: center; -webkit-box-pack: center; width:300px; height:200px; background-color:pink; }
-
CSS3布局相关样式
2017-07-31 11:21:00CSS3布局相关样式CSS3布局相关样式:网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性进行页面的简单布局,但是它们也存在有缺点,比如在两栏或者多栏布局的时候,会出现元素的内容高度不一致,那么导致底部很难对齐,在CSS3中追加了一些新的布局方式。
一、多栏布局:
1、column-count属性:
(1)在CSS3中可以通过column-count属性来进行多栏布局,这个属性的含义是将一个元素中的内容分成多栏进行显示;
(2)写法:column-count:栏目数;
(3)兼容性写法:-webkit-column-count:栏目数;、-moz-column-count:栏目数;
(4)需要注意的是,在使用多栏布局的时候,要将元素的宽度设置成多个栏目的总宽度;
2、column-width属性:
(1)在CSS3中可以通过column-width属性来指定栏目的宽度来生成分栏;
(2)兼容性写法:-webkit-column-width、-moz-column-width;
3、column-gap属性:在CSS3中可以通过column-gap属性指定栏目与栏目之间的距离;
4、column-rule属性:
(1)在CSS3中可以通过column-rule属性栏目与栏目之间增加一条分割线;
(2)兼容性写法:-webkit-column-rule、-moz-column-rule;
5、多栏布局的应用:
(1)HTML代码:
<div id="div1"> CSS3布局相关样式:网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等 各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性 进行页面的简单布局,但是它们也存在有缺点,比如在两栏或者多栏布局的时候,会出现元 素的内容高度不一致,那么导致底部很难对齐,在CSS3中追加了一些新的布局方式:CSS3布局相关样式: 网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等 各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性 进行页面的简单布局,但是它们也存在有缺点,比如在两栏或者多栏布局的时候,会出现元 素的内容高度不一致,那么导致底部很难对齐,在CSS3中追加了一些新的布局方式:CSS3布局相关样式: 网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等 各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性 进行页面的简单布局,但是它们也存在有缺点,比如在两栏或者多栏布局的时候,会出现元 素的内容高度不一致,那么导致底部很难对齐,在CSS3中追加了一些新的布局方式:CSS3布局相关样式: 网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等 各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性 进行页面的简单布局,但是它们也存在有缺点,比如在两栏或者多栏布局的时候,会出现元 素的内容高度不一致,那么导致底部很难对齐,在CSS3中追加了一些新的布局方式: </div>
(2)CSS代码:
#div1{ width: 100%; -webkit-column-count: 5; -moz-column-count: 5; /*-webkit-column-width: 200px; -moz-column-width: 200px;*/ -webkit-column-gap: 50px; -moz-column-gap: 50px; -webkit-column-rule: 2px solid #ccc; -moz-column-rule: 2px solid #ccc; }
(3)效果图如下:
1)使用column-count属性时的效果图:
2)使用column-width属性时的效果图:
二、盒布局:
1、使用float属性与position属性时的缺点:在CSS3中除了多栏布局之外,还可以使用盒布局来解决使用float属性和position属性时多栏布局底部不能对齐的缺点;
2、使用盒布局:在CSS3中使用box属性来进行盒布局,在Firefox中要把box写成"-moz-box"的形式,在chrome浏览器中写成"-webkit-box"的形式;
3、盒布局与多栏布局的区别:多栏布局的栏目宽度必须相等,指定栏目的宽度的时候也只能统一指定,栏目的宽度不可能全都一样,所以多栏布局比较适合在文字内容页面使用,并不适合整个网页编排时使用;
4、盒布局的应用:
(1)使用float属性和position属性进行多栏布局:
1)HTML代码:
<div class="content"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
2)CSS代码:
.content{ width: 1000px; margin: 0px auto; background-color: khaki; } .left{ width: 300px; height: 400px; float: left; background-color: lawngreen; } .center{ width: 400px; height: 200px; float: left; background-color: lightcoral; } .right{ width: 300px; height: 400px; float: right; background-color: lightblue; }
3)效果图如下:
(2)使用box属性来进行盒布局:
1)HTML代码:
<div class="content"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
2)CSS代码:
.content{ width: 1000px; margin: 0px auto; display: -moz-box; display: -webkit-box; } .left{ width: 300px; height: 400px; background-color: lawngreen; } .center{ width: 400px; height: 200px; background-color: lightcoral; } .right{ width: 300px; height: 400px; background-color: lightblue; } .left,.center,.right{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
3)效果图如下:
三、弹性盒布局:
1、使用自适应窗口的弹性盒布局:
(1)在CSS3中使用box-flex属性即可使得盒布局变成弹性盒布局;
(2)兼容性写法:-webkit-box-flex、-moz-box-flex;(其后的值会影响盒子的宽度和高度)
2、改变元素的显示顺序:
(1)使用弹性盒布局的时候,可以通过box-ordinal-group属性来改变各个元素的显示顺序,在每个元素中加入box-ordinal-group属性,这个属性使用一个表示序号的正数属性值,浏览器在显示的时候根据序号从小到大来显示这些元素;
(2)兼容性写法:-webkit-box-ordinal-group、-moz-box-ordinal-group;3、改变元素的排列方向:
(1)在使用弹性盒布局的时候,可以通过box-orient来指定多个元素的排列方向;
(2)可能的取值:
1)horizontal:在水平行中从左到右排列子元素;
2)vertical:从上向下垂直排列子元素;
(3)兼容性写法:-webkit-box-orient:vertical;、-moz-box-orient:vertical;
4、元素的宽度与高度自适应:
(1)在使用盒布局的时候,元素的宽度和高度具有自适应性,就是元素的宽度与高度可以根据排列的方向的改变而改变;
(2)元素的宽度与高度自适应的应用:
1)HTML代码:
<div class="content"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div>
2)CSS代码:
.content{ width: 500px; height: 400px; background-color: khaki; display: -moz-box; display: -webkit-box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; } .left{ background-color: lightblue; } .center{ background-color: lightcoral; } .right{ background-color: lightgreen; } .left,.center,.right{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-flex: 1; -moz-box-flex: 1; }
3)效果图如下:
5、使用弹性盒布局来消除空白:其方法就是给子div中加入一个box-flex属性;
6、对多个子元素使用box-flex属性:使得浏览器或容器中的元素的总宽度或者总高度都等于浏览器或容器的高度;
7、指定水平方向与垂直方向的对齐方式:
(1)使用盒布局的时候,可以使用box-pack属性及box-align属性来指定元素中的文字、图像以及子元素的水平方向或者垂直方向上的对齐方式;
(2)兼容性写法:
-webkit-box-pack:值;
-moz-box-pack:值;
-webkit-box-align:值;
-moz-box-pack:值;(3)box-pack属性的取值:
取值 属性值描述 start 对于正常方向的框,首个子元素的左边缘被放在左侧(最后的子元素后是所有剩余的空间)
对于相反方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)end 对于正常方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)
对于相反方向的框,首个子元素的左边缘被放在左侧(最后子元素后是所有剩余的空间)center 均等地分割多于空间,其中一半空间被置于首个子元素前,另一半被置于最后一个元素后 justify 在每个子元素之间分割多余的空间(首个子元素前和最后一个子元素后没有多余的空间) (4)box-align属性的取值:
取值 属性值描述 start 对于正常方向的框,每个子元素的上边缘沿着框的顶边放置
对于反方向的框,每个子元素的下边缘沿着框的底边放置end 对于正常方向的框,每个子元素的下边缘沿着框的底边放置
对于反方向的框,每个子元素的上边缘沿着框的顶边放置center 均等地分割多余的空间,一半位于子元素之上,另一半位于子元素之下 baseline 如果box-orient是inline-axis或horizontal,所有子元素均与其基线对齐 stretch 拉伸子元素以填充包含块 (5)指定水平方向与垂直方向的对齐方式的应用:
1)HTML代码:
<div>指定水平方向与垂直方向的对齐方式</div>
2)CSS代码:
div{ width: 300px; height: 200px; background: lightblue; display: -moz-box; display: -webkit-box; -moz-box-pack: center; -webkit-box-pack: center; /*-moz-box-pack: start; -webkit-box-pack: start;*/ /*-moz-box-pack: end; -webkit-box-pack: end;*/ /*-moz-box-pack: justify; -webkit-box-pack: justify;*/ -moz-box-align: center; -webkit-box-align: center; /*-moz-box-align: start; -webkit-box-align: start;*/ /*-moz-box-align: end; -webkit-box-align: end;*/ /*-moz-box-align: baseline; -webkit-box-align: baseline;*/ /*-moz-box-align: stretch; -webkit-box-align: stretch;*/ }
3)效果图如下:
①box-pack: center;时的效果图:
②box-pack: start;时的效果图:
③box-pack: end;时的效果图:
④box-pack: justify;时的效果图:
⑤box-align: center;时的效果图:
⑥box-align: start;时的效果图:
⑦box-align: end;时的效果图:
⑧box-align: baseline;时的效果图:
⑨box-align: stretch;时的效果图:
8、弹性盒布局的应用:
(1)HTML代码:
<div class="content"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div>
(2)CSS代码:
.content{ background-color: khaki; display: -moz-box; display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; } .left{ height: 200px; background-color: lightpink; -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; } .center{ height: 200px; background-color: lightcoral; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; } .right{ height: 200px; background-color: lightblue; } .left,.center,.right{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
(3)效果图如下:
-
CSS2与CSS3布局方式比较
2015-07-02 21:02:24本文主要介绍了CSS2与CSS3布局方式的不同,通过二者的对比得出CSS3布局的优势 -
CSS3布局样式
2019-09-23 05:25:05CSS3多列布局columns 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面,这种布局在报纸和... -
掌握css3布局
2016-12-17 08:39:32在传统的浮动、定位基础之上,CSS3提供了一系列新的布局方式,包括弹性盒模型、多列、媒体查询等,利用这些布局方式我们可以灵活地应对复杂网页布局,本文通过属性详解、实战案例的方式向您展示这些新兴布局方式的... -
CSS3布局样式相关
2018-08-16 13:07:011.CSS3 多列布局——Columns 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面,这种布局在... -
css知识点:布局_新书:CSS3布局模块
2020-07-14 07:10:58css知识点:布局When Five Simple Steps approached me to write a pocket guide for their new series of short, digital format only books, I thought it a great chance to cover the cutting edge of CSS layout... -
CSS3布局 —— Columns
2017-01-10 16:01:24一、多列布局 1.1 多列布局——Columns ...它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现 -
CSS3布局篇(多列布局)
2019-10-05 17:58:21我们通过学习 CSS3,能够创建多个列来对文本进行布局 ,就像报纸那样排版那样! 可以参考详细说明:http://www.w3school.com.cn/css3/css3_multiple_columns.asp 如下多列属性: column-count:规定元素应该被... -
说说CSS3布局
2016-08-08 20:28:20使用float属性或position属性布局的缺点一般性盒布局使用盒布局使用自适应窗口的弹性盒布局改变元素的显示顺序改变元素的排列方向元素宽度与高度的自适应使用弹性盒布局来消除空白对多个元素使用box-flex属性指定... -
html5+css3布局尝试
2013-01-24 18:32:51今日刚学习了html5+css3布局入门,下面将学习的内容记录如下: 一、预期目标 实现一个博客的显示布局,如图: 二、使用html5编写网页结构,代码容易理解: Layout TEST body ... -
CSS3布局相关样式学习
2016-03-18 23:33:23CSS3相关布局样式学习--盒布局、弹性布局 -
DIV+CSS3布局
2017-08-15 17:06:10CSS3:样式文件,描述各块内容的大小、边框等样式。 DIV+CSS3的优势(1)页面代码精简。提高百度蜘蛛的爬行效率,使其在最短的时间内爬完整个页面,同时对收录质量有一定好处。 (2)提高访问速度、提升用户体验。... -
css3布局方式一:box布局
2019-10-15 20:55:54注意:box布局是2009提出的,flex布局2012年提出的,二者原理基本一致,flex可以说是box的新语法,但是不能相互替代,而且很关键的一点是二者兼容性不同,box兼容性更好,特别是对于移动端,所以还是有必要学习box... -
CSS3布局模型分析
2017-03-08 21:30:22flex弹性盒子布局模型布局模型中经典布局有:三栏或者二栏布局中主内容自适应宽度且侧栏主栏可随意换位置,本文将针对这个需求进行分析。 这次布局模型将从absolute+margin–>float+margin–>圣杯布局– -
css3布局的若干笔记总结
2017-05-13 19:05:381. css 图片间隙问题:解决方案:法宝一:定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top。 img{vertical-align:bottom;}法宝二:定义容器里的字体大小为0。div { font-size:0 ...
-
常用JVM启动参数
-
2014年上半年 信息系统监理师 上午试卷 综合知识 软考真题【含答案和答案解析】
-
电商PC前后端分离项目Spring Boot后台实战第一期
-
歌声合成从入门到精通
-
ELF视频教程
-
ApacheBeam实战指南|玩转KafkaIO与Flink
-
LVS + Keepalived 实现 MySQL 负载均衡与高可用
-
select和epoll的过程分析与比较
-
区块链应用开发实战(Go语言方向)
-
射影级双缝光子晶体光机腔设计
-
-191-4-源码
-
阿里集团八年容器化演进之路
-
2018年下半年 信息系统监理师 上午试卷 综合知识 软考真题【含答案和答案解析】
-
需求分析与建模最佳实践
-
ASHRAE 2012 IT Equipment Thermal Management and Controls_V1.0.pdf
-
基于杜鹃搜索的磷虾群算法解决工程优化问题
-
ASP.NET学习——用户增删改查(三层,数据库+源码)
-
NFS 实现高可用(DRBD + heartbeat)
-
APPKIT打造稳定、灵活、高效的运营配置平台
-
快读函数