弹性项目可以按弹性容器当前行的cross axis来对齐，和justify-content类似，但在垂直方向上。其中align-items属性用于弹性容器，而align-self用于弹性项目。 align-items 为弹性容器中所有项目设置缺省对齐属性，包括匿名弹性项目。align-self 可以为单独的弹性项目设置对齐来覆盖缺省值。 （对于匿名弹性项目，align-self总是匹配对应弹性容器的align-items的值。） 如果弹性项的cross-axis外边距是auto，align-self属性没有效果...
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的对齐。 注意：弹性布局中有两个基本术语main axis和cross axis，一般情况下，我们可以把它们各自看作是屏幕上的行向和列向（但是严格讲，这和写模式有关）。 那么main-start和main-end就可以分别被看作是...
css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法： <linear-gradient>：linear-gradient([ ,]? <color-stop>[, <color-stop>]+); ：[ left | right ]? [ top | bottom ]? || ? <color-stop>： [ | ]? 取值： left： 设置左边为渐变起点的横坐标值。 right： 设置右边为渐变起点的横坐标值。 top： 设置顶部为渐变起点...
对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。 font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。 但是，我们可以用以下两种定义进行抗锯齿渲染 -webkit-font-smoothing: antialiased; /*chrome、safari*/-moz-osx-font-smoothing: grayscale;/*firefox*/ （1）Webkit在自己的引擎...
一、过度概述 过度概述 - 使得 CSS 的属性值在一段时间内平滑的过渡 - 比如，鼠标悬停后，背景色在 1s 之内，由白色平滑的过渡为红色 - 指定 4 个要素 - 指定过渡属性，如 background、color等 - 指定过渡所需时间 - 指定过渡函数，即过渡的速度、方式等 - 指定过渡延迟时间，表示开始执行的时间 - 触发过渡 - 通过用户的行为触发，如点击、悬浮等 过渡示例...
二维码.jpg 0.今日课程大纲 服务器端字体: font-face 轮廓: outline 缩放属性: resize 分栏布局: column 弹性布局: flex-box 1. 服务器端字体 font-face 我们在第三天CSS 样式中，学习了一个属性叫做 font-family,他的作用是定义你所使用的字体具体是哪一种，但是仅对有对应字体的电脑有效。例如常见的字体有宋体或者黑体等，这些我们的电脑一般系统自带的字体库中都会直接安装好。 但是我...
1.用CSS.supports()方法 mark-zhq[3] //判断是否支持flex布局var supportsFlex = CSS.supports("display", "flex");//判断是否支持rem单位var supportsRem = CSS.supports("width","1rem");//判断兼容性属性var supportsAPS = CSS.supports("animation-play-state")||CSS.supports("-webkit-animation-play-state")||CSS.supports("-ms-animation-play-state")||CSS.supports("-Moz-animation-play-state")||CSS.suppo...
上篇随笔中介绍了CSS3中，通过标签的属性寻找特定标签的方法。在该篇随笔中，我们使用结构选择器实现对特定标签的选择。按照 -child 和 -of-type，可区分为两类。-child表示寻找父标签的子节点，-of-type表示以标签类型寻找父标签中的子节点。 1、-child R：nth-child(value){} (1) value=1,2,3,...，表示：在R标签的父标签中，从上往下寻找第value个子节点，并且该标签类型必须为R才有效； ...
有的时候是不是想在自己的网页中,用自己设计的字体呢?那么请看下面! 嵌入web字体 能够加载服务器的字体文字，让客户端显示客户端没有安装的字体 语法:@font-face{? font-family:;src：url(“字体路径”);font-weight:bold;}@font-face{ /*定义字体*/ font-family:"我的字体"; src:url("font/CooperBlackStd.otf"); } div{ font-family: "我的字体"; /*引用字体*/ } p{ font-family: "Co...
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错，这个炫酷的效果都是用css3实现的。 下面是动画实现所需要用到的几个css3属性。 1、perspective：用来实现一个3d的场景 写3D效果的第一步是要创建一个3D场景，即索要实现效果的模块。...
基于css3新属性transform，实现3d立方体的旋转 通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示 实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性 从而通过改变transform：rotate属性值来达到3d立方体旋转的效果 HTML代码块： //X轴旋...
CSS3 动画 HTML Ball *{ margin: 0;padding: 0; } .imgBox{ -webkit-transform: scale(3); -webkit-animation-name : 'wobble'; -webkit-animation-duration : 1.5s; -webkit-animation-timing-function : ease-in-out; -webkit-animation-delay : 2s; -webkit-animation-iteration-count : 1; -webkit-animation-direction: normal; } @-webkit-keyframes 'wobble'{ from{ -webkit-transform: scale...
大家都知道每个浏览器对HTML元素渲染都不一样，比如说“button”，在chrome和ff中，渲染出来的效果都是不尽相同的。这样一来就有 了今天这个思路，利用浏览器的对元素的默认渲染风格，我们可以使用“appearance”属性对任何元素的渲染风格改变，最简单的来说，我要把“a”链 接默认显示成“按钮”风格，那么我们可以使用“appearance”设置为“button”。 “appearance”功能听起来蛮大的，不过可惜的是，目前各个浏览器厂商各自为...
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。 插入纯文字 content:"插入的文章"，或者content:none不插入内容 html: 这是h1这是h2 css h1::after{ content:"h1后插入内容"}h2::after{ content:none} 运行结果：https://jsfiddle.net/dwqs/Lmm1r08x/ 嵌入文字符号 可以使用content属性的open-quote属性值和close-q...
一：css3属性选择器： img[alt]{ border:2px dashed #000;} 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签。 还可以通过设定属性值来缩小匹配范围：如下代码： img[alt="atwi_oscar"]{ border:2px dashed #000;} css3的子字符串匹配属性选择器（1）‘匹配开头’的属性选择器依法如下：Element[attribute^="value"]，实例代码如下： img[alt^="filem"]{ border:2px dashed #000; } (2...