1、盒子margin、padding、border的基本用法：①margin padding只有宽度属性，border不仅有宽度属性还有颜色、样式属性。② padding: 20px;代表上右下左宽度相同。padding：20px 30px；代表上下相同且为20px，左右相同为30px。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一切皆盒子</title>
<link rel="stylesheet" href="static/css/xxxx1.css">
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
.box1 {
width: 200px;
height: 200px;
background: blueviolet;
padding: 20px;
border-bottom-color: olivedrab;
border-bottom-style: dashed;
border-bottom-width: 20px;
border: olive double 30px;
border-radius: 170px;
margin: 20px;
}
.box2 {
background-color: yellowgreen;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
2、选择器
①在各种选择其中后面的会覆盖前面的。
②伪类选择q器中：child注重位置，type注重类型
③在选择器的使用中，根据自己所设计的实际内容选择更适合、更简单的选择器在实际中是非常重要的。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/sss.css">
<title>选择器</title>
</head>
<body>
<ul>
<li class="bg-green">1</li>
<li id="bg-blue">2</li>
<li >3</li>
<li >4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div>
<p>李宇春</p>
<li>张靓颖</li>
<p>周笔畅</p>
</div>
<div>
<p>易烊千玺</p>
<li>雷佳音</li>
</div>
<form action="">
<p>
<label for="email">邮箱：</label>
<input type="email" id="email">
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password">
</p>
<p>
<input type="radio" id="week" name="save" value="7" >
<label for="week">保存一周</label>
<input type="radio" id="month" name="save" value="30" >
<label for="month">保存一月</label>
</p>
<button>登录</button>
</form>
</body>
</html>
/*标签选择器*/
ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
/*border: 1px solid black;*/
}
/*元素选择器也称后代选择器*/
ul li {
/*list-style: none;*/
/*width: 50px;*/
/*height: 50px;*/
/*background-color: yellow;*/
/*border: 1px black solid;*/
/*text-align: center;*/
/*line-height: 50px;*/
/*border-radius: 50%;*/
/*display: inline-block;*/
/*margin-left: 5px;*/
/*box-shadow: 2px 2px 2px #888888;*/
}
/*id选择器*/
#bg-blue {
/*background-color: aqua;*/
}
/*类选择器*/
.bg-green {
/*background-color: bisque;*/
}
/*属性选择器*/
li[id="bg-blue"] {
/*border: 2px solid red;*/
}
/*群组选择器 常用语初始化*/
#bg-blue,.bg-green {
/*border: 2px solid blue;*/
}
/*#bg-blue + .bg-green {*/
/*background-color: palevioletred;*/
/*}*/
/*兄弟选择器*/
/*#bg-blue ~ *{*/
/*background-color: palevioletred;*/
/*}*/
/*!*伪类选择器*!子元素选择器*/
ul :first-child {
/*background-color: red;*/
}
ul :last-child {
/*background-color: red;*/
}
ul :nth-child(odd) {
/*background-color: yellowgreen;*/
}
ul :nth-child(even) {
/*background-color:black;*/
}
/*位置*/
ul :nth-last-child(3){
/*background-color: yellowgreen;*/
}
/*类型*/
ul li:nth-of-type(5) {
/*background-color: bisque;*/
}
div:first-of-type :nth-child(3){
/*background-color: yellowgreen;*/
}
div :nth-child(2) {
/*background-color: #888888;*/
}
/*表单*/
/*选择能够使用的*/
form :enabled{
/*background-color: yellowgreen;*/
}
form :focus {
background-color: bisque;
}
button :hover{width: 60px;
height: 50px;
background-color: black;
border: none;
border-radius: 6px;
box-shadow: 5px 3px 5px #888888;
color: white;
}运行实例 »
点击 "运行实例" 按钮查看在线实例