국경 스타일의 값 :
없음 없음
점선 점선
점선 점선
고체 실선
이중 이중 실선
여유:
두 개의 수직으로 인접한 요소 세트 마진은 마진 합병 것입니다
두 큰 값의 결합 된 높이 = 결합 마진 발생
= 여유 높이 내의 상부 프레임 부재의 상부 마진의 실제 높이 + + + + 콘텐츠 하단 테두리
마진 아래쪽 여백 높이 + + + 하단 테두리에 아래쪽 여백 + + + 콘텐츠 내 프레임의 여백 : 페이지의 실제 높이 요소 점유
호버 속성 롤오버 하위 요소를 표시 :
专门建立的学习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>
인라인 요소는 인라인 요소, 이전과 요소 다음없고 줄 바꿈을 표시
인라인 요소의 폭과 높이를 설정할 수없고, 여백은 아래로 설정할 수없는 위와 주위에 설정 될 수있다
목록 데모 :
<!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>
호버 데모 보여
专门建立的学习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>
배경 색상 : 투명 투명, 그것은 기본입니다
배경 지역은 마진을 포함하지 않는 내용 + 패딩 + 국경을 포함
배경 - 반복 : 반복, 아니 반복, 반복-X, 반복-Y, 상속
배경-첨부 : 스크롤 (默认) / 고정
배경 위치 :
값 (XY) (X, Y %는 %) / 상 / 하 / 좌 / 우 / 중심 (수직 중앙 가로) (제를 나타내는 하나의 파라미터는 기본적으로 중심)
배경 단축형 순서 속성 값에 관계없이, 후자
정렬 된 목록 스타일 :
목록 스타일 위치 : (모든 텍스트의 왼쪽) 내부 (텍스트에 포함) / 외부
<!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>
