引言 页面滚动条造成宽度减小的场景很常见了，由于div块级元素的流动性，其宽度默认为100%的body宽度，但是当容器的高度超过视口宽度时候，页面就会出现滚动条，这个滚动条的宽度就会挤压body的可用宽度，也就是会挤压我们的容器的宽度，造成页面晃动的现象，很不友好，下面就来探讨下如何解决这个滚动条的 ...
分类：
其他好文 时间：
2020-05-30 20:22:19
阅读次数：
80
普通流（normalflow）说明前面我们提过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？CSS的定位机制有3种：普通流（标准流）、浮动和定位。普通流又称为“文档流”，或者“标准流”，实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种默认的排列方式，不会出现例外的情况的布局叫做普通流布局。普
分类：
其他好文 时间：
2020-05-29 09:21:28
阅读次数：
67
类选择器（Class selectors） 通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。 在写样式表时，类选择器是以英文句号（.）开头的。 ID选择器（ID selectors） 通过设置元素的 id 属性为该元素制定ID。ID名 ...
分类：
其他好文 时间：
2020-05-28 09:16:25
阅读次数：
132
BFC的定义 BFC到底是个啥呢？先贴出一段大佬们在分析BFC的时候字面上的理解： 在CSS布局中，是通过对一个个box的布局，来实现整体页面的布局，这一个个box也就是一个个容器元素，这些元素分为两类：块级元素(block)，行内元素(inline)。 对于不同类型的元素，有不同的处理规则，这个元 ...
分类：
其他好文 时间：
2020-05-28 00:48:54
阅读次数：
86
块级元素 如 div 可以设置margin-top、margin-bottom 、margin-left、margin-right。 但是 margin的 auto值 设置水平方向的，可以直接水平居中；想要垂直居中需要子绝父相，给自己添加绝对定位后并且将top bottom right left赋值 ...
分类：
其他好文 时间：
2020-05-26 20:50:03
阅读次数：
77
垂直居中方法 适用于父盒子为块级元素（div）、子盒子为块级元素（div）；父盒子为块级元素（div）、子盒子为行内块元素（span）；父盒子为块级元素（div）、子盒子为内联元素（img）； .father { height: 500px; width: 500px; background-col ...
分类：
其他好文 时间：
2020-05-26 20:42:24
阅读次数：
66
注意：无论是什么布局，最外面都需要加个版心，这样不会导致整个布局超过可视区域，形成横向滚动条。 1.流式布局 (百分比布局) 宽度使用百分比，高度使用px 2.伸缩布局 (弹性布局) flex 2.1 作用：使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥 ...
分类：
移动开发 时间：
2020-05-24 14:07:21
阅读次数：
108
当块级元素（block）的上外边距(margin-top)和下外边距(margin-bottom)同时都有设定时只会只会保留最大边距，这种行为称为边界折叠（margin collapsing），有时也翻译为外边距重叠。、 设定float和position=absolute（包括固定定位fixed，但 ...
分类：
Web程序 时间：
2020-05-24 11:46:43
阅读次数：
299
垂直居中： 块级元素 1.使用position设置定位方式后进行元素的偏移 2.利用CSS3的弹性布局（flex） 内联元素 使用CSS3 flex布局 水平居中： 块级元素 1.直接设置margin 2.使用position设置定位方式后进行元素的偏移（类似于垂直居中相应的方法），先设置left： ...
分类：
其他好文 时间：
2020-05-23 00:36:08
阅读次数：
49
标签等级 + 块级元素 1. 霸占一行，不能与其他任何元素并列。 2. 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。 + 行级元素 1. 与其他行内元素并排 2. 不能设置宽高，默认的宽度就是文字的宽度。 + 行级元素与块级元素的转换 1. display:inline将块级元素设 ...
分类：
Web程序 时间：
2020-05-22 17:35:29
阅读次数：
103
