display
块:1.独行显示 2.支持宽高,宽默认适应父级,高默认由子级或内容撑开 3.设置宽高后,一定采用设置的宽高
内联:1.同行显示 2.不支持宽高
内联块:1.同行显示,之间有间距 2.支持宽高,宽高由内容撑开 3.设置宽高后,一定采用设置的宽高,但只设置其中一个,另一个会根据内容等比缩放
嵌套规则:
块可以嵌套所有类型(p一般只允许嵌套内联)
内联一般只嵌套内联
内联块一般只作为最内层级
div {
/*块*/
display: block;
/*自适应父级可用content的宽度*/
/* auto;*/
/*默认0*/
/*height: 0px;*/
}
span {
/*内联*/
display: inline;
/*不支持宽高*/
}
img {
/*内联块*/
display: inline-block;
auto;
height: auto;
}
overflow
<!-- 显示区域只能由父级大小决定 -->
<!-- 在display:block背景下 -->
<style>
/*子级会被父级覆盖*/
.sup{
100px;
height: 100px;
/*默认border值*/
/*border:3px none black;*/
/*清除边框*/
/*border: 0px;*/
/*border: none;*/
/*最简单的设置*/
border: solid;
}
.sub{
200px;
height: 200px;
background-color: red;
}
/*对父级进行overflow设置*/
.sup{
/*允许以滚动的方式允许子级所有内容显示*/
/*overflow: auto;*/
/*overflow: scroll;*/
/*只允许子级在父级所在区域的部分显示,超出的部分隐藏*/
/*overflow: hidden;*/
}
</style>
隐藏
<style>
/*盒子间会相互影响*/
div{
50px;
height: 50px;
}
.d1{
background-color: red;
/*以背景颜色透明度隐藏,不需要掌握*/
/*盒子还在,内容或子级标签均会被显示*/
background-color: transparent;
}
.d2{
background-color: green;
/*以盒子的透明度隐藏:范围0~1;*/
/*盒子真正意义上的透明,但盒子区域的位置还在*/
opacity: 0;
}
.d3{
background-color: #700;
/*盒子从文档中移除,盒子的区域站位消失*/
/*当盒子重新获得显示,该盒子依旧从消失位置显示*/
display: none;
}
.d4{
background-color: #999;
}
/*需求:通过悬浮body让d3
重新显示*/
/*1 明确控制的对象
2 确定对该对象的修饰
3 找出修饰与对象的关系*/
body:hover .d3{
display: block;
}
</style>
margin
/前提 sup显示宽全屏 高200,sub显示区域宽高个100px/
/需求1:sup左上右定格显示/
html,body{
/body默认具有margin:8px/
margin: 0;
}
.sup{
auto;
height: 200px;
background-color: red;
}
.sub{
100px;
height: 100px;
background-color: green;
}
/*需求2:sub在sup的水平中央显示*/
.sub{
/*上下0,左右auto*/
/*auto:左右auto,自适应(平方)剩余的可布局空间*/
margin:0 auto;
}
/*需求3:sub在sup的垂直中央显示*/
/*垂直会遇到margin父子坑*/
/*.sub{
margin: auto;
}*/
.sup{
height: 100px;
padding: 50px 0;
}
/*需求4:sub在sup的水平居右显示*/
.sub{
margin-left: auto;
margin-right: 0;
}
</style>
样式支持
.sup{
500px;
height: 500px;
background-color: red;
}
/水平居中/
/display对margin的支持/
/block支持所有marg布局/
/inline与inline-blok只支持上下布局/
.sub{
display: block;
margin: 0 auto;
}