-
@media 媒体类型and （媒体特性）{你的样式}
(max-width: 480px)
@media screen and (max-width:480px){
.ads {
display:none;
}
}
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
@media not print and (max-width: 1200px){样式代码}
<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
查看全部 -
通过link标签中的media属性来指定不同的媒体类型
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
@importurl(reset.css) screen;
@importurl(print.css) print;
<head>
<style type="text/css">
@importurl(style.css) all;
</style>
</head>
@media screen {
选择器{/*你的样式代码写在这里…*/}
}<head>
<style type="text/css">
@importurl(style.css) all;
</style>
</head>
@media screen {
选择器{/*你的样式代码写在这里…*/}
}查看全部 -
flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
查看全部 -
CSS中每一个元素都是一个盒模型，包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性
从图中可以看出padding属性和content属性层叠background-image属性，层叠background-color属性，这个是存在的，它们四者之间构成了Ｚ轴（垂直屏幕的坐标）多重层叠关系。但是border属性与margin属性、padding属性三者之间应该是平面上的并级关系，并不能构成Ｚ轴的层叠关系。
box-sizing：
w3c
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋内距＋边框＋外距
element空间宽度＝内容宽度＋内距＋边框＋外距
内盒尺寸计算（元素大小）
element高度＝内容高度＋内距＋边框（height为内容高度）
element宽度＝内容宽度＋内距＋边框（width为内容宽度）
2.IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）
内盒尺寸计算（元素大小）
element高度＝内容高度（height包含了元素内容宽度、边框、内距）
element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）查看全部 -
column-span主要用来定义一个分列元素中的子元素能跨列多少。
column-span:all;
none
此值为column-span的默认值，表示不跨越任何列。
all
这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。查看全部 -
column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>属性值
属性值说明
column-rule-width
类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。
column-rule-style
类似于border-style属性，主要用来定义列边框样式，其默认值为“none”，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
column-rule-color
类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色)查看全部 -
column-count: 3;
column-gap: 2em;
normal
默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。
<length>
此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。查看全部 -
column-count：auto | <integer>
auto
此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。
<integer>
此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。查看全部 -
column-width: auto | <length>
auto
如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。
<length>
使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。查看全部 -
多列布局columns属性参数主要就两个属性参数：列宽和列数。
columns：<column-width> || <column-count>columns: 200px 2;查看全部 -
animation-play-state属性主要用来控制元素动画的播放状态。
参数：
其主要有两个值：running和paused。
其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。查看全部 -
animation-direction:normal | alternate [, normal | alternate]*
1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。查看全部 -
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*查看全部
-
transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况查看全部
-
在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。
transition-delay:指定开始出现的延迟时间
transition-timing-function:指定过渡函数
transition-duration:指定完成过渡所需的时间
transition-property:指定过渡或动态模拟的CSS属性查看全部
举报
0/150
提交
取消