很容易理解的前端基础CSS-如何美化你的网站【零基础向】

盒子类型用样式属性display来定义，常见的该属性的值有： 弹性盒子flex，块盒子block，内联块盒子inline-block，网格grid。

css选择器以下几种：

标签，类，ID 选择器(相对简单)

属性选择器(就是在中括号里面填属性和值，如[type="submit"])

伪类和伪元素(如input：hover表示伪类，p::before表示伪元素)

关系选择器(最难，根据元素之间的父子、同胞、后代关系命名，如div>p表示div的直接子标签p)

下面为一个表单填写提交样式。

<style>

input[type="text"],

input[type="email"] {

 border: 2px solid #000;

 margin: 0 0 1em 0;

 padding: 10px;

 width: 100%;

}

input[type="submit"] {

 border: 3px solid #333;

 background-color: #999;

 border-radius: 5px;

 padding: 10px 2em;

 font-weight: bold;

 color: #fff;

}

input[type="submit"]:hover, input[type="submit"]:focus {

 background-color: #333;

}

</style>