Python-CSS进阶

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*/