1.伪类选择器

什么是伪类?

伪类用于定义元素的特殊状态。
例如,它可以用于:

获取列表前三行

  1. .list > li:nth-of-type(-n + 3) {
  2. background-color: blue;
  3. }

效果图如下:

获取最后三个

  1. .list > li:nth-last-of-type(-n + 3) {
  2. background-color: red;
  3. }

效果图如下:

获取偶数可以用2n或者even

  1. .list > li:nth-of-type(2n) {
  2. background-color: rgb(208, 255, 0);
  3. }

效果图如下:

获取奇数可以用2n+1/2n-1/odd

  1. .list > li:nth-of-type(2n-1) {
  2. background-color: rgb(255, 0, 149);
  3. }

效果图如下:

比如获取鼠焦点

  1. <style>
  2. /* 鼠标选中状态变化 */
  3. button:hover {
  4. cursor: pointer;
  5. background-color: coral;
  6. }
  7. /* 获取焦点时变化 */
  8. input:focus {
  9. background-color: aquamarine;
  10. }
  11. </style>

效果图如下:
![

获取焦点之后的样式
![
以上是伪类的简单使用案例,下面我们讲讲盒模型常用属性

2.盒模型常用属性

我们先看下盒子的结构

如图演示

下面我们实际演示一下

我们先给盒子加个边框,设置高度和宽度!

  1. <body>
  2. <div>
  3. <p>我是一个盒子</p>
  4. </div>
  5. </body>
  6. <style>
  7. div {
  8. height: 100px;
  9. width: 200px;
  10. border: 5px solid;
  11. }
  12. </style>

效果图

下面我们先看看怎么设置外边框(我们给他设置50像素)

  1. margin: 50px;

看是不是有一个间隔了。嘿嘿

下面我们把背景裁切,只覆盖到内容区,不包括padding,方便演示一下内边框

  1. background-clip: content-box;

我们给padding一个20像素

  1. padding: 20px;

效果图如下:

以上我们就简单介绍了盒子的外边框和内边框的使用

说明:
padding:内边距,内容区和边框之间的填充物
margin: 外边距,控制盒子与其他元素之间的距离
padding和margin是不可见属性,样式,颜色是看不见的!

最后我们简单说一下还原到w3c默认标准盒子

我们直接用box-sizing:就可以还原到w3c默认标准盒子了

  1. box-sizing: content-box;

人生没有白走的路,每一步都算数!

更多相关文章

  1. 用户注册页面、简单的后台页面
  2. CSS盒子模型
  3. html简单导航与简洁课程表代码演示
  4. 实例用户注册及内联框架常用元素代码
  5. 常用表单示例
  6. Android(安卓)ScrollView中的组件设置android:layout_height="fi
  7. EditText获取焦点框的颜色改变
  8. Android(安卓)TV 智能电视/盒子 APP 开发焦点控制 两种方法实例
  9. Android中Style和Theme的使用总结

随机推荐

  1. JAVA 实现tail -f 日志文件监控功能
  2. Servlet也是一个Java类.为什么我不可以将
  3. 单例模式中的懒汉模式和饿汉模式
  4. tomcat启动web项目时候突然卡住
  5. 导致org.hibernate创建记录。MappingExce
  6. php RSA加密 JAVA 证书生成
  7. android与后台服务器的前后端通信
  8. java动态加载jar文件
  9. 003 恶补java运算(内容网摘)
  10. WebBrowser 遇到 javascript:void(0) 页