平时写CSS样式不注意总结，用的时候写是会写但具体应用场景和组合方式一不小心就混淆，导致效率不高，还要借助文档，本文针对CSS常用样式水平垂直居中解决方案进行总结，也便于自己以后复习，好记性不如烂笔头。针对BFC，主要需要了解其触发条件，具体深入理解及使用还需要联系实际应用。 首先通过一个思维导图更 ...
分类：
Web程序 时间：
2020-06-20 00:47:40
阅读次数：
87
什么叫行内元素（内联元素）？ 常见的span、a、lable、strong、b等html标签都是行内元素 默认情况下，行内元素均无法设置宽度、高度、上下方向margin的外边距等 一般在css中添加属性： display:inline //这时设置成了内联元素 什么叫块级元素？ 常见的div、p、l ...
分类：
Web程序 时间：
2020-06-16 13:06:56
阅读次数：
238
网上摘录常用css片段 垂直水平居中 /*绝对定位 ＋ 未知宽高 ＋ translate*/ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /*flex 轻松搞定水平垂直居中(未知宽高*/ dis ...
分类：
Web程序 时间：
2020-06-14 23:22:57
阅读次数：
85
###第一种，常用于垂直居中盒子的文字，需要知道盒子高度，行高不能设置百分比 text-align:center; line-height:盒子本身高度 ###第二种，使用display:table和display:table-cell配合，两个必须分别作用于父盒子和子盒子 display:tabl ...
分类：
Web程序 时间：
2020-06-14 16:53:54
阅读次数：
228
主要实战技巧 1、自动撑满剩下 设置flex布局 一项定死宽度/高度 剩下的利用 flex：auto 撑满 .父{ display:flex; width:2000px } .子1{ flex:auto } .子2{ width:200px } 2、垂直居中 (1)古董方法 外围一半 - 自身一半 ...
分类：
Web程序 时间：
2020-06-13 17:36:21
阅读次数：
74
居中问题 定位: 将元素居中 将元素水平居中 将元素垂直居中 样式: 文字毛玻璃效果 代码 将元素居中: 1.使用绝对定位实现1 { width: 50px; height: 50px; /*设置元素宽高*/ position: absolute; /*修改为绝对定位*/ top: 50%; lef ...
分类：
Web程序 时间：
2020-06-13 12:58:38
阅读次数：
66
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .container { text-align: center; height: 300px; border: 1px solid rebec ...
分类：
其他好文 时间：
2020-06-10 21:15:57
阅读次数：
57
CSS—总结常用垂直居中方法 1、text-align与line-hight方法实现居中 这是比较常用的方法。通过line-hight来设置行间距是实现垂直居中的关键 .wrap{ width: 500px; heidth: 200px; line-height:200px; background: ...
分类：
Web程序 时间：
2020-06-05 20:57:25
阅读次数：
77
我们在做页面布局的时候经常会有上下左右居中的设计，由于大部分的页面结构都是左右式排版页面是固定宽度的，而元素是自上而下排列，高度不固定。所以在页面中css实现左右居中比较容易，垂直居中就不太好实现了。
在css3之前我们前端技术人员要实现垂直居中布局往往需要绞尽脑汁的去解决各种浏览器兼容问题，而随着... ...
分类：
Web程序 时间：
2020-06-05 01:06:47
阅读次数：
94
垂直居中 单行文本垂直居中 父元素高度为auto 一个父元素如果不设置高度的话，默认就是紧包裹着子元素，如果父元素设置的pading-top和padding-bottom相同，这本身就是一个垂直居中效果，但是当子元素并不是独占一行，而是inline元素和inline-block元素组合成一行，比如下 ...
分类：
Web程序 时间：
2020-06-05 00:36:45
阅读次数：
75
