复习

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;
} <!--了解-->
<!--:after | :before 伪类 -> 内容-->
<style>
.box:after {
/*display: block;*/
content: "000";
}
.box:before {
/*display: block;*/
content: "***";
}
</style>
<div class="box">123</div>

定位布局

固定定位
what|why: 盒子相对于屏幕完成位置布局, 不会随着屏幕内容的滚动而滚动(相对于屏幕窗口是静止的), 且和页面内容发生重叠时, 该布局下的内容显示层次更高(覆盖其他内容)

语法:
position: fixed; 固定定位总结:
1.参考系为页面窗口
2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
3.上下同时出现取上, 同理左右取左
4.固定定位会完全脱离文档流(永远不会撑开父级高度 => 布局中父级一定需要自己设置高度)
5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子,
两个完全脱离文档流盒子的显示层次可以z-index属性(脱离文档流盒子特有的)改变显示层次的顺序(值大者覆盖值小者) <style>
.info {
width: 120px;
height: 220px;
background-color: orange;
/*info采用固定定位*/
position: fixed;
/*当盒子开的了定位属性,
该盒子及㐀通过 top | bottom | left | right 四个方位完成布局*/
top: 0;
left: 0;
z-index: 10;
} .sup {
width: 200px;
height: 200px;
background-color: pink;
/*没有脱离文档流的盒子添加z-index属性无用*/
z-index: 1000;
}
/*无用*/
/*.sup:after {*/
/*content: "";*/
/*display: block;*/
/*clear: both;*/
/*}*/
.sub {
width: 100px;
height: 100px;
background-color: black;
position: fixed; left: 50px;
right: 50px;
bottom: 50px;
top: 50px; z-index: 1;
}
</style>
绝对定位
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;
/*bottom: -10px;*/
/*bottom: 10px;*/
} .bbb {
width: 200px;
height: 200px;
background-color: orange;
}
</style> <div class="box"></div>
<div class="bbb">123</div>

过渡动画

/*持续时间*/(一般需要特别设置)
/*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;
}

day49 定位布局和过渡动画的更多相关文章

  1. [iOS]过渡动画之高级模仿 airbnb

    注意:我为过渡动画写了两篇文章:第一篇:[iOS]过渡动画之简单模仿系统,主要分析系统简单的动画实现原理,以及讲解坐标系.绝对坐标系.相对坐标系,坐标系转换等知识,为第二篇储备理论基础.最后实现 Ma ...

  2. Vue - 解决路由过渡动画抖动问题

    前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...

  3. CSS基础篇之背景、过渡动画

    background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...

  4. CSS3初学篇章_5(背景样式/列表样式/过渡动画)

    背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...

  5. Windows Store App 过渡动画

    Windows Store App 过渡动画     在开发Windows应用商店应用程序时,如果希望界面元素进入或者离开屏幕时显得自然和流畅,可以为其添加过渡动画.过渡动画能够及时地提示用户屏幕所发 ...

  6. 用 Swift 制作一个漂亮的汉堡按钮过渡动画

    汉堡按钮在界面设计中已经是老生常谈了,但是当我在dribbble看到这个漂亮的过渡动画时,我决定试试用代码实现它.   这是 CreativeDash team 的原型图: 你可能已经注意到了,汉堡顶 ...

  7. android 5.0 -- Activity 过渡动画

    android 5.0 提供3种过渡动画: 进入 退出 进入退出包括如下效果: explode 分解:屏幕中间进出 slide 滑动:屏幕边缘进出 fade 淡出:改变透明度来添加或者移除视图 共享 ...

  8. 属性动画和Activity、Fragment过渡动画等

    主题是关于动画的,但是不是什么动画的内容都包括.先泛泛的介绍一下,然后详细的介绍一下翻代码找见的一个好玩的动画的使用.以下的内容包括Android 3和Android 3.1等引入的API,在使用中请 ...

  9. VUE笔记 - 列表过渡动画 v-enter, v-leave-to | v-enter-active, v-leave-active | v-move

    本例要结合过渡动画四个过程的示意图一起理解. https://cn.vuejs.org/v2/guide/transitions.html 疑问: v-for="(item,i) in li ...

随机推荐

  1. 内存问题-JVM调优思路

    通常,内存的问题就是 GC 的问题,因为 Java 的内存由 GC 管理.有2种情况,一种是内存溢出了,一种是内存没有溢出,但 GC 不健康. 内存溢出的情况可以通过加上 -XX:+HeapDumpO ...

  2. Vue基础开发笔记

    以下实例代码地址:https://github.com/NewBLife/VueDev 1,Vue组件导入 新建组件:Header.vue <template> <div> & ...

  3. Spring Data Solr相关配置

    1.增加Maven POM文件的存储库:pom配置如下: <repositories> <repository> <id>spring-milestone</ ...

  4. C# 6.0:nameof操作符

    C# 6.0 引入了一个名为“nameof”的新的操作符,它的作用是接收元素而后返回元素名字.这个操作符能将class和class的所用成员,比如方法.变量以及属性作为参数而后返回一个它们的名字.这避 ...

  5. 前端——JavaScript之if语句

    4.1 if语句 如果……否则……  , 让程序出现分支 1        <script type="text/javascript"> 2           va ...

  6. node-js:文摘

    ES6相关 1.module.exports与exports,export与export default之间的关系和区别 nodejs基础 1.NodeJs安装与全局配置(不建议修改包的全局安装路径, ...

  7. 1. 通过DHCP服务器动态获取IP地址之后无法上网的解决方法

    故障:内网正常,在同一个局域网内的其它PC端通过DHCP获取IP地址并且可以正常上网. 1.通过wireshark抓包,使用ipconfig /renew时,wireshark内出现DHCP请求服务, ...

  8. 著名java博客

    http://blog.csdn.net/net19880504/article/details/20807403

  9. 实现poster,json,base64等编码转码工具

    自己写的一个工具集合(win窗口程序), 1.有时间戳转换,支持10位浮点数转换, 2.json字符串解析, 3.url编码与解码, 4.base64字符串的解码与转码, 5.base64图片的转码与 ...

  10. flutter 列表展示

    内容: 1.列表展示 2.轮播图 3.其他 本次的内容也是在上一节的基础上进行操作 我们就搞这个story模块. 目录: story.dart  story主页面 import 'package:fl ...