linjiayuqazwsx的博客

类似报纸杂志一样的布局设计[1] columnscolumns: column-width column-count.wrapper{ width:800px; margin:0 auto; /*10em 每列宽度*/ /*3 列数*/ columns:10em 3; -moz-columns:10em 3; -webkit-columns:

盒模型是css中非常的重要 百度 tencent 美团 等等等等等等 校招面试都问过的问题(1) W3C & IE 两种盒模型<div><p class="p1"> Citic Securities </p></div>/*在p外面 定义一个div 为了方便看清楚*/div{ display: inline-block; border:1px solid red;}p{

(1) opacity针对一个元素 从0~1 (2) alpha(rgba)针对颜色(3) rgba IE兼容处理IE8以下版本出现的问题:解决 (1)filter:alpha(opacity=50);(2)

(1) 字体font-size font-weight font-family font-style: eg italic font-variant: small-caps 变为大写123<span class="span">jessica krystal</span>span{ font-variant: small-caps;}(2) 文本word-spacing let

渐进增强： Progressive enhancement 先满足低端浏览器的需求, 重点是能看到内容优先 再向更高级浏览器, 往上满足更多需求 更好满足用户的体验Example: 除了IE5 以外, 其他的版本均正常, Alibaba也是牛bility。说明是: 渐进增强 IE8: IE7: IE5: 优雅降级： Graceful degradation 先满

(1) 基本选择器(1) 通用 * (2) 元素 element (3) ID id (#) (4) 类 class (.) (5) 群组 合并 element1,element2 (2) 层次选择器(1) 儿子 Element1 > Element2(2) 后代 (儿子+ 孙子 +………) Element1 Element2(空格)(3)

background: image | position | size | repeat | attachment | clip |origin(1) 基础background-color background-image: url(); background-repeat: repeat-x repeat-y background-attachment: scroll fixed (背

[1] Borderborder: border-width border-style border-color (eg: border-style: dotted/ solid/ dashed) [2] Border-radiusborder-radius: 左上 右上 右下 左下 [3] Border-radius 应用(3-1) 圆形border-radius 制作圆形 条件： (

(1) Media Query<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> @media screen and (max-width: 600px) { 选择器 { 属性：属性值； } }Reference: 媒介查询(2) Responsive Des

Transition: 只能指定属性的开始和结束状态Animation: 通过Flash中帧来声明动画animation-nameanimation-duration 播放动画所持续的时间长animation-timing-function 动画的播放方式animation-delay 指定元素动画开始时间animation-iteration-count 指定元素播放动画的循环次数a

Reference: Click Here(1) Transition 平滑过渡的效果， 部分的解决Flash问题 transition：属性 时间 函数 延迟时间 执行变换的属性：transition-property 变换延续的时间：transition-duration 动画函数：transition-timing-function 变换

X/Y: translateX() translateY() scaleX() scaleY() skewX() skewY() CSS3 2D: translate() scale() rotate() skew() CSS3 3D: rotateX() rotateY() rotate3d() translateZ() translate3d() scaleZ() scale3d()

正常的布局是块元素从上到下(因为占用一行) 内联元素从左到右. 但是flexbox是让子项目尽量的改变高度宽度，用最好的方式适应各种的设备。(1) Display: flex | inline-flexflex: 按照 块 伸缩 inline-flex: 内联 伸缩设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。【面试题】 除了display：