Html中所有元素都是盒子，那么盒子的元素的基本设置是***的呢？
盒子三元素 外边距 边框 内边距，其中外边距margin和内边距padding是透明，仅有一种属性为宽度，而边框不仅有宽度，还有样式及颜色，所以 内外边距的完整语法如下：
margin-top: 200px;
margin-right: 250px;
margin-bottom: 300px;
margin-left: 150px;
简写如下：
margin: 200px 250px 300px 150px; 其中上下一样的话可以省略掉第三个，左右一样可以省略第四个，4面均一样可以只写一个宽度。
内边距与外边距语法相同
边框的完整语法如下：（仅写borader-top的语法，其他方向语法相同）
border-top-width: 10px;
border-top-style: double;
border-top-color: red;
简写为：border-top: 10px double red; 三属性分别为 宽度、样式、颜色，同样下一样的话可以省略掉第三个，左右一样可以省略第四个，4面均一样可以只写一个宽度。
以下为CSS中基本选择器的应用：
/*标签选择器*/
ul {
list-style: none;
padding: 0;
}
/*层级选择器*/
ul li {
display: inline-block;
line-height: 50px;
width: 50px;
text-align: center;
border: 1px solid black;
margin: 5px auto;
/*background: lightcyan;*/
border-radius: 20%;
}
/*类选择器*/
.red {
background: lightcoral;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: lightblue;
}
.green {
background-color: green;
}
.purple {
background-color: purple;
}
/*id选择器*/
#today {
/*background-color: white;*/
}
/*属性选择器*/
li[class="purple"] {
background-color: green;
}
/*群组选择器*/
.red, #yesterday {
/*background-color: darkgray;*/
}
/*相邻选择器*/
.red + * {
background-color: yellow;
}
/*兄弟选择器*/
.yellow ~ * {
background-color: green;
}
/*子元素选择器*/
ul :first-child {
background-color: green;
}
ul :last-child {
background-color: purple;
}
ul :nth-child(5) {
background-color: purple;
}
ul :nth-child(2n) {
background-color: purple;
}
ul :first-of-type {
background-color: lightgreen;
}
ul :last-of-type {
background-color: lightgreen;
}
ul :nth-of-type(2n-1) {
background-color: yellow;
/*子元素选择器中 first-of-type 选中所有类型的第一个元素*/
div :first-of-type {
background-color: lightgreen;
}
/*标签后面不加空格直接加":"+"first-of-type" 为对当前标签类型的选中 后面+空格+nth-child(2)是对下一个层级的选择，括号里的数字从1开始*/
div:first-of-type :nth-child(3) {
background-color: blue;
}
/*选择所有div下面属性为li的最后一个li标签*/
div li:last-of-type {
background-color: blue;
}
div:last-of-type li:first-of-type {
background-color: yellow;
}
div :nth-of-type(3) {
background-color: purple;
}
/*不选择div标签的时候不是把所有li算一个集合，而是跟选择了div标签一样每个div下的li各算一个集合*/
li:nth-of-type(2) {
background-color: yellow;
/*}*/
p:nth-of-type(2) {
background-color: purple;
}
/*p标签中仅有1个元素的标签被选择*/
p:only-of-type {
background-color: yellow;
}
最后是表单中各种选择器的引用：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类表单控件</title> <link rel="stylesheet" href="static/CSS/style4.css"> </head> <body> <h1>注册/登录</h1> <hr> <div> <form action="" method="post"> <p> <label for="username">姓名：</label> <input type="text" id="username" placeholder="手机号/邮箱"> </p> <p> <label for="username">密码：</label> <input type="password" id="password" placeholder="字母和数字不低于8位" autocomplete="new-password"> </p> <p> <label for="verdfiy">验证码：</label> <input type="text" id="verdfiy"> <button type="button">点击发送</button> </p> <p> <label >保存时间</label> <input type="radio" name="limit" value="week" id="week" ><label for="week" >一周</label> <input type="radio" name="limit" value="month" id="month"><label for="month" >一个月</label> </p> <button type="submit" name="sbm">登录</button> <button type="reset">重置</button> </form> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
div {
width: 500px;
height: 400px;
border: 1px solid ;
/*background-color: lightgreen;*/
/*text-align: center;*/
margin-left: 20px;
padding-left: 20px;
}
#verdfiy {
width: 74px;
}
/*表单可用区域背景设置*/
form :enabled {
background-color: lightblue;
}
/*选中项目字体颜色设置*/
form :checked + label {
color: red;
}
/*表格内填写数据有效性，未测试*/
form :invalid {
color: red;
}
/*焦点区域格式*/
form :focus {
background-color: yellow;
}
/*使用属性选择器进行选择对应按钮再进行样式选择*/
button[name="sbm"]:hover {
width: 60px;
height: 25px;
background-color: black;
color: white;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
断断续续用了半天时间，所有选择器都使用了一遍，很实用，特别是表单中的样式设置，相信以后会用得上，做更好的人机交互的前端页面