跟随我在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
开源框架
跟随我在oracle学习php(7)的更多相关文章
- 跟随我在oracle学习php(19)
Order by子句 形式: order by 排序字段1 [排序方式], 排序字段2 [排序方式], ..... 说明: 对前面取得的数据(含from子句,where子句,group子句, ...
- 跟随我在oracle学习php(18)
修改表: 一般概述 通常,创建一个表,能搞定(做到)的事情,修改表也能做到.大体来说,就可以做到: 增删改字段: 增:alter table 表名 add [column] 字段名 字段类 ...
- 跟随我在oracle学习php(17)
通用设定形式 定义一个字段的时候的类型的写法. 比如: create table tab1 (f1 数据类型 ); 数据类型: 类型名[(长度n)] [unsigned] [zerofil ...
- 跟随我在oracle学习php(16)
数据库的增删改查 增:create database [if not exists ] 数据库名 [charset 字符集] [collate 字符排序规则]: 说明: 1,if n ...
- 跟随我在oracle学习php(15)
开发环境 独立开发环境:组成 Windows/Linux php Apache MySQL 集成开发环境:phpstudy wamp xammp 关系数据库: SQL: Struct Query La ...
- 跟随我在oracle学习php(14)
CSS3的@keyframes用法详解: 此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识: keyfram ...
- 跟随我在oracle学习php(13)
常用的css样式 [class~="col-6"]:选择我所有类名中包含有col-6独立单词的元素 [class*="col-"]:选择所有类名中含有" ...
- 跟随我在oracle学习php(12)
DOM 文档对象模型 body:(什么时候)找到标签 操作标签找到标签:(都会返回一个js对象)document.getElementById() 通过iddocument.getElementsBy ...
- 跟随我在oracle学习php(11)
数组专题 数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( var i = 0; i <arr.length; i++){ consol ...
- 跟随我在oracle学习php(10)
正则表达式 做验证 做匹配 用符号来描述书写规则:/ 中间写正则表达式 /^ :匹配开头,$:匹配结尾 : /^ve/以ve开头的 /ve$/以ve结尾\d:一个任意的数字\w:一个任意的数字或字母\ ...
随机推荐
- Java第二次考试
代码 package sizeyunsuan; import java.io.FileNotFoundException; import java.io.PrintStream; import jav ...
- java中的key事件监听机制
package com.at221; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; import javax.sw ...
- hive 调优手段
调优手段 ()利用列裁剪 当待查询的表字段较多时,选取需要使用的字段进行查询,避免直接select *出大表的所有字段,以免当使用Beeline查询时控制台输出缓冲区被大数据量撑爆. ()JOIN避免 ...
- linux关闭终端响铃
title: linux关闭终端响铃 date: 2018-01-25 15:10:14 tags: linux categories: linux 在终端输入或是直接在.bashrc里添加一行 xs ...
- AD域与外部网站域名相同处理办法
环境 域控:Windows Server 2008 r2 AD域:example.cn 问题:DNS可以正常解析外部域名(如www.baidu.com),但是无法解析mail.example.cn 原 ...
- 2015 北京网络赛 C Protecting Homeless Cats hihoCoder 1229 树状数组
题意:求在平面上 任意两点连线,原点到这个点的距离小于d的点对有多少个,n=200000; 解: 以原点为圆心做一个半径为d的圆,我们知道圆内的点和园内以外的点的连线都是小于d的还有,圆内和园内的点联 ...
- npm -i 与npm install -s与-d的区别
npm i module_name -S = > npm install module_name --save 写入到 dependencies 对象 npm i module_name -D ...
- Redis学习-常用命令
keys * 返回满足的所有键 exists key 是否存在指定的key,存在返回1,不存在返回0 expire key time 设置指定key的过期时间,可以使用ttl key查看剩余时间 pe ...
- Consul 常用指令
Consul 常用指令 # 通告地址 -advertise # 集群节点之间通信地址 -bind # 设置服务器为bootstrap模式.在一个dc中只有一个server处于bootstrap模式.一 ...
- CentOS 6.5安装squashfs-tools
在sourceforge.net网站下载源码包 需要安装的依赖项有zlib-devel.xz-devel.x86_64 修改Makefile文件以支持xz压缩的squashfs文件,去掉Makefil ...