0. 什么时候该用什么布局

<!-- 定位布局: 以下两种布局不易解决的问题, 盒子需要脱离文档流处理 -->
<!-- 浮动布局: 一般有block特性的盒子,水平排列显示 -->
<!-- 盒模型布局: 在父级水平居中显示, 在其他布局基础上微调 -->
<!-- 流式布局思想 -->

一.拼接网页

将区域整体划分起名 => 对其他区域布局不产生影响
提出公共css => reset操作
当有区域发送显示重叠(脱离文档流导致的), 需要通过z-index调整层级
一定需要最外层,且最外层做自身布局时,不要做过多布局操作

二.过渡 transition(动画)

transition属性

transition: 过渡时间(必须) 延迟时间(一般不设) 过渡属性(一般采用all默认值) 过渡曲线(贝赛尔曲线)(cubic-bezier())

过渡属性具体设置给初始状态还是第二状态 根据具体需求

/*过渡的持续时间*/
transition-duration: 2s;
/*延迟时间*/
transition-delay: 50ms;
/*过渡属性*/
/*单一属性 | 属性1, ..., 属性n | all*/
transition-property: all;
/*过渡曲线*/
/*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);

/*结论:*/
/*1.尽量悬浮静止的盒子, 控制运动的盒子*/
/*2.不能确定区间范围的属性值, 不会产生动画效果*/
/*display 不能做动画 | opacity 可以做动画*/

三.阴影box-shadow:

/*x轴偏移量 y轴偏移量 虚化程度 阴影宽度 阴影颜色*/
box-shadow: 0 0 10px 10px black;

/*一个盒子可以设置多个阴影, 每一套阴影间用逗号隔开*/
box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;

四.伪类实现边框

/*自身需要定位*/
.box {
position: relative;
}
/*伪类通过定位来完成图层的布局*/
.box:before {
content: "";
/*完成布局*/
position: absolute;
top: 10px;
left: 0;
/*构建图层*/
width: 1px;
height: 100px;
background-color: black;
}
.box:after {
content: "";
position: absolute;
width: 100px;
height: 1px;
background-color: black;
top: 0;
left: 10px;
}

五.形变transform:

/*1.形变参考点: 三轴交界点*/
transform-origin: x轴坐标 y轴坐标;

/*2.旋转 rotate deg*/
transform: rotate(720deg);

/*偏移 translate px*/
transform: translateX(200px) translateY(200px);

/*缩放 scale 无单位*/
transform: scale(x轴比例, y轴比例)

/*注: 可以多形变, 空格隔开书写在一条transform属性中, 顺序一般会影响形变结果*/
/*形变不改变盒子布局, 只拿形变做动画*/

六.动画animation

transition:
一个在执行的过程中声明关键帧的动画,可以一旦元素的属性发生变化就可以形成一个动画,
然后transition-property,transition-duration,transition-timing-function,transition-delay来设置动画的属性

animation:
通过@keyframes 来设置关键帧,在没个关键帧中设置在该帧动画中某个元素的一个或几个属性的变化。
animation-name,animation-duration,animation-timing-function,animation-delay,
animation-iteration-count,animation-direction来设置动画的属性

1.设置动画体

@keyframes move {
/*起点省略采用的就是初始状态*/
0% {}
33.3% {
margin-left: 800px;
/*在每一个动画节点都需要明确所有做动画属性在该节点的属性值*/
margin-top: 50px;
}
66.6% {
margin-left: 500px;
margin-top: 300px;
}
/*终点需要设置*/
100% {
margin-left: 200px;
margin-top: 50px;
}
}

2.设置动画属性

/*animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线*/
.box {
animation: move 2s 1 linear;
}

七.表格

<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>

</tbody>
<tfoot>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tfoot>
</table>
table的全局属性:
border="1" 设置边框宽度
cellspacing="10" 单元格间的间距
cellpadding="10" 单元格的内边距
rules="rows | cols | groups | all" 边框的保留格式

td的全局属性
rowspan='2' 合并两行单元格
colspan='3' 合并三列单元格

table的高度: 由内容和设置高度中的大值决定

table-cell: 可以嵌套任意类型标签, 可以快速实现多行文本垂直居中

八.多行文本垂直居中

<div class="sup">
<p>第一行文本</p>
<div>第二行文本</div>
</div>

.sup {
/*实现多行文本垂直居中 =>
针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/
display: table-cell;
vertical-align: middle;
}
/*注: 如果想调整sup的位置,可以给sup嵌套一个"位置层"*/
/*.box>.sup>p+div*/

Python-CSS进阶的更多相关文章

  1. Python爬虫进阶四之PySpider的用法

    审时度势 PySpider 是一个我个人认为非常方便并且功能强大的爬虫框架,支持多线程爬取.JS动态解析,提供了可操作界面.出错重试.定时爬取等等的功能,使用非常人性化. 本篇内容通过跟我做一个好玩的 ...

  2. Python面向对象进阶(二)

    Python面向对象进阶2.html :first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0,0,.1 ...

  3. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  4. 转载 【CSS进阶】伪元素的妙用--单标签之美

    1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...

  5. html和css进阶

    html和css进阶 相对地址与绝对地址 网页上引入或链接到外部文件,需要定义文件的地址,常见引入或链接外部文件包括以下几种: <!-- 引入外部图片 --> <img src=&q ...

  6. python最全学习资料:python基础进阶+人工智能+机器学习+神经网络(包括黑马程序员2017年12月python视频(百度云链接))

    首先用数据说话,看看资料大小,达到675G 承诺:真实资料.不加密,获取资料请加QQ:122317653 包含内容:1.python基础+进阶+应用项目实战 2.神经网络算法+python应用 3.人 ...

  7. CSS进阶之SASS入门指南

    CSS进阶之SASS入门指南         随着跟着公司学习项目的前端的推进,越来越对好奇了许久的SASS垂涎欲滴,哈哈,可能这个词使用不当,没有关系,就是对SASS有一股神秘的爱!好了,闲话不多说 ...

  8. python学习大全:python基础进阶+人工智能+机器学习+神经网络

    首先用数据说话,看看资料大小,达到675G承诺:真实资料.不加密.(鉴于太多朋友加我QQ,我无法及时回复,) 方便的朋友给我点赞.评论下,谢谢!(内容较大,多次保存) [hide]链接:[url]ht ...

  9. webpack快速入门——CSS进阶:自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  10. webpack快速入门——CSS进阶,Less文件的打包和分离

    1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...

随机推荐

  1. BCD码(如何转换,转换方式的证明)

    1. 十进制转2421码:小于4不考虑使用最高位,从最高位向最低位依次相减. 如3=2+1,为0011:7=2+4+1,为1101 2. 十进制5211码:按照最高位,次高位,最低位,次低位的顺序依次 ...

  2. oi程序提交注意:bool

    比如我一个程序用了bool类型(#include<stdbool.h>) 在poj以c的方式提交不通过显示Compile Error,而用gcc的方式提交通过了, 也许其它的#includ ...

  3. Linux下 查找大文件

    find ./ -size +50M 显示当前路径下,大于50M的文件.(包含子文件夹内的文件)

  4. operator new,new operator,placement new的区别

    原文地址:http://www.cnblogs.com/jamesmile/archive/2010/04/17/1714311.html,在此感谢 C++中的operator new与new ope ...

  5. 【python】UnicodeEncodeError: 'ascii' codec can't encode/decode characters

    解决方案在文件头插入 # encoding=utf8 import sys reload(sys) sys.setdefaultencoding('utf8')

  6. DOJO常用的函数

    DOJO常用的: 1,通过dojo.require以类似C编程中#include或者Java中import的方式加载所需的部件如dojo.require("dojo.parser" ...

  7. hbase记录-修改压缩格式

    在业务空闲的时候修改压缩格式 先测试 ---测试表create 'test', { NAME => 'c',VERSIONS => 1}desc 'test'disable 'test'a ...

  8. Study 1 —— HTML5概述

    HTML5概述HTML是一种超文本标记语言,主要用于描述超文本中内容的显示方式.标记语言经过浏览器的解释和编译,虽然它本身不能显示在浏览器中,但在浏览器中可以正确显示HTML标记的内容.HTML5是一 ...

  9. Visual Studio Code 常用快捷键

    VsCode 快捷键有五种组合方式(科普) Ctrl + Shift + ? : 这种常规组合按钮 Ctrl + V Ctrl +V : 同时依赖一个按键的组合 Shift + V c : 先组合后单 ...

  10. Linux下删除命令 硬盘空间查看... 常用命令

    (此命令请慎重使用) 使用rm -rf命令即可. 使用rm -rf 目录名字 命令即可 -r 就是向下递归,不管有多少级目录,一并删除-f 就是直接强行删除,不作任何提示的意思    (警告:不作任何 ...