border-style value:
none None
dotted dotted
dashed dotted line
The solid line solid
double double solid line
margin：
Two vertically adjacent elements are set margins, the margins will merger
The combined height of the two larger values = combined margins occurring in
= Actual height of the upper frame element top margin + + + content within the margin height + bottom border
Elements in the page's actual height is occupied by: the margins on the inner frame + + + content on margin bottom margin + height + bottom border + bottom margin
hover property rollovers display sub-elements:
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css"> div { width: 200px;
}
/*补充样式*/ ul{ margin-left:-36px;
} li{ display: none;
} div:hover li{ display: inline-block; list-style: none;
}
</style>
</head>
<body>
<div>
<h2>家电</h2>
<ul>
<li>冰箱</li>
<li>空调</li>
<li>洗衣机</li>
</ul>
</div>
</body>
</html>
The inline element displayed inline element, no line break before and after the element
Inline elements can not set the width and height, margins can only be set around, up and down can not be set
List demo:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css"> *{margin:0;padding:0;} .wrap { width: 220px; background-color:#f2f4f6; border:1px solid #ececec; margin:0 auto;
} .list{ width:100%; height:150px; background-color:#040a10; text-align:center; color:#fff; line-height:150px; font-size:20px; font-weight:bold;
} li{ list-style: none; border-bottom:1px solid #d9dde1; font-size:14px; line-height:1.5em; margin:0 15px; padding:10px 5px 5px 5px;
} li:last-child{ border-bottom:none;
}
</style>
</head>
<body>
<div class="wrap">
<div class="list">
<p>前端课程排列</p>
</div>
<ul>
<li>
<p>HTML+CSS基础课程</p>
<span>456605人在学</span>
</li>
<li>
<p>HTML+CSS基础课程</p>
<span>456605人在学</span>
</li>
<li>
<p>HTML+CSS基础课程</p>
<span>456605人在学</span>
</li>
</ul>
</div>
</body>
</html>
Hover show demo:
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css"> *{margin:0;padding:0;} .big{width: 150px;margin: 10px auto 0 auto;background: #f2f4f6;border: 1px solid #ddd;} h3{height: 40px;line-height: 40px;text-align: center;} .div1 h3{border-bottom: 1px solid #ddd;} .div2 h3{border-bottom: 1px solid #ddd;} ul{background-color:#fff;display: none;} ul li{ height: 30px;line-height: 30px;margin-left: 58px;list-style: none;} .div1:hover .elec{display: block;border-bottom: 1px solid #ddd;} .div2:hover .wash{display: block;border-bottom: 1px solid #ddd;} .div3:hover .clothes{display: block;border-top: 1px solid #ddd;}
</style>
</head>
<body>
<div class="big">
<div class="div1">
<h3>家电</h3>
<ul class="elec">
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div class="div2">
<h3>洗护</h3>
<ul class="wash">
<li>洗衣液</li>
<li>消毒液</li>
<li>柔顺剂</li>
</ul>
</div>
<div class="div3">
<h3>衣物</h3>
<ul class="clothes">
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>
background-color: transparent transparent, it is the default
Background area includes content + padding + border, not including margins
background-repeat：repeat、no-repeat、repeat-x、repeat-y、inherit
background-attachment:scroll（默认）/ fixed
background-position:
Value (xy) (x% y%) (only one parameter representing the second centered by default) / top / bottom / left / right / center (vertical center horizontal)
background shorthand: the latter regardless of order attribute value
Ordered list style:
list-style-position: inside (embedded in the text) / outside (left side in all text)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style> li{ list-style-image:url(http://climg.mukewang.com/58dc9e4e0001ba9000160016.png);
}
</style>
</head>
<body>
<ul>
<li>电视</li>
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</body>
