CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来。 水平居中 1.1内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素 ...
分类：
Web程序 时间：
2019-08-29 09:36:48
阅读次数：
118
一、 HTML标签一般分为块级标签和行内两张标签，他们也称块元素和行内元素。 1、块级元素（block-level） 没个块级元素都会独自占一行或多行，可以对其设置宽度、宽度、对其等熟悉，常用于网页布局和网页搭建。 #常见的块元素有<h1>~<h6><div><p><ol><ul><li>等，其中< ...
分类：
其他好文 时间：
2019-08-26 23:00:52
阅读次数：
82
1 flex布局（弹性盒，英文Flexible Box） display：flex;类似于块级元素 display:inline-flex,类似于内联元素 注意：设为Flex布局以后，子元素的float，clear和vertical-align属性将会失效 2 容器的属性（添加在容器上）2.1 fl ...
分类：
其他好文 时间：
2019-08-26 19:37:44
阅读次数：
104
以下是弹性布局的一些知识点，很简单，易懂！ 语法：属性：display 取值： flex：当前元素充当弹性布局的容器，并且本身以块级元素显示。 inline-flex：当前元素充当弹性布局的容器，并且本身以行内元素显示。 概念： 容器：容纳弹性布局中子元素的父元素。 项目：容器中的子元素 注意：元素 ...
分类：
其他好文 时间：
2019-08-26 09:58:21
阅读次数：
66
清除浮动的几种方法 标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。 浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒 ...
分类：
其他好文 时间：
2019-08-26 09:48:56
阅读次数：
63
一 常见定位方案 普通流 默认，从上而下，行内元素水平排列，行满换行，块级元素渲染成一个新行。 浮动 先按普通流位置出现，然后根据浮动方向偏移。 绝对定位 元素具体位置由绝对定位坐标组成。 普通流 默认，从上而下，行内元素水平排列，行满换行，块级元素渲染成一个新行。 浮动 先按普通流位置出现，然后根 ...
分类：
Web程序 时间：
2019-08-22 19:07:51
阅读次数：
122
昨天面试被问到这个问题，自己常用的是方法一和方法二，回来后查阅到了方法三，感觉莫名的好用，记录一下~ 方法一：单行文字垂直居中 line-height等于height 方法二：块级元素垂直居中 position定位或者flex布局 水平居中 margin: 0 auto;+垂直位移position: ...
分类：
其他好文 时间：
2019-08-21 14:01:29
阅读次数：
96
一、水平居中 1. inline-block + text-align text-align（他会有继承） 作用在块级元素上，会让块级元素的inline-block子级 ，进行排列 <div class="parent"> <div class="child">demo</div></div> .p ...
分类：
其他好文 时间：
2019-08-18 15:29:44
阅读次数：
63
父级给相对定位，子级给绝对定位，margin设置为auto，上下左右值设为0。 父级给相对定位，子级给绝对定位，设置left和top为50%，再向左和向上移动负的子级一半。 父级设置display:flex;justify-content: cneter;align-items: center; 父 ...
分类：
Web程序 时间：
2019-08-17 01:13:35
阅读次数：
176
行内元素 display属性为inline的元素为行内元素。行内元素只占它对应标签的边框所包含的空间。 格式：默认情况下，行内元素不会以新行开始，而块级元素会新起一行。 内容：一般情况下，行内元素只能包含数据和其他行内元素。 默认状态下为行内元素的元素： b, big, i, small, tt a ...
分类：
其他好文 时间：
2019-08-16 11:46:57
阅读次数：
90
