跟随我在oracle学习php（7）

盒子模型布局

盒子模型：每个标签都是一个盒子

计算宽高：box-sizing：border-box盒子的宽度就是设置的宽度，里面的内容自适应

从里到外：padding（内边距）

Border（边框）

Margin（外边距）

 

Margin - 简写属性

margin属性可以有一到四个值。

1.margin:25px 50px 75px 100px;

上边距为25px

右边距为50px

下边距为75px

左边距为100px

 

2.margin:25px 50px 75px;

上边距为25px

左右边距为50px

下边距为75px

 

3.margin:25px 50px;

上下边距为25px

左右边距为50px

 

4.margin:25px;

所有的4个边距都是25px

 

 

标签特性：display：   inline （行）

Block（块）

inline-block（行内块）

None（隐藏：三种方式）

Display：none（标签位置没了）

Visibility：hidden（标签位置还在）

Opacity：0（透明度为0）标签及子标签都透明

 

只想背景半透明，字体还是实的，设置背景色 background：rgba（255，255，255，0.9）

  

块标签margin：auto为居中

   Padding，border简写属性同margin

   Border-radius：圆角

   Box-shadow：水平 竖直阴影位置（都可为负） 虚化 颜色 inset（内部阴影）

   Text-shadow：同box-shadow

   

   布局

   浮动：float

给定一个区域，一般做导航

大色块 小色块。。。。。内容

不要用纯色

Overflow：hidden 超出部分隐藏（overflow超出部分处理方式）

 

定位

Position：

Fixed  绝对定位，相对于窗口定位

设置fixed，标签位置就没了（最高层）层数越高，显示在最前面

Z-index:层数

Relative 相对定位，相对于自己定位 设置Top，bottom，right，left，用于微调，距离不超过20px，最主要限制absolute

 

 Absolute 绝对定位，相对于body（页面）定位

相对于最近的有position属性的父标签，最顶级是body

 

 

 

css3

弹性盒子

新布局模式

设置direction：rtl 从右往左排

flex-direction

flex-direction的值有:

 

row：横向从左到右排列（左对齐），默认的排列方式。

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

column：纵向排列。

column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

 

justify-content 语法如下：

 

justify-content: flex-start | flex-end | center | space-between | space-around

各个值解析:

 

flex-start：

弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

 

flex-end：

弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

 

center：

弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

 

space-between：

弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

 

space-around：

弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

lex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

 

语法

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

各个值解析:

 

nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。

wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

wrap-reverse -反转 wrap 排列。

align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

 

语法

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各个值解析:

 

stretch - 默认。各行将会伸展以占用剩余的空间。

flex-start - 各行向弹性盒容器的起始位置堆叠。

flex-end - 各行向弹性盒容器的结束位置堆叠。

center -各行向弹性盒容器的中间位置堆叠。

space-between -各行在弹性盒容器中平均分布。

space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

 

 

 

 

display:flex

水平对齐

垂直对齐

换行对齐

 

transform

transition

animation

开源框架

 

转载于:https://www.cnblogs.com/RighTgraM/p/10514415.html