note-css-it-web

css A4 A3 A5 page

https://codepen.io/rafaelcastrocouto/pen/LFAes
https://alistapart.com/article/boom/

body {
background: rgb(204,204,204);
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size=”A4”] {
width: 21cm;
height: 29.7cm;
}
page[size=”A4”][layout=”landscape”] {
width: 29.7cm;
height: 21cm;
}
page[size=”A3”] {
width: 29.7cm;
height: 42cm;
}
page[size=”A3”][layout=”landscape”] {
width: 42cm;
height: 29.7cm;
}
page[size=”A5”] {
width: 14.8cm;
height: 21cm;
}
page[size=”A5”][layout=”landscape”] {
width: 21cm;
height: 14.8cm;
}
@media print {
body, page {
margin: 0;
box-shadow: 0;
}
}







选择器

属性选择器

伪类/伪元素

定位

  • Fixed
  • Absolute (最近的已定位父元素)
  • relative
  • stick
  • static

CSS3

2D/3D 转换-transform

translate rotate scale skew matrix

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); / IE 9 /
-webkit-transform: rotate(30deg); / Safari and Chrome /
}

字体

过渡 trasition 可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。

transition-property transition-delay transition-duration transition-property-timing-function transition-delay

@keyframes 定义动画,animation(name ,duration) 调用动画

? 过渡和动画的区别 : 过渡是简单的动画。
1)动画不需要事件触发,过渡需要。
2)过渡只有一组(两个:开始-结束) 关键帧,动画可以设置多个。

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

Flex


--Write by Marcustar,关关雎鸠,在河之洲
目录
Download 相册