复习
1.盒子在父级水平居中
margin: 0 auto;
2.文本样式操作
color: red;
text-align: center;
font: 900 30px/200px "STSong", "微软雅黑"
<style>
div{
width: 200px; height: 200px; background-color: red; } div .div1 { width: 100px; height: 100px; background-color: green; margin: 0 auto; text-align: center; } </style> 3.reset操作 清除默认样式 html,body,h1,h6,p,ul { margin: 0; padding: 0; } 4.高级选择器 注: 每一个选择器位都可以替换为任意基础|高级选择器 ① 群组: 控制多个 ② 后代: 空格 | 子代: > eg: a > b | div b | div > a > b (类别 -> 个数 -> 位置) ③ 兄弟: ~ | 相邻: + eg: .b2 + .b3 | .b1 ~ .b3 ④ 伪类(位置): nth-child(1|2n|3n-1) 5.边界圆角 border-radius: 20px 30px; border-radius: 50%; border-radius: 10px / 20px; 6.背景图片(精灵图) backgroud: ulr("img/bg.png") no-repeat -200px -300px; div:hover { background-position-x: -400px; }
今日内容
1.浮动布局
2.定位布局
3.过渡动画
:not 高级选择器(除去选择器之外的)
li:(:not(:nth-child(n)))
浮动布局
BFC(block format )
what|why: 让块级(block)标签在父级的宽度限制下同行显示, 一行显示不下, 自动换行
注: 要达到一行显示个数固定, 一定要固定父级的宽度
语法:
子级 {
float: left|right;
}
问题: 子级不再撑开父级高度 (不完全脱离文档流)
脱离文档流: => 层次结构会上移, 覆盖有位置重叠且没有脱离文档流的标签
不完全: 浮动布局后, 可以重新让子级撑开父级高度
清浮动: 让不完全脱离文档流的子级重新撑开父级的高度, 这种做法就叫做清浮动
语法:
父级:after {
content: "";
dislpay: block;
clear: both;
}
/*谁们需要同行排列, 谁们就用浮动布局处理*/
.ul1 li {
float: left;
/*float: right;*/
}
/*谁的高度没有被浮动子级撑开, 谁来清浮动*/
.ul1:after {
content: "";
display: block;
clear: both;
}
定位布局
固定定位
what|why: 盒子相对于屏幕完成位置布局, 不会随着屏幕内容的滚动而滚动(相对于屏幕窗口是静止的), 且和页面内容发生重叠时, 该布局下的内容显示层次更高(覆盖其他内容)
语法:
position: fixed;
固定定位总结:
1.参考系为页面窗口
2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
3.上下同时出现取上, 同理左右取左
4.固定定位会完全脱离文档流(永远不会撑开父级高度 => 布局中父级一定需要自己设置高度)
5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子,
两个完全脱离文档流盒子的显示层次可以z-index属性(脱离文档流盒子特有的)改变显示层次的顺序(值大者覆盖值小者)
<style> .info { width: 120px; height: 220px; background-color: orange;
绝对定位
what|why: 兄弟标签之间不相互影响, 都参照父级的显示区域来完成布局
语法:
position: absolute;
绝对定位总结:
1.参考系为最近的定位父级(父级一般采用相对定位relative来辅助子级绝对定位) 2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局 3.上下同时出现取上, 同理左右取左 4.绝对定位会完全脱离文档流(永远不会撑开父级高度 => 布局中父级一定需要自己设置高度) 5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子, 两个完全脱离文档流盒子的显示层次可以z-index属性(脱离文档流盒子特有的)改变显示层次的顺序(值大者覆盖值小者) 注意:父级一般情况下只是为了给子级绝对定位提供参考系 子级绝对定位下,必须要求参考系拥有定位 父级可以选取fixed|absolute定位,就会成为子级的参考系, 但是父级自身的布局就会因为fixed|absolute完全脱离文档流的特性,影响自身的布局 如何达到: 父级又能定位(为子级做参考), 又不脱离文档流(自身布局不收影响) 解决方案: 父级采用 相对定位 position: relative;
相对定位
what|why: 核心用处 => 父相子绝
语法:
position: relative;
/*相对定位总结:
1.参考系为自身原有位置
2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
3.top = -bottom | left = -right (上下取上, 左右取左)
4.相对定位 不脱离文档流 => 不会影响自身布局, 自身布局采用的还是原来的布局
注: 相对定位定位方位只会改变显示图层, 不会改变盒子的原有位置, 原有位置不变就不会影响兄弟盒子
<style> .box { width: 200px; height: 200px; background-color: red; margin-left: 100px; margin-top: 200px; } .box { position: relative; top: 200px;
过渡动画