一、flex布局体验 二、flex布局原理 display:flex; 三、flex布局父项常见属性 3.1 常见父项属性 3.2 flex-direction设置主轴的方向 3.3 justify-content 设置主轴上的子元素排列方式 justify-content 属性定义了项目在主轴上的 ...
分类：
其他好文 时间：
2020-06-01 23:37:24
阅读次数：
62
1、基本概念1）Flex布局元素称为Flex 容器，子元素称为Flex项目；2）容器存在两根轴：主轴main axis(默认是水平方向)和交叉轴cross axis(默认是垂直方向)；3）任何一个容器都可以指定为flex布局： 块元素：display：flex； 行内元素：display:inlin ...
分类：
其他好文 时间：
2020-06-01 21:03:38
阅读次数：
90
1.什么是Flex布局 Flex 是flexible Box 的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。链接参考 2.基本概念 采用Flex布局的元素，称为容器(flex container),简称‘容器’。它的所有子元素自动成为容器成员，称为 ...
分类：
其他好文 时间：
2020-06-01 20:43:28
阅读次数：
54
本文主要取自于网易云课堂——前端微专业 页面制作github相关代码：https://github.com/Mirror1988... 💪布局解决方案 居中布局 水平居中 父元素与子元素宽度不定 <div class="parent1 parent"> <div class="child1 chi ...
分类：
其他好文 时间：
2020-06-01 20:28:02
阅读次数：
67
原理 父级元素 relative，子元素 absolute，然后通过top、left、right、bottom来设置具体出现位置。 DOM结构 <div class="wrapper-dashed"> <div class="dashed"></div> </div> CSS样式 .wrapper- ...
分类：
Web程序 时间：
2020-05-31 16:15:29
阅读次数：
88
定义 BFC全称为block formatting context，意为块级格式化上下文，是Web页面中盒模型布局的css渲染模式。 可能上面的解释看了有点懵逼，通俗的说BFC指的的是一块区域的布局， 这个区域的布局有一个显著特点：这个区域内的子元素无论使用何种布局、何种样式都不会影响外部的元素。B ...
分类：
Web程序 时间：
2020-05-31 12:44:23
阅读次数：
56
BFC（block formatting context）块级格式化上下文。 如果一个元素具有 BFC，内部子元素无论如何都不会影响外部的元素。所以，BFC 元素是不可能发生 margin 重叠的，因为 margin 重叠是会影响外面的元素的; BFC 元素也可以用来清除浮动的影响，因为如果不清除， ...
分类：
Web程序 时间：
2020-05-30 16:06:35
阅读次数：
79
多行文本溢出，但是最后一行木有到结尾，如下图这种例子 解决代码示例html: <div class="model_content"> <p class="model_text"> 元素的“格式化首行”可能会存在于相同流下的块级子元素上元素的“格式化首行”可能会存在于相同流下的块级子元素上。元素的“格 ...
分类：
其他好文 时间：
2020-05-30 15:57:54
阅读次数：
54
Vue 的 ref 属性的回顾 vue 的 ref 属性主要用于访问子组件（vue组件）或者子元素（dom元素）， 具体写法：<base-input ref="usernameInput"></base-input> 获取实例：this.$refs.usernameInput 如果base-inpu ...
分类：
其他好文 时间：
2020-05-29 13:38:11
阅读次数：
78
原文:CSS 伪选择器 focus-within 介绍 CSS中的 :focus-within 伪选择器可有点“不寻常”，尽管它的名称看上去很简单，而且相当直观。但它的解释是：选择一个包含具有:focus 的任何子元素的元素。有点绕是不是，但仔细读应该也能理解，下面通过具体的例子你就更能理解了。 f... ...
分类：
Web程序 时间：
2020-05-28 21:33:12
阅读次数：
69
