CSS回顾2

块状元素和行内元素的转换

将行内元素转换为块状元素：

.... {  
  display: block;  
}

将块状元素转换为行内元素：

....{  
  display: inline;  
}

将行内元素或块状元素转换为行内块元素

....{  
  display: inline-block;  
}

如何实现一个盒子的水平居中和垂直居中

.box {  
  margin-left: auto;  
  margin-right: auto;  
  width: 50%;
}

.container {  
  display: flex;  
  justify-content: center;  水平居中 
  align-items: center; 垂直居中
  height: 100%;
}

实现文字的水平垂直居中

.container {  
  display: flex;  
  justify-content: center; 水平居中 
  align-items: center; 垂直居中  
}

伪类选择器

hover

当用户悬停在元素上时会被触发
a:hover {  
    color: red;  
}

active

当元素被用户激活（例如，通过点击一个按钮）时会被触发。
button:active {  
    background-color: grey;  
}

first-child

当元素是其父元素的第一个子元素时，这个伪类选择器会被触发。
li:first-child {  
    color: green;  
}

focus

当元素获得焦点时会被触发。
input:focus {  
    outline: none;  
    border-color: blue;  
}

last-child

当元素是其父元素的最后一个子元素时，会被触发。
li:last-child {  
    color: orange;  
}

伪元素选择器

before

在元素的内容之前插入内容。这常常与 content 属性一起使用来定义要插入的内容。
p::before {  
    content: "Read this: ";  
    color: blue;  
}

after

在元素的内容之后插入内容。同样，这也常常与 content 属性一起使用。
p::after {  
    content: " (important!)";  
    color: red;  
}