CSS

CSS

一、左右布局：左边定宽、右边自适应，不少于3种方法

下面是几种方法：

1、利用flex

HTML

1. <div class="use-flex">

2. <div class="col1"></div>

3. <div class="col2"></div>

4. </div>

css

1. .use-flex{

2. display:flex;

3. display:-webkit-flex;

4. }

5. .col1{

6. background-color:green;

7. height:300px;

8. width:100px;

9. flex-shrink:0;

10. }

11. .col2{

12. background-color: red;

13. width:100px;

14. flex-grow:1;

15. }

2、 利用position:absolute

HTML

1. <div class="container">

2. <div class="col1"></div>

3. <div class="col2"></div>

4. </div>

• css

1. .container{

2. position:relative;

3. }

4. .col1{

5. position:absolute;

6. left:0;

7. top:0;

8. background-color: green;

9. width:100px;

10. height:300px;

11. }

12. .col2{

13. padding-left:100px;

14. background-color: red;

15. height:300px;

16. }

•  

3、利用table布局

HTML

1. <table>

2. <tr>

3. <td class="col1"></td>

4. <td class="col2"></td>

5. </tr>

6. </table>

• css

1. table{

2. width:100%;

3. height:300px;

4. }

5.  

6. .col1{

7. width:100px;

8. background-color: green;

9. }

10. .col2{

11. background-color: red;

12. }

4、使用float

HTML

1. <div class="container">

2. <div class="col1"></div>

3. <div class="col2">dfd</div>

4. </div>

• css

1. .container{

2. overflow:hidden;

3. zoom:1;

4. }

5. .col1{

6. background-color: green;

7. width:100px;

8. height:300px;

9. float:left;

10.  

11. }

12. .col2{

13. margin-left:100px;

14. background-color: red;

15. height:300px;

16. }

二、css3用过哪些新特性

新特性有：

• border-radius 圆角, @font-face 字体, box-shadow text-shadow 框和文本的阴影
• word-wrap, background-size, background-origin, border-image, box-sizing, calc, linear-gradient 等等
• transform 转换
  • 2D 转换
    • rotate 旋转，图片转个90或180度什么的
    • translate 位置移动
    • scale, skew, matrix 等
  • 3D 转换
    • rotate(XYZ) 根据x,y,z轴旋转
    • translate(XYZ), scale(XYZ) 同理
    • perspective 透视，这个很多3D效果都要设置一下，不然3D还是只会有”2D”的效果
• transition: 过渡，简单的动画（如：移个位置，变个长短），直接用这个属性就能搞定。
• animation: 动画，3D可以调用硬件渲染。
• 新的长度单位：rem， ch，vw，vh，vmax，vmin 等。其中ch:数字“0”的宽度,vw 相对于视窗的宽度：视窗宽度是100vw.
• clip-path: 绘制路径，类似SVG技术。 国外炫酷产品。
• flex: flex布局，继 table 和 div 后的趋势，不了解或不熟悉的可以参考cssreference。
• 伪类选择器：如::target, :enabled, :disabed, :first-child, last-child等等
• @media 媒体查询，适用于一些响应式布局中
• columns: 分栏布局。
• will-change: 改善渲染性能, 参考使用CSS3 will-change提高页面滚动、动画等渲染性能。

input 的值