display、overflow、隐藏、border、margin、样式支持，层级结构
一、盒模型之display
1、三种样式
| block | 块 |
| inline | 内联/行内 |
| inline-block | 内联块 |
2、block、inline、inline-block的区别
（1）display:block
- block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度
- 可以设置宽高，宽默认适应父级，高默认由子级或内容撑开
- 设置宽高后，一定采用设置的宽高
（2）display:inline
- 同行显示，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
- 不支持宽高
（3）display:inline-block
- 同行显示，之间有间距
- 支持宽高，宽高由内容撑开
- 设置宽高后，一定采用设置的宽高，但只设置其中一个，另一个会根据内容等比缩放
3、嵌套规则
- 块可以嵌套所有类型(p一般只允许嵌套内联)
- 内联一般只嵌套内联
- 内联块一般只作为最内层级
div的display默认为block
4、案例
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>display</title> <!-- 默认值 --> <style type="text/css"> /*块:1.独行显示 2.支持宽高,宽默认适应父级,高默认由子级或内容撑开 3.设置宽高后,一定采用设置的宽高*/ /*内联:1.同行显示 2.不支持宽高*/ /*内联块:1.同行显示,之间有间距 2.支持宽高,宽高由内容撑开 3.设置宽高后,一定采用设置的宽高,但只设置其中一个,另一个会根据内容等比缩放*/ /*嵌套规则:*/ /*块可以嵌套所有类型(p一般只允许嵌套内联)*/ /*内联一般只嵌套内联*/ /*内联块一般只作为最内层级*/ div { /*块*/ display: block; /*自适应父级可用content的宽度*/ /* auto;*/ /*默认0*/ /*height: 0px;*/ } span { /*内联*/ display: inline; /*不支持宽高*/ } img { /*内联块*/ display: inline-block; width: auto; height: auto; } </style> <!-- 验证宽高设置 --> <style> .sup { /* 100px;*/ /*height: 100px;*/ background-color: orange } .sub { width: 200px; height: 200px; background-color: cyan } .s1, .s2 { width: 200px; height: 200px; background-color: brown } img { /* 350px;*/ height: 350px; } </style> </head> <body> <div></div> <span></span> <img src="./img/icon.jpg" alt=""> <img src="./img/icon.jpg" alt=""> <div class="sup"> <div class="sub"></div> </div> <span class="s1">123</span> <span class="s2">456</span> </body> </html>
二、盒模型之overflow
在display:block的大环境之下
1、功能
用于调整显示区域，当父级区域太小，不能在父级的区域内完全显示子级的内容，课通过overflow来调整显示结果
2、显示方式
| auto / scroll | 以滚动的方式允许子级所有内容显示 |
| hidden | 只显示在父级区域中的内容，不在该区域中的内容不显示 |
3、案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>voerflow</title> <!-- 由父级大小决定 --> <style type="text/css"> /*子级区域大于父级*/ .sup { width: 100px; height: 100px; /*默认值*/ /*border: 3px none black;*/ /*清除边框*/ /*border: 0;*/ /*border: none;*/ /*最简单的设置*/ border: solid; } .sub { width: 200px; height: 200px; background-color: red } /*对父级进行overflow设置*/ .sup { /*以滚动的方式允许子级所有内容显示*/ overflow: auto; /*overflow: scroll;*/ /*只运行子级在父级所在区域的部分显示,超出的部分影藏*/ /*overflow: hidden;*/ } </style> </head> <body> <!-- display: block大环境下 --> <!-- <div class="sup"> <div class="sub"></div> </div> --> <div class="sup"> 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 </div> </body> </html>
三、盒模型之隐藏
1、三种隐藏的方式
.d1 {
background-color: red;
/*1. 以背景颜色透明度隐藏,不推荐*/
/*盒子还在,内容或子级标签均会被显示*/
background-color: transparent;
}
.d2 {
background-color: orange;
/*2. 以盒子透明度隐藏:0~1*/
/*盒子真正意思上透明,但盒子区域占位还在*/
opacity: 0;
}
.d3 {
background-color: cyan;
/*3. 盒子从文档中移除,盒子的区域占位消失*/
/*当盒子重新获得显示方式,该盒子依旧从消失位置显示*/
display: none;
}
2、应用
鼠标悬浮在某一个区域，才显示内容，否则内容隐藏
/*鼠标悬浮在.d3标签上才显示隐藏的内容*/ /*注意display是根据隐藏内容的方式确定显示内容的方式*/ .body:hover .d3{ display:block; }
3、案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隐藏</title> <style type="text/css"> /*盒子间会相互影响*/ div { width: 100px; height: 100px; } .d1 { background-color: red; /*以背景颜色透明度隐藏,不需要掌握*/ /*盒子还在,内容或子级标签均会被显示*/ background-color: transparent; } .d2 { background-color: orange; /*以盒子透明度隐藏:0~1*/ /*盒子真正意思上透明,但盒子区域占位还在*/ opacity: 0; } .d3 { background-color: cyan; /*盒子从文档中移除,盒子的区域占位消失*/ /*当盒子重新获得显示方式,该盒子依旧从消失位置显示*/ display: none; } .d4 { background-color: yellow; } /*需求:通过悬浮body让d3重新显示*/ /*1.明确控制的对象 2.确定对该对象的修饰 3.找出修饰与对象的关系*/ /*body:hover .d3*/ .d1:hover ~ .d3 { display: block; } </style> </head> <body> <div class="d1">内容</div> <div class="d2">内容</div> <div class="d3"></div> <div class="d4"></div> </body> </html>
四、盒模型之border
可以通过对border四个方位的调整显示各种规则，例如调整各个方位的是否透明（transparent），可以实现获取三角形、梯形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>border</title> <!-- 画梯形 --> <style type="text/css"> .bd { width: 100px; height: 100px; background-color: transparent; } .bd { /*border: 50px solid orange;*/ border-top: 50px solid orange; border-right: 50px solid cyan; border-bottom: 50px solid yellow; border-left: 50px solid blue; /*border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent;*/ } </style> <!-- 画三角形 --> <style type="text/css"> .bd { width: 0; height: 0; } .bd { border-top: 50px solid orange; border-right: 50px solid cyan; border-bottom: 50px solid yellow; border-left: 50px solid blue; } /*吃球球的小球*/ /*.bd { border-radius: 50%; border-right: 50px solid transparent; }*/ </style> </head> <body> <div class="bd"></div> </body> </html>
五、盒模型之margin
/*需求1:父级sup左上右顶格显示*/
html, body {
/*body默认具有margin: 8px*/
margin: 0;
}
.sup {
width: auto;
height: 200px;
background-color: red;
}
.sub {
width: 100px;
height: 100px;
background-color: orange;
}
/*需求2:子级sub在父级sup的水平中央显示*/
.sub {
/*上下0,左右auto*/
/*auto:左右auto,自适应(平方)剩余可布局空间*/
margin: 0 auto;
}
/*需求3:sub在sup的垂直中央显示*/
/*垂直会遇到margin父子坑*/
.sup {
height: 100px;
padding: 50px 0;
}
/*.sup {
height: 100px;
border-top: 50px solid red;
border-bottom: 50px solid red;
}*/
/*需求4:sub在sup的水平居右显示*/
.sub {
margin-left: auto;
/*margin-right: 0;*/
margin-right: 10px;
}
六、盒模型之样式支持
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>样式支持</title> <!-- 认识a标签一般怎么操作 --> <!-- 需求:具有页面转跳功能的图片 --> <style type="text/css"> a { color: #333; text-decoration: none; display: block; } </style> <!-- 需求:图片在sup水平垂直中央显示 --> <!-- part1 --> <style type="text/css"> .sup { width: 500px; /*height: 500px;*/ background-color: red; } /*水平居中*/ /*display对margin的支持*/ /*block支持所有margin布局*/ /*inline与inline-block只支持margin上下布局*/ .sub { display: block; margin: 0 auto; } /*垂直居中*/ .sup { /*去除高度设置*/ padding: 50px 0; } </style> <!-- part2 --> <style type="text/css"> .box { width: 500px; height: 500px; background: url('img/icon.jpg') no-repeat center orange; } </style> </head> <body> <!-- 认识a标签一般怎么操作 --> <!-- 需求:具有页面转跳功能的图片 --> <!-- <a href=""> <img src="img/icon.jpg" alt=""> </a> --> <!-- 需求:图片在sup水平垂直中央显示 --> <!-- part1 --> <div class="sup"> <img class="sub" src="img/icon.jpg" alt=""> </div> <!-- part2 --> <div class="box"></div> </body> </html>
七、盒模型之层级结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层级结构</title> <style type="text/css"> .d5 { width: 200px; height: 100px; background: red; } .d2, .d3, .d4 { width: 80px; height: 40px; background: orange } /*.d4 { margin-left: 160px; margin-top: -80px; }*/ .d3 { margin-left: 80px; margin-top: -40px; } .d4 { margin-left: 160px; margin-top: -40px; } /*没有层级结构情况下:*/ /*1.盒子布局间相互影响程度很大*/ /*2.要严格遵循从上至下布局顺序进行布局*/ /*问题点:牵一发动全身*/ </style> <style type="text/css"> .menu { width: 200px; height: 100px; background: red; } .html, .css, .js { width: 80px; height: 40px; background: orange } .nav { width: calc(80px * 3); height: 40px; } .css { margin-top: -40px; margin-left: 80px; } .js { margin-top: -40px; margin-left: 160px; } /*menu的布局只与nav有连带关系,与实际显示内容的html,css,js不具有任何连带关系*/ </style> </head> <body> <!-- 无层次结构 --> <!-- <div class="d1">w3c</div> <div class="d2">html</div> <div class="d3">css</div> <div class="d4">js</div> <div class="d5">menu</div> --> <!-- 有层次结构 --> <div class="title">w3c</div> <div class="nav"> <div class="html">html</div> <div class="css">css</div> <div class="js">js</div> </div> <div class="menu">menu</div> </body> </html>