ICode9

精准搜索请尝试: 精确搜索
  • css补漏笔记2022-07-04 15:36:59

    一.text-align 只有对行内级元素生效   justify 两端对齐 [ text-align: justify ]   [ 最后一行呢就正常不生效,你要强制生效 [ text-align-last : justify ] 二. word-spacing 字与字之间的间距   word-spacing : 30px ;  三. 2个斜体的区别 :   font-style : italic;

  • html调用Micrisoft Teams2022-07-04 10:03:09

    <html> <head> <title>Teams呼叫</title> <style> .button { background: #f2f2f2; color: #d04a02; display: -webkit-box; display: -ms-flexbox; display: flex

  • display 为 flex 的元素2022-07-03 12:37:16

    弹性布局 display:flex的意思是表示弹性布局,它能够扩展和收缩flex容器内的元素,以最大限度地填充可用空间。Flex是Flexible Box的缩写,意为弹性布局,用来为盒装模型提供最大的灵活性。 设置为flex布局以后,子元素的float、clear和vertical-align属性都将失效 它可以用于一下四个方面

  • 【快应用】text组件里的文字很多,旁边的div样式会被拉伸如何解决2022-07-01 09:07:01

    ​ 【现象描述】 当text组件的内容较多多行显示的时候,相邻的div样式会显示异常,会从正常的圆形变为椭圆。 代码如下: <template> <div class="container"> <div style="align-items: center;"> <div class="typscolor" style="background-color: bl

  • 五、BFC2022-06-28 17:03:23

    1.理解BFC BFC,全称“块级格式化上下文”(block formatting context),可以为元素提供一个独立的空间,将元素内部的内容与外部的上下文隔离开,不会相互影响。这种隔离为创建BFC的元素做了以下事情: 包含了内部所有元素的上下外边距,它们不会跟BFC外面的元素产生外边距折叠(内部元素与其创建

  • Flex & Bison 开始2022-06-25 21:32:48

    Flex 与 Bison 是为编译器和解释器的编程人员特别设计的工具: Flex 用于词法分析(lexical analysis,或称 scanning),把输入分割成一个个有意义的词块,称为记号(token)。 Bison 用于语法分析(syntax analysis,或称 parsing),确定这些记号是如何彼此关联的。 例如,如下代码片段: alpha = beta +

  • CSS 实现筛子三点布局和五点布局2022-06-25 16:37:05

    筛子三点布局 思路是使用flex布局或中,弹性子项中的align-self属性 align-self属性可以覆盖弹性容器中的align-items的值, 让子项设置自己的布局属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c

  • 浮动+页面居中+弹性盒子+定位+图片插入2022-06-22 21:05:04

      1.浮动:float:right向右浮动,相当于图层置顶.   2.页面居中:margin:auto;   3.弹性盒子:设置弹性盒子:display:flex;width:0px;height:0px;border:2px solid red;弹性盒子会让子元素在一行显示,如果一行占不下,则会平均压缩每个盒子。   容器设置弹性盒子的元素,项目设置弹性盒子

  • 查漏补缺——flex属性2022-06-22 08:04:22

    问题 源码中这三行代码是啥意思? display: flex; justify-content: space-between; align-items: center; 答案 html+css:display:flex属性 块元素、行内元素、行内块元素 display: flex;这行代码将ID为layout-header的元素设置为弹性盒子,在没有设置弹性盒子之前,页面是这样的: 可

  • 使用min-width解决Flex或Grid布局时容器被撑大的问题2022-06-21 21:01:27

    在使用Flex或Grid布局时,经常会遇到内容溢出容器或者将容器撑大的情况 例如在grid布局中元素尺寸为1fr,或者flex布局中元素flex-grow:1时,想使用Echarts画图和布局中的文本省略显示时发现并没有达到预期的效果,容器被内容撑大了 想要解决这个问题,首先需要知道容器为什么会被撑大。 我

  • css属性display flex2022-06-20 12:03:43

    display:flex Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。它即可以应用于容器中,也可以应用于行内元素。 基本概念 采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的

  • 认识弹性盒子flex2022-06-19 12:02:33

    认识弹性盒子flex 来源:https://blog.xybin.top/2022/flex 1、定义弹性布局(父级上定义)display:flex; 如果说内核为webkit 的必须前面加上 -webkit-flex 2、设置了弹性布局之后,子元素的css中的float, clear, vertical-align 这些属性将失效。 3、可以将flex弹性布局看成一个大盒子

  • 50 Projects(大抵会不足50个,毕竟目的是了解语法构造去制作游戏)2022-06-16 14:05:03

    50 Projects 01 Expanding Cards(附带新手菜鸡注释) Live Demo HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

  • flex space-between 均分换行,不够一行的时候从左侧开始2022-06-16 14:00:14

    *{ margin: 0; padding: 0; list-style: none; } .flex-wrap{ width: 600px; display: flex; border: 15px solid #0077AA;

  • flex2022-06-15 12:04:44

    display:flex; flex-direction 决定主轴的方向(即项目的排列方向) row(默认): 主轴水平方向,起点在左端 row-reverse: 主轴水平方向,起点在右端 column: 主轴垂直方向,起点在上边沿 column-reverse:主轴垂直方向,起点在下边沿 flex-wrap 定义换行情

  • 【CSS】布局方式2022-06-14 09:32:03

    CSS盒子模型与定位 html元素可以分为三类(根据css):块级元素(block)、行内元素(inline)、行内块级元素(inline-block) 块级元素 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行) 元素的高度(height),宽度(width),行高(line-height)以及顶和底边距(mar

  • BFC块级格式化上下文2022-06-12 00:03:45

    BFC Blocking Fomatting Context 块格式化上下文 是Web页面的可视化CSS渲染的一部分,是浮动元素与其他原色交互的区域   ①BFC是一个独立的布局空间,BFC内部元素布局与外部互不影响 ②可通过一些条件触发BFC   触发条件: ①根元素html ②float不为none ③overflow不为visible ④d

  • css扩展知识32022-06-10 17:02:45

    1.轮廓属性 ①轮廓outline,用于在元素周围绘制一个轮廓,位于border的外围,可以突出显示元素。 ②常用属性: outline-width——轮廓宽度 outline-color——轮廓颜色 outline-style——轮廓样式 outline简写 ③在浏览器,当鼠标单击或使用TAB键让一个表单元素或链接元素获得焦点时,该元素

  • pure CSS 轮播图 All In One2022-06-10 00:33:59

    pure CSS 轮播图 All In One :root { --s: 6; --h: 36; --speed: .8s; } .g-container { width: 300px; margin: auto; height: calc(var(--h) * 1px); line-height: calc(var(--h) * 1px); font-size: 20px; background: #673ab7; color: #fff; overflo

  • ExtJS 布局-VBox布局(VBox layout)2022-06-09 22:04:36

    更新记录: 2022年6月9日 发布。 2022年6月1日 开始。 1.说明 vbox布局类似auto布局,将子组件一个接一个垂直向下放置,既可以在水平方向也可以垂直方向改变排列方式。 设置布局方法 在容器中设置 layout: 'vbox' layoutConfig: { } 在子组件中使用的flex选项设置 相对权重 或

  • 一种复习flex布局的方法2022-06-04 11:03:59

    方法论 flex布局有多个属性,时常会忘记。我们复习的话,单纯看一些博客文章,不能直观的理解,也比较枯燥。 因此如果有一种用写代码闯关的方式来复习(学习)flex布局,那也许会更有意思。 FLEXBOX FROGGY 复习的话可以在settings里面改变difficulty,关闭提示,并设置成随机出题。 我对flex属性

  • uniapp 图片自动缩放2022-06-02 16:01:19

    <template> <view class="dlz-fx-column"> <movable-area> <movable-view direction="all" scale-value="1" scale-min="1" scale="true" scale-max="4"> <image

  • radio插件2022-06-02 01:31:17

    *, *:after, *:before { box-sizing: border-box; } .container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有