css3和css2的区别

[复制链接]
查看1501 | 回复0 | 2020-7-23 13:55 | 显示全部楼层 |阅读模式
css3在原有的基础上新增了很多css属性选择器,伪类选择器,伪对象选择器以及动画
H5=html5 + css3 +js
大前端:js
1.内减模式
可以将padding内边距和边框带来增大盒子的影响去掉
语法:box-sizing:border-box;
  1. <head>
  2. <meta charset="utf-8">
  3. <title>无标题文档</title>
  4. <style>
  5.         .box{
  6.                 width:200px;
  7.                 height:200px;
  8.                 background:#099;
  9.                 border:20px solid #333;
  10.                 padding:50px;
  11.                 box-sizing:border-box;/* 设置内减模式 */        
  12.         }
  13. </style>
  14. </head>

  15. <body>
  16. <div class="box"></div>
  17. </body>
复制代码
总结:不能去margin带来盒子大小的影响
2.新增属性选择器
a) 语法:元素[属性^=值]
选择以指定字符开头的属性值的元素
  1. <head>
  2. <meta charset="utf-8">
  3. <title>无标题文档</title>
  4. <style>
  5.         [name^='user']{
  6.                 color:red;       
  7.         }
  8. </style>
  9. </head>

  10. <body>
  11. <div name="username">这是盒子1</div>
  12. <div name="user-name">这是盒子2</div>
  13. <div name="name user">这是盒子3</div>
  14. <div name="user_name">这是盒子4</div>
  15. <div name="user">这是盒子5</div>
  16. </body>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-4-30