首先回顾下CSS常出现的几个样式问题1当子元素添加上边距时，父元素也会向下移动 解决方法:给子元素添加display:inline-block;或者用父元素的padding-top代替给可以 2子元素浮动后，父级元素检测不到其高度3当元素浮动后，兄弟元素的内容超过其高度后会侵占它的区域（其实问题原因 ...
分类：
Web程序 时间：
2020-06-04 21:57:44
阅读次数：
96
/*单行*/ .work_font{ display:block /*这里设置inline-block或者block；根据使用情况来定（行内元素需要加这个，块级元素和行内块级可以不用）*/ white-space:nowrap; overflow:hidden; text-overflow:elli ...
分类：
微信 时间：
2020-06-04 13:38:39
阅读次数：
126
简介 CSS网格布局（又称“网格”），是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table（表格）布局，然后用float(浮动)，position（定位）和inline-block（行内块）布局，但是这些方法本质上是hack，遗漏了很多功能，例如垂直居中。后来 ...
分类：
Web程序 时间：
2020-05-31 12:41:28
阅读次数：
95
css的display属性是前端开发中非常常见的属性，本文简单介绍下其中比较常用的属性值，即block、inline和inline-block。 HTML组件中呈现一片空白区域的组件都可当盒模型（box modal），而CSS则提供了display属性来控制盒模型的外观。 1. block类型（块） ...
分类：
Web程序 时间：
2020-05-31 11:16:48
阅读次数：
70
在flex出现之前我们做页面都是使用的左右浮动，inline-block，表格等布局方式来实现页面的各种布局，在这些写法中由于浏览器的兼容问题还需要写很多的hack来解决兼容问题。','2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已... ...
分类：
Web程序 时间：
2020-05-31 10:49:47
阅读次数：
83
前言：这是我看过最好的flex布局教程：30分钟彻底弄懂flex布局 传统的布局方法与flex属性通览 文档流：块级元素独占一行，从上往下排列，行级元素从左往右排列。 display inline-block主要用来做横向的布局。用分离负maigin用来产生位移。 元素的布局 学习flex我分成两个 ...
分类：
Web程序 时间：
2020-05-31 10:41:32
阅读次数：
75
inline-block 我们都知道display: inline-block意味着该元素表现形式是inline，也就是不会独占一行，但是又可以给它定义宽和高。 那么如果一个元素定义了 display: inline-block但是没有定义宽呢？这个元素的width是多少呢? 答案是 由内部元素决定 ...
分类：
其他好文 时间：
2020-05-30 19:42:52
阅读次数：
47
1、文字图片上下左右居中 icon 置display:inline-block;// 父元素设置文字居中 text-align:center ...
分类：
Web程序 时间：
2020-05-28 16:42:36
阅读次数：
69
效果图： 代码： input{ display: inline-block; vertical-align: middle; } label{ vertical-align: middle; } ...
分类：
其他好文 时间：
2020-05-27 15:16:50
阅读次数：
221
css 1 /*base*/ 2 body { 3 background: #fff; 4 } 5 6 .btn { 7 display: inline-block; 8 padding: 4px 12px; 9 margin-bottom: 0; 10 font-size: 14px; 11 li ...
分类：
其他好文 时间：
2020-05-24 21:27:23
阅读次数：
65
