为什么初始化CSS呢?
因为浏览器的兼容问题,不同浏览器对标签的默认值是不同的,如果没有初始化CSS,往往会导致页面在不同浏览器页面在不同浏览器之间出现差异
并且,多数浏览器会默认给初始页面添加上外边距
简单的初始化页面
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
display
都有哪些值?block
、inline
、inline-block
、list-item
、table
、 inherit
和 none
block
:指定为块级元素;显示元素inline
:指定为行内元素,宽高默认为内容宽高,不可设置宽高,同行显示inline-block
:指定为行内块元素,可以设置宽高,一行显示list-item
:像块级元素一样显示,并添加列表样式table
:元素为块级表格显示inherit
:从父元素继承display
属性的值*
最慢;解析速度由快到慢:ID > 类 > 标签 > 通配符 *
html body ul li a {}
,这种选择器很抵效div #one {}
),因为ID选择器已经是唯一的了%
ww
vh
Vm
em
rem
BFC
即Block Formatting Context,意为块级格式化上下文,就是一个块级元素的渲染规则。通俗一点讲,可以把BFC
理解为一个独立封闭的大箱子,容器里面的子元素不会影响到外面的元素
BFC
的布局规则:
BFC
的两个相邻盒子的margin
会发生重叠IFC
即 Block Formatting Context,指内联格式化上下文,就是行内元素的摆放规则。
IFC
的布局规则:
IFC
内部的每个盒子会在水平方向上一个接着一个摆放IFC
表现为一个块级元素,跟其它块级元素一样垂直摆放1、display: none
display: none
最常用的方式之一,该方法最大的特点就是:元素不再占有位置,从页面中移除掉
该属性会导致页面重排,性能较差
2、visibility: hidden
visibility: hidden;
该方法与上面的相反,其最大的特点就是:元素仍占据着位置
该属性只会引起重绘,网页性能较高;所以,如果是需要频繁隐藏和显示元素的,就使用 visibility: hidden
visibility: hidden
还有另外两个作用:
- 解决父元素与子元素产生的高度坍塌(给父元素添加该属性)
- 清除浮动(同样是给父元素添加该属性)
3、设置元素透明度为0
opacity: 0;
4、利用相对定位将元素移到屏幕左侧
position:relative;
left: -100%;
5、旋转元素,使之与当前页面垂直
/* x轴 或 y轴 旋转 */
transform: rotateX(90deg)
transform: rotateY(90deg)
6、将元素缩小到0倍
transform: scale(0);
7、利用 translateX()、translateY()
将元素移出屏幕
1、单行文字垂直居中
让行高 line-height
与 盒子高度height
一样高
width: 100px;
height: 100px;
line-height: 100px;
2、多行文字垂直居中
vertical-align
属性可以指定表格单元格元素的垂直对齐方式
有个前提:先将元素转化为表格元素 table-cell
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
text-indent: 2em;
div
垂直居中布局样式<div class="box-wrap">
<div class="box"></div>
</div>
固定高宽的div
垂直居中
.box {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
background-color: pink;
/* 上移和左移盒子的一半 */
margin: -50px 0 0 -100px;
}
无固定宽高的div
垂直居中
1、flex
布局
给父盒子设置 flex
,让其子盒子垂直居中
.box-wrap {
display: flex;
width: 200px;
height: 100px;
background-color: pink;
justify-content: center;
align-items: center;
}
IE8
以下2、定位 relative
+ 移动 translate
.box-wrap {
width: 200px;
height: 100px;
background-color: pink;
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
/* 往上和往左移动自身的一半 */
transform: translate(-50%, -50%);
}
IE8
以下3、流式布局(百分比%)设置margin: auto;
.box-wrap {
width: 100%;
height: 200px;
background-color: pink;
position: relative;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 50%;
height: 50%;
margin: auto;
background-color: skyblue;
}
文章浏览阅读2.4k次,点赞4次,收藏2次。解决方案打开项目–>属性–>c/c+±->语言–>符合模式–>否_qt 不能将 "const char *" 类型的值分配到 "char *" 类型的实体
文章浏览阅读1.9k次。昨晚在做测试的时候,输出数据测试的时候一直出现这个问题,_fatal error: call to a member function fetchrow() on a non-object in d:\xamp
文章浏览阅读1.1w次,点赞10次,收藏36次。1. 简介HTTP(HyperText Transfer Protocol,超文本传输协议)是一套计算机通过网络进行通信的规则。计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务器)请求信息和服务,HTTP目前协议的版本是1.1。HTTP遵循请求(Request)/应答(Response)模型。Web浏览器向Web服务器发送请求,Web服务器处理请求并返回适当_http请求
文章浏览阅读7.4k次,点赞6次,收藏32次。目录JAVA程序部署前言项目打包银河麒麟jdk安装银河麒麟系统 达梦数据库 安装JAVA程序部署前言运行环境:银河麒麟 + 飞腾CPU项目框架:Springboot + Mybatis + 达梦数据库 JDK1.8上一篇写了该项目的源码,这篇主要写该项目在国产操作系统上部署以及达梦数据库在国产操作系统上安装,创建。查看项目源码请点链接纯国产环境JAVA程序搭建(Springboot + Mybatis + 达梦数据库)一项目打包修改pom文件:(注释generator插件,放开打包需要_国产化 java 部署
文章浏览阅读4.5k次,点赞5次,收藏31次。无线电磁波信号在收发天线长距离(远大于传输波长)或长时间范围发生的功率变化,称为大尺度衰落,一般可以用路径损耗模型来描述,路径损耗是由发射功率在空间中的辐射扩散造成的,根据功率传输Friss公式可计算出接收信号功率为::发射信号功率:发射天线增益:接收天线增益:电磁波的波长:收发端距离:系统的损耗因子,与传播特性无关通过对接收功率与发射功率作比值,可以把路径损耗定义为:假设通信系统是理想的(L=1),除去收发端天线的增益(),可得理想传播环境下路径损耗与收发端距离、传输频率的关系为:因此理想环境下,路径损耗_衰落与损耗可以相加嘛
文章浏览阅读3.9k次,点赞2次,收藏4次。STM32F207调试记录之串口配置_stm f207 串口速率
文章浏览阅读4.3k次,点赞3次,收藏32次。在安装HBase之前,我们需要先安装JDK和Hadoop,具体JDK和Hadoop的安装我前面已经做过了,需要的话,请看我的另一篇博客:Hadoop Windows 安装 还是那句话,在安装HBase之前,我们需要搞清楚HBase、Hadoop和Java之间版本的对应关系:我们具体可以看Apache官网:HBase、Hadoop和Java之间版本关系 由于我的JDK版本为1.8和Hadoop版本为3.2.2,所以我这里下载HBase-2.4.10,现在给出Apache中Hbase所有版本下载:Hbas_windows安装hbase
文章浏览阅读1.2k次。导出功能在很多应用场景中都需要,RDIFramework.NET V3.2版本在模块管理界面新增了导出功能,方便管理员对所有配置的模块进行管理。一、Web版模块管理导出功能Web版本的模块导出功能如下图所示: 单击导出按钮,在弹出的“导出Excel数据”窗口中,可以选择要导出的列,如下图所示:单击确定按钮,即可把选中的列导出到Excel中,如下:二、WinForm版模块管理导出功能。在WinFor..._生成管理系统 .net
文章浏览阅读2.4k次。Python语言能够对整数进行逐位操作,它支持的运算符及含义如下所示:&:按位与|:按位或^:按位异或~:取反<>>:右移对于整型数据,各种位操作是对该数据的补码进行的(正数的补码与原码相同,下面举例皆以正数为例);对于长整型数据,由于其位宽不定,所以进行位运算时,认为其补码的符号位向外无限扩展。下面对各运算符进行举例说明:(1)首先看取反>>> ~1-..._python 二进制取反运算符
文章浏览阅读2.5w次,点赞8次,收藏71次。图像三维重建技术简介_psp图像三维重构理论
文章浏览阅读550次。电脑中有休眠和睡眠,那么它们有什么区别呢?下面我们就通过本文来了解一下。
文章浏览阅读1.3w次,点赞19次,收藏133次。点云配准技术即是通过寻找不同视角下不同点云之间的映射关系,利用一定的算法将同一目标场景的不同点云转换到同一个坐标系下,形成更完整的点云的过程。3D点云配准是是点云处理技术的一个重要组成部分。如何使点云配准方法更加快速准确 已成为一个点云研究的热点和难点。点云配准要应对点云数据的无序性、非结构化、不均匀和噪声等干扰。如何有效地利用已有的信息实现精确、鲁棒的点云配准算法具有重要的研究意义和价值。_点云配准