小知识点
#默认a不支持宽高,设置display:block就可以显示宽高
#inline不支持宽高
浮动布局
'''
what|why: 让块级(block)标签在父级的宽度限制下同行显示, 一行显示不下, 自动换行
注: 要到达一行显示个数固定, 一定要固定父级的宽度
哪些标签需要同行排列,哪些标签就做同行处理
语法:
子级 {
float: left|right;
}
问题: 子级不再撑开父级高度 (不完全脱离文档流) (个人理解:在浮动标签下面加一个比浮动标签小的标签,浮动标签直接覆盖掉了这个小标签,这是因为子级不再撑开父级的高度造成的.)
脱离文档流: => 层次结构会上移, 覆盖有位置重叠且没脱离文档流的标签(个人理解:在浮动子级标签的下面加一个面积比浮动子级小的正常标签,这个正常标签会被浮动子级完全覆盖)
不完全: 浮动布局后, 可以重新让子级撑开父级高度
清浮动: 让不完全脱离文档流的子级重新撑开父级的高度, 这种做法就叫做清浮动
给谁请浮动? 谁的高度没有被浮动子级撑开,谁来清浮动
语法:(content,display,clear三者缺一不可)
父级:after {
content: "";
dislpay: block;
clear: both;
}
<!--了解-->
<!--:after | :before 伪类 -> 内容-->
<html>
<head>
<style>
.box:after {
display: block;
content: "000";
}
.box:before {
display: block;
content: "***";
}
</style>
</head>
<body>
<div class="box">123</div>
</body>
</html>
after | before:操作文本内容
***
123
000
为什么清浮动用after?
浮动布局出现问题以后才清浮动
'''
定位布局
.固定定位
'''
what|why: 盒子相对于屏幕完成位置布局, 不会随着屏幕内容的滚动而滚动(相对于屏幕窗口是静止的), 且和页面内容发生重叠时, 该布局下的内容显示层次更高(覆盖其他内容)
父类盒子一旦固定位置,子类盒子也会固定位置
但子类盒子固定位置,父类盒子不会固定位置
语法:
position: fixed;
/*固定定位总结:
1.参考系为页面窗口
2.一旦盒子设置了定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
top: 距离
bottom:距离
left:距离
right:距离
3.上下同时出现取上, 同理左右取左
4.固定定位会完全脱离文档流(永远不会撑开父级高度 => 布局中父级一定需要自己设置高度)
5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子,
两个完全脱离文档流盒子的显示层次如果没有设置的话,是会后面的覆盖前面的,要想改变显示层次的顺序,可以设置z-index属性(脱离文档流盒子特有的)来改变显示层次的顺序(z-index值大者覆盖值小者)
*/
'''
.绝对定位
'''
what|why: 兄弟标签之间不相互影响, 都参照父级的显示区域来完成布局
语法:
position: absolute;
/*绝对定位总结:
1.参考系为最近的定位父级(父级一般采用相对定位relative来辅助子级绝对定位),注意:最近的定位父级,采用相对定位,如果采用固定定位和绝对定位,父级也会脱离文档流,然后位置会发生改变.
/*父级一般情况下只是为了给子级绝对定位提供参考系
子级绝对定位下,必须要求参考系拥有定位
父级可以选取fixed|absolute定位,就会成为子级的参考系,
但是父级自身的布局就会因为fixed|absolute完全脱离文档流的特性,影响自身的布局
如何达到: 父级又能定位(为子级做参考), 又不脱离文档流(自身布局不收影响)
解决方案: 父级采用 相对定位(父相子绝)
*/
2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
3.上下同时出现取上, 同理左右取左
4.绝对定位会完全脱离文档流(永远不会撑开父级高度 => 布局中父级一定需要自己设置高度)
5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子,
两个完全脱离文档流盒子的显示层次可以z-index属性(脱离文档流盒子特有的)改变显示层次的顺序(值大者覆盖值小者)
*/
'''
.相对定位(了解)
'''
what|why: 核心用处 => 父相子绝
语法:
position: relative;
/*相对定位总结:
1.参考系为自身原有位置
2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
3.top = -bottom | left = -right (上下取上, 左右取左)
4.相对定位 不脱离文档流 => 不会影响自身布局, 自身布局采用的还是原来的布局
注: 相对定位定位方位只会改变显示图层, 不会改变盒子的原有位置, 原有位置不变就不会影响兄弟盒子
'''
'''
注意:
参考系为窗口就是固定定位,参考系为父级就是绝对定位
top | bottom | left |right是设置了定位属性的盒子的特有属性
z-index是脱离文档流的盒子的特有属性
'''
过渡动画
/*持续时间*/
/*transition-duration: 3s;*/
/*延迟时间: 默认0*/
/*transition-delay: 1s;*/
/*过渡属性: 默认all | 属性1, ..., 属性n | eg:height, background-color */
/*如果只设置某个属性那么该属性渐变,其它属性顺便*/
/*transition-property: all;*/
/*过渡曲线: 默认ease*/
/*ease | ease-in | ease-out | ease-in-out | linear(匀速)
贝塞尔曲线:cubic-bezier(0.83, 1.46, 0, -1.29)*/
/*transition-timing-function: cubic-bezier(0.83, 1.46, 0, -1.29);*/
/* 简写 */
/* 持续时间 延迟时间 过渡属性们 运动的贝塞尔曲线*/
/*transition: 2s 1s all cubic-bezier(0.83, 1.46, 0, -1.29);*/
/*一般书写如下*/
/*transition: .3s linear;*/
/*需求: 没有高度时, 将所有子级内容隐藏*/
.box {
/*超出自己范围的内容如何处理*/
overflow: hidden;
}