day11
CSS盒子模型
盒子模型的概念
盒子模型用来“放”网页中的各种元素。
网页设计中内容，如文字、图片等元素，都可是盒子（DIV嵌套）
宽度属性
宽度：width:长度值|百分比|auto
max-width:长度值|百分比|auto
min-width:长度值|百分比|auto
高度属性
高度：height:长度值|百分比|auto
max-height:长度值|百分比|auto
min-height:长度值|百分比|auto
块级元素(div p h1...)和替换元素(img input textarea)可设置高和宽属性
border属性
border-width：thin|medium|thick|长度值
border-color：transport|属性值
border-style：none|hidden|dotte|dashed|solid|double
padding(内边距)
padding-top:长度|百分比|auto
padding-right:长度|百分比|auto
padding-left:长度|百分比|auto
padding-bottom:长度|百分比|auto
margin(外边距)
margin-top:长度|百分比|auto
margin-right:长度|百分比|auto
margin-left:长度|百分比|auto
margin-bottom:长度|百分比|auto
margin可设置为负值
margin设置为auto后，实现水平方向居中显示效果
由浏览器计算外边距
垂直方向，两个相邻元素都设置外边距，外边距会发生合并
合并后的外边距高度=两个发生合并外边距的高度中的最大值
块级元素
内联元素
display属性
inline元素将显示为内联元素，元素前后没有换行符
block元素讲显示为块级元素，元素前后会带有换行符
1.相应内联元素(inline)及使用display:inline设置成内联元素的元素width和height属性无效。
水平方向margin-left/margin-right/padding-left/padding-right有效
2.块级元素(block)及使用display:block设置成块级元素的元素width/height/margin/padding属性都生效
inline-block
行内块级元素，元素呈现为inline，具有block相应特性
none
此元素不会被显示
案例：
1.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>高宽属性</title> ???<style type="text/css"> ???????div{ ???????????background-color: #ececec; ???????????width: auto; ???????} ???????p{ ???????????background-color: #acacac; ???????????width: 400px; ???????} ???????.one{ ???????????max-width: 350px; ???????} ???????.two{ ???????????min-width: 500px; ???????} ???????.three{ ???????????max-width: 600px;min-width: 500px; ???????} ???</style></head><body> ???<div> ???????<p>width: 400px;</p> ???????<p class="one">max-width: 350px;</p> ???????<p class="two">min-width: 500px;</p> ???????????<p class="three">max-width: 600px;min-width: 500px;</p> ???????</div> ???</body></html>2.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>边框属性</title> ???<style type="text/css"> ???????p{ ???????????line-height: 100px; ???????????width: 150px; ???????????height: 100px; ???????????border-width: thin; ???????????border-color:#09e; ???????????border-style:dashed; ???????} ???</style></head><body> ???<p>边框属性border</p></body></html>3.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>padding和margin</title> ???<style type="text/css"> ???????/*.one{ ???????????width: 300px; ???????????height: 300px; ???????????background-color: #acacac; ???????????padding: 20px 10px 5px 8px; ???????} ???????.content{ ???????????width: 90%; ???????????height: 90%; ???????????background-color: #ececec; ???????}*/ ???????.content{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: #ececec; ???????????margin:auto; ???????} ???????.one{ ???????????width: 300px; ???????????height: 300px; ???????????background-color: #acacac; ???????????margin-bottom: 20px; ???????} ???????.two{ ???????????width: 300px; ???????????height: 300px; ???????????background-color: #acacac; ???????????margin-top: 30px; ???????} ???</style></head><body> ???<!-- <div class="one"> ???????<div class="content">padding属性</div> ???</div> --> ???<!-- <div class="one">margin属性</div> --> ???<div class="one"> ???????<div class="content">margin属性</div> ???</div> ???<div class="two"> ???????<div class="content">margin属性</div> ???</div></body></html>5.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>display属性</title> ???<style type="text/css"> ???????div,span{ ???????????border: 1px red solid; ???????} ???????div{ ???????????display: inline; ???????} ???????span{ ???????????display: block; ???????} ???????.one{ ???????????display: none; ???????} ???????a:hover .one{ ???????????display: inline; ???????} ????</style></head><body> ???<!-- 块级元素 --> ???<div>display属性-div</div> ???<div>display属性-div</div> ???<div>display属性-div</div> ???<hr> ???<!-- 内联元素 --> ???<span>display属性-div</span> ???<span>display属性-div</span> ???<span>display属性-div</span> ???<a href="#">click me! ???<span class="one">hello world!</span></a></body></html>6.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>应用</title> ???<style type="text/css"> ???????body,p,div{ ???????????margin:0; ???????????padding: 0; ???????????font-family: "微软雅黑"; ???????} ???????.course{ ???????????width: 220px; ???????????background-color: #f2f4f6; ???????????border: 1px #ececec solid; ???????????margin:0 auto; ???????} ???????.list1{ ???????????width: 100%; ???????????height: 90px; ???????????background-color: #040a10; ???????????padding-top: 60px; ???????} ???????.content{ ???????????font-size: 20px; ???????????color: white; ???????????font-weight: bold; ???????????text-align: center; ???????} ???????.list2{ ???????????font-size: 14px; ???????????border-bottom: 1px #d9dde1 solid; ???????????margin: 0 15px; ???????????padding: 10px 5px 5px 5px; ???????????line-height: 1.5em; ???????} ???????.special{ ???????????border-bottom: none; ???????} ???????span{ ???????????font-size: 12px; ???????????color: #93999f; ???????} ???</style></head><body> ???<div class="course"> ???????<div class="list1"> ???????????<p class="content">前端课程排列</p> ???????</div> ???????<div class="list2"> ???????????<p>HTMl+CSS基础</p> ???????????<span>45678人在学</span> ???????</div> ???????<div class="list2"> ???????????<p>HTMl+CSS基础</p> ???????????<span>45678人在学</span> ???????</div> ???????<div class="list2"> ???????????<p>HTMl+CSS基础</p> ???????????<span>45678人在学</span> ???????</div> ???</div></body></html>02css盒子模型11
原文地址：https://www.cnblogs.com/shink1117/p/8436572.html