css3在原有的基础上新增了很多css属性选择器,伪类选择器,伪对象选择器以及动画 H5=html5 + css3 +js 大前端:js 1.内减模式可以将padding内边距和边框带来增大盒子的影响去掉 语法:box-sizing:border-box; - <head>
- <meta charset="utf-8">
- <title>无标题文档</title>
- <style>
- .box{
- width:200px;
- height:200px;
- background:#099;
- border:20px solid #333;
- padding:50px;
- box-sizing:border-box;/* 设置内减模式 */
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
复制代码总结:不能去margin带来盒子大小的影响 2.新增属性选择器a) 语法:元素[属性^=值] 选择以指定字符开头的属性值的元素 - <head>
- <meta charset="utf-8">
- <title>无标题文档</title>
- <style>
- [name^='user']{
- color:red;
- }
- </style>
- </head>
- <body>
- <div name="username">这是盒子1</div>
- <div name="user-name">这是盒子2</div>
- <div name="name user">这是盒子3</div>
- <div name="user_name">这是盒子4</div>
- <div name="user">这是盒子5</div>
- </body>
复制代码 |