首先父元素肯定时先使用弹性布局，并设置wrap属性使其自动折行 .flexContainer { display: flex !important; flex-wrap: wrap; } 首先使用弹性布局对子元素进行平均划分，使他们的高宽相等可以，然后设置text-align进行右对齐即可（注意：子 ...
分类：
其他好文 时间：
2020-06-09 20:10:46
阅读次数：
168
虽然说：定位和浮动都是脱离文档流；但是其实区别还是蛮大的，话不多说，见下图： 效果是这样的： 可以看到，浮动虽然脱离了文档流；但是 文本是可以互相看见的；并且保证不被遮起来（超出另算：文本会重叠）；不论是 父子元素还是兄弟元素；都是可以互相看见的； 当我们换成定位以后： 效果如下图： 不难发现；定位 ...
分类：
其他好文 时间：
2020-06-08 20:56:20
阅读次数：
83
垂直居中 单行文本垂直居中 父元素高度为auto 一个父元素如果不设置高度的话，默认就是紧包裹着子元素，如果父元素设置的pading-top和padding-bottom相同，这本身就是一个垂直居中效果，但是当子元素并不是独占一行，而是inline元素和inline-block元素组合成一行，比如下 ...
分类：
Web程序 时间：
2020-06-05 00:36:45
阅读次数：
75
首先回顾下CSS常出现的几个样式问题1当子元素添加上边距时，父元素也会向下移动 解决方法:给子元素添加display:inline-block;或者用父元素的padding-top代替给可以 2子元素浮动后，父级元素检测不到其高度3当元素浮动后，兄弟元素的内容超过其高度后会侵占它的区域（其实问题原因 ...
分类：
Web程序 时间：
2020-06-04 21:57:44
阅读次数：
96
什么是层叠上下文（stacking context） 可以理解为一个dom节点在Z轴高人一等，特性类似于BFC，即层叠上下文的内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。 CSS2创建层叠上下文的两种方法（参考MDN） 根元素 (HTML) 绝对（absolute）定位或相对（relat ...
分类：
Web程序 时间：
2020-06-04 21:24:29
阅读次数：
96
Float 布局 给子元素加上float:left 给父元素加上clearfix .clearfix::after{ content: ''; display: block; clear:both; } Flex 布局 给父元素加上 display:flex; 给父元素加上 justify-cont ...
分类：
其他好文 时间：
2020-06-03 13:52:47
阅读次数：
48
flex布局基础知识文档 基础知识 概念 ： 一个有效的布局方式，即使不知道视窗的大小或者元素未知的情况下智能的，灵活的调整和分配元素和空间两者之间的关系 特性 默认水平对齐 默认不换行 默认使所有子元素占满一行，并自动调整子元素的大小(改变默认宽度) 包含概念： flex布局容器(display为 ...
分类：
其他好文 时间：
2020-06-02 19:21:38
阅读次数：
151
1、左右布局 这就要说到一个属性float，使用float: left;就可以让浮动元素 会脱离正常的文档布局流，并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。但是，子类使用float来使元素并排，那么父类就需要使用clearfix来防止子元素 ...
分类：
Web程序 时间：
2020-06-02 18:34:45
阅读次数：
72
一 选择符 1 通配：*{} 所有元素 类：p{} 如 p 标签等相应元素 ID：#id{} 使用相应 id 属性的元素样式 类：.类名{} 使用相应 class 属性的元素样式 包含：div p{} 被某些元素包含的子元素的样式 选择符分组： #content2 , .STYLE{} 一次定义几个 ...
分类：
Web程序 时间：
2020-06-02 18:33:52
阅读次数：
100
原文链接 水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.2) 若是块级元素, 该元素设置 margin:0 auto即可.3) 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-conte ...
分类：
其他好文 时间：
2020-06-02 00:14:25
阅读次数：
578
