day11
CSS盒子模型
盒子模型的概念
盒子模型用来“放”网页中的各种元素。
网页设计中内容，如文字、图片等元素，都可是盒子（DIV嵌套）
宽度属性
宽度：长度值|百分比|auto
max-长度值|百分比|auto
min-长度值|百分比|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> 400px;</p> <p class="one">max- 350px;</p> <p class="two">min- 500px;</p> <p class="three">max- 600px;min- 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{ 300px; height: 300px; background-color: #acacac; padding: 20px 10px 5px 8px; } .content{ 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>