- 博客(7)
- 收藏
- 关注
RSS订阅原创 弹性布局笔记
弹性盒布局前言基于主轴(x轴)和侧轴(y轴)进行排列换行之后每多一行 可以理解为多一个主轴一.父元素1.声明一个弹性盒display：flex；2.设置子标签排列方向(变换主轴和侧轴的方向)flex-direction:row（正向横排）/row-reverse（反向横排）/column（正向竖排）/column-reverse（反向竖排）注意：这个会调转轴的方向3.换行 （换行后每多一行会多一条主轴）flex-wrap:wrap/wrap-reverse/no-wrap..
2022-03-03 12:35:20
182
原创 网格布局笔记
一.父容器属性1.声明网格布局display：grid/inline-grid2.设置行数和列数复合写法：repeatgrid-templa-row：repeat(列数，宽度（百分比 像素 分数fr minmax（小，大） auto）)grid-templa-column：repeat(行数，高度（百分比 像素 分数fr）)给网格线设置名称 起名后不会显示自己设置的名称 只显示默认名称grid-template-rows：[名称] 行宽 [名称] 行宽[名称] 行宽 [名称] ..
2022-03-02 16:37:36
272
原创 如何将盒子垂直水平居中？
前期将盒子在页面垂直水平居中的五种办法方法一：上下左右大法div{ top：0； left：0； rigth：0； bottom：0； margin：0 auto;}方法2：用定位+平移div{ position: absolute; left:50%; top:50%; transform: translateX(-50%) translateY(-50%);}这里平移换成margin也行，但.
2022-03-02 16:03:01
903
原创 浮动的介绍和问题解决
前言浮动是我们布局中经常会用到的属性，但是我们用了它的以后，后面可能会出现一些问题。一、浮动是什么？浮动是float，它的值有left（左浮动），right（右浮动），none（不浮动）和inherit（继承父元素的浮动），其中inherit不常用，主要使用的是前面三个。二、浮动怎么使用？一般用于元素在一行排列，float：left；向左边横排对齐，从左边开始一个一个按顺序排列。 float：right；向右边对齐，它是从右边开始一个一个按顺序排列。...
2022-03-02 14:34:08
1261
原创 主流浏览器内核与前缀
二、五大浏览器内核•Trident （MSHTML）（ie 三叉戟；三叉线；三齿鱼叉）•Gecko （壁虎 firefox）•Presto （ 欧朋opera）•Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）•Blink (由Google和Opera Software开发的浏览器排版引擎)。Google谷歌 safari苹果前缀：-webkit-opera(欧朋)前缀：...
2022-03-02 12:48:29
881
原创 BFC规范
什么是BFC规范?BFC 全称为 块级格式化上下文（Block Fromatting Context），是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。简单的来说，它就是一种会影响元素与元素之间的位置、间距的属性。BFC 的特性?1.内部的box会在垂直方向，从顶部一个接一个的放置2.box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生叠加3.每个元素的margin box的左边，与包含块borde
2022-03-02 12:34:51
713
原创 相对定位和绝对定位的用法
前言定位+位移是前期学习的重要知识点一、定位是什么？定位是用position属性进行固定元素在浏览器中的位置的一种方法。二、定位怎么使用？定位一般position：relative；position：absoulte；用配合top、left、right、bottom进行位移三、relative和absoulte的区别？1.relative是相对于自己现在的位置进行定位 如果元素用了position：relative； 那么用top、left、right、bottom这...
2022-03-01 21:02:31
2506
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人