css3新属性（一）

box-align：start | end | center | baseline | stretch

start：设置弹性盒模型对象的子元素从开始位置对齐

center：设置弹性盒模型对象的子元素居中对齐

end：设置弹性盒模型对象的子元素从结束位置对齐

baseline：设置弹性盒模型对象的子元素基线对齐

stretch：设置弹性盒模型对象的子元素自适应父元素尺寸

box-pack：start | center | end | justify

start：设置弹性盒模型对象的子元素从开始位置对齐（等同于左对齐）

center：设置弹性盒模型对象的子元素居中对齐

end：设置弹性盒模型对象的子元素从结束位置对齐（等同于右对齐）

justify：设置或弹性盒模型对象的子元素两端对齐

box-align:center垂直居中

box-orient：horizontal | vertical

horizontal：设置弹性盒模型对象的子元素为水平排列

vertical：设置弹性盒模型对象的子元素为纵向排列

box-direction：normal | reverse

normal：设置弹性盒模型对象的子元素按正常顺序排列

reverse：反转弹性盒模型对象的子元素的排列顺序

box-flex：<number>  使用浮点数指定对象所分配其父元素剩余空间的比例

box-lines：single | multiple

single：弹性盒模型对象的子元素只在一行内显示

multiple：弹性盒模型对象的子元素超出父元素的空间时换行显示

时间： 2024-11-05 20:46:18

css3新属性（一）的相关文章

两点补充——CSS3新属性以及弹性布局

CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位] 1.px:像素.长度固定,表示分辨率占几个像素点: 2.%:表示相对于默认值的百分比: 3.em:长度与元素的字号挂钩. rem:长度与根元素的字号挂钩. 即与html 的 font-size 挂钩,若不设置,默认16px . [ em与rem区别 ] em与当前元素自身的font-size挂钩

CSS3新属性：在网站中使用访客电脑里没有安装的字体

CSS的font-family属性使网页可以使用客户电脑里的字体,从而得到多姿多彩的WEB页面,但当客户端没有你想要使用的字体时怎么办呢?我们总不能让每个访问者都去安装一个字体吧?事实上,这是可以的!不过不是访客主动下载的,而是网站开发者帮访客下载安装的,具体怎么实现的,我们还要从字体文件的格式说起.字体格式类型主要有几个大分类:TrueType.Embedded Open Type .OpenType.WOFF .SVG.  TrueType Windows和Mac系统最常用的字体格式,其最大

css3新属性transform 3D的基础笔记.

研究了下css3中的 transform变换属性中的3D属性效果和看到的一篇好文章了解到了3D的学习;好文章地址:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 下面只是自己能读懂自己写的代码例子: <style> #box{ -webkit-perspective:800px;//定义3D场景大小 -webkit-transform-origin:50%

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" clas

css3新属性的总结

今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐变 线性渐变 跳变 重复渐变蒙版倒影滤镜多背景文字方向文字缩略 过渡transition 变换transform动画animation: keyframes 一个一个来:1>圆角: border-radius:px %; border-radius: 一个值; 四个角 border-radius:

CSS3新属性注释及实例

这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */}border-shadow 用于向方框添加阴影div{width:300px;height:100px;background-color:#ff9900;-moz-box-shadow: 10px 10px 5px #888888; /* 老的

基于CSS3新属性Animation及transform实现类似翻书效果

注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本的意思是使用JS来控制的,点击一次之后使用setInterval去控制书页翻过去的动画,当书页翻转180°之后,清除掉setInterval,但当我连续点击,那之前没有翻转180°的书页将无法继续完成之前的动作,可以用清除setInterval的方式,但总感觉动画效果不好,当然还有其他解决办法,但突

自己用过的一些比较有用的css3新属性

css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开始慢慢的去了解并使用css3(还有html5),因为我觉得这是一种趋势,它是一种已经被制定的标准.我并不是专门在做前端的,只是有时不得不自己去写这些东西,有时喜欢研究研究这些,所有以上只是我的个人看法. 1.在之前我想在页面做出一个边框为圆角框,貌似需要写挺多css代码的(可能我没了解到更好的办法),在css3里有一个属性创建圆角是非常容易的 ,设置好角度也可以创建一个圆 border-radius:

calc() -css3新属性

calc()看起来像个js的函数,但它实际上是css3的一个属性,它能自动计划宽度,高度等. 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破.我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模式)

css3 新属性

一 选择器1 兄弟选择器 0 以第一个选择器开始,往后找满足条件的兄弟节点 class~class() <-- lorem+数字 -tab --> 可以输出默认文字2 属性选择器 标签[attr] 标签[attr=某个具体值] 标签[attr^=某个具体值开头] 标签[attr$=某个具体值结尾] li[] 标签[attr*=属性中包含的某个值] li[] 标签[attr | =-前的第一个值] 属性中以-进行分割二 伪类选择器 1 attr:nth-child(index) attr:nth