CSS3中新出现的技术 CSS媒体查询 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的不同大小的设备.即响应式布局. 当媒体查询为真时,相关的样式表或样式规则就会按照正常的级联规则被应用.即使媒体查询返回假,<link>标签上带有媒体查询的样式表 仍将被下载 (只不过不会被应用). 在不使用 not 或 only 操作符的情况下,媒体类型是可选的,默认为 all . 媒体查询是大…

H5 1.语义化标签 header.footer.aside.nav.section.article 2.表单输入类型 email.url.number.range.Date Pickers.search.color 3.表单属性 autocomplete.placeholder.form 4.视频音频 video.audio 5.画布 canvas 6.伸缩矢量图 svg 7.拖拽属性 draggable 8.事件 resize.input 9.地理定位 Geolocation 10.web存…

<link rel="stylesheet" href="css/1.css" media="(min- width:600px)"><link rel="stylesheet" href="css/2.css" media="(max- width:599px)">没写一句js,让页面能够根据宽度来更换样式表.这就是CSS3媒体查询!媒体查询的兼容性:IE9开始…

变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时针旋转:如果这个值为负值,元素相对原点中心逆时针旋转.如下图所示: HTML代码: <div class="wrapper"> <div></div> </div> CSS代码: .wrapper { width: 200px; height…

CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻.简单点说,就是通过鼠标的单击.获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 1.在默认样式中声明元素的初始状态样式: 2.声明过渡元素最终状态…

介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案.弹性盒子模型是css3中新提出的一种布局方案.是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案.主要是对一个容器中的子元素进行排列.对齐和分配空白空间的方案的调整. 新旧版本的弹性盒子模型在之前,css3曾经推出过旧版本的弹性盒子模型.相对于新版本的弹性盒子模型而言,旧版本的内容与新版本…

一.rem介绍 rem是什么? 它的全称是 font size of the root element (根元素的字体大小) 它是CSS3中新增加的一个尺寸(度量)单位,根节点(html)的font-size决定了rem的尺寸,也就是说它是一个相对单位,相对于(html). 浏览器的默认字体? 浏览器的默认的font-size是16px,1rem默认就等于16px.(chrome最小字体为12px) rem可以做什么及它的应用场景? 用来做web app的屏幕适配,因为不同手机型号的屏幕大小都不…

一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o…

先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局.   其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去消化与理解.可能平时你们还一直在使用table,然后通过不断了合并单元格来实现网页布局.希望我今天的这篇文章能彻底改变大家的观念.   Q:如何理解盒子模型? A:大家可以想一想,在现实生活中,如果我们拿一个盒子来装东西,那么盒子里面的东西是不是跟这个盒子之间会有空隙呢?站在里面物品的角度,则它们之…

CSS3中的阴影,我知道的就是盒阴影和文字阴影.两者使用大同小异. 1.文字阴影 不知道为啥阴影会被开发出来,觉得这没啥好用啊.用了之后发现好像还行,使页面更有立体感了那么一点点.看起来趣味性强一点. 文字阴影: text-shadow:x,y,z,color; -x偏移量,x轴为文字左边 -y偏移量,y轴为文字顶部 -z:阴影模糊半径 -color:阴影颜色 理解x和y的含义,颜色可以叠加的,里面有代码!!!! 注意:阴影可以添加多层!注意;中间逗号间隔,并且需要是完整的一套(就是三个数字都要…