
CSS3
C3
Ramenbear
Now you see me.
展开
-
Flex
flex布局 1.任何一个容器都可以指定为flex布局,行内元素也可以指定为flex布局 设为Flex布局以后,子元素的float、clear和vertical-align属性将失效 2.采用flex布局后,叫容器,它所有子元素,称之为项目 3.容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis) 主轴的...原创 2020-03-06 12:10:32 · 143 阅读 · 0 评论 -
居中方法汇总
1.水平居中 1.行内元素 首先看父元素是不是块级元素,如果不是则改成块级元素,再给父元素添加text-align: center; 2.块级元素 1.方法一 1.定宽度 谁居中,给谁设置margin: 0 auto; 2.不定宽度 默认子元素的宽度和父元素一样,这时需要设置子元素为display: inline-block; 或display: inline;给父元素设置 text-align:...原创 2020-03-01 21:54:27 · 304 阅读 · 0 评论 -
BFC
1.BFC? 块级格式化上下文:页面中的一块渲染区域,有自己的渲染规则,决定了子元素如何布局,以及其他元素的关系 2.原理 1.内部的box在垂直方向一个个放着 2.box垂直上的距离由margin决定,属于同一个BFC的相邻两个box的margin会重叠 3.BFC就是页面上一个隔离的独立容器,容器里的子元素不会影响外面的元素 4.计算BFC高度,浮动元素也计算在内 5.BFC不会和float ...原创 2020-02-25 14:57:28 · 142 阅读 · 0 评论 -
viewport和移动端布局
viewport和移动端布局 前端开发中,响应式布局通常需要适应不同分辨率的设备 常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh 1.px和视口 在静态页面中我们经常使用像素(px)作为单位,来描述一个元素的宽高以及定位信息 在pc端,通常认为1px表示的真实长度是固定的 但是在不同的设备上,px的大小显示结果肯定会不一致,移动端显示较小 那么css中的1px的真实长度到底由什么决定...原创 2019-12-02 18:28:31 · 1794 阅读 · 0 评论