学习css的第二节课
background：
<style>
div{
width: 100px;
height: 100px;
background-color: brown;
/* 使用北京图片默认占满div */
background-image: url(./tv01.jpg);
background-repeat: no-repeat;/* 只出现一次不重复 */
background-position: 20px 20px;/* x,y轴改距离 */
background-position: left right ;
/* background-position：right bottom ; */
/* 符合选择器 */
/* background:color:azure url(./) 250px center no-repeat; */
/* 顺序可颠倒 */
}
</style>
盒子： <style>
*{/* 通配符表示所有元素 */
margin: 0px; padding: 0px; }
div {
width: 200px;
height: 200px;
background-color: blue;
padding: 10px;/* padding 会改变div宽高 */
border: 10px solid red;/* border:边框 */
margin: 30px;
}
</style>
</head>
<body>
<div>
1
</div>
<!-- <p>
2
</p>
<em>
3
</em> -->
</body>
div{
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
/* border也是复合属性 */
/* 上边框粗细 */
/* border-top-width: 80px;
border-top-style: solid; */
/* 想让边框粗细显示出来必须规定样式 */
/* border-top-color: red;
border-right-color: transparent;
border-right-style: solid;
border-right-width: 80px;
border-bottom-color: transparent; */
/* border-bottom-style: dashed; */
/* border-bottom-width: 80px; */
/* border-left-color: transparent; */
/* border-left-style: solid; */
/* border-left-width: 80px; */
border-width:80px;
border-color: transparent;
border-style: solid;
border-top-color: red;
/* solid实线 dashed虚线边框 dotted点状边框 doble双实线*/
/* 由三个元素组成边框 */
/* 盒子模型顺序上，右，下，左 */
/* 做三角形，留一个边，全设置透明色transparent */
/* border: 100px solid transparent;
border-color: red; */
/* 最简写法 */
