display

HTML元素类型和类型的转换

由 戏子无情 提交于 2020-02-27 13:24:24
HTML元素分为：块状元素和内联元素 块元素:(block) 1.默认独占一行 2.没有宽度时，默认撑满一排 3.可以定义元素的宽和高 常见的块状元素有div，ul，li，h1-h6，ol 内联,行内元(inline) 1.多个内联元素可以同一行显示 2.高和宽由内容撑开 3.不支持宽高 4.不支持上下的margin值 常见的内联元素有：a，br，strong，em，span， 在这两张元素之外还有，img，input，等被称为行内块元素 他们区别一般inline元素 如img/input/select/button等有内在尺寸且可以设置width/height属性的这类元素 上面说了html的元素类型，现在说一下怎么把元素转换 display属性和属性值 display有十八个属性，我们说一下它常用的几个 display：block/inline/inline-block/none/list-item display:block:块状显示，使类型变为块状元素 display：inline内联显示，使类型变为内联元素 display:inline-block行内元素显示 （1）元素的内容以块状显示，并且与其它元素显示在一行 （2）支持宽高，没有宽度的时候由内容撑开 （3）只要这一个元素类型支持vertical-align（img,input） display：none：将元素隐藏

元素隐藏方法总结：

由 我的未来我决定 提交于 2020-02-27 03:05:12
如果希望元素不可见、不占据空间、资源会加载、DOM 可访问： display: none ； 如果希望元素不可见、不能点击、但占据空间、资源会加载，可以使用： visibility: hidden ； 如果希望元素不可见、不占据空间、显隐时可以又 transition 淡入淡出效果： div{ position: absolute; visibility: hidden; opacity: 0; transition: opacity .5s linear; background: cyan; } div.active{ visibility: visible; opacity: 1; } 这里使用 visibility: hidden 而不是 display: none ，是因为 display: none 会影响css3的 transition 过渡效果。 但是 display: none 并不会影响css animation 动画的效果。 如果希望元素不可见、可以点击、占据空间，可以使用： opacity: 0 ； 如果希望元素不可见、可以点击、不占据空间，可以使用： opacity: 0; position: abolute; ； 如果希望元素不可见、不能点击、占据空间，可以使用： position: relative; z-index: -1; ； 如果希望元素不可见

ESP32的python定时器-亲测可用

由 醉酒当歌 提交于 2020-02-26 22:00:36
#直接给代码 from machine import Timer angle_time = Timer ( 0 ) #调用定时器 angle_tim . init ( period = 2000 , mode = Timer . PERIODIC , callback = lambda x : display ( ) ) #设置2000毫秒，定时器模式为一直运行，调用display（） def display ( ) : print ( "Yes!" ) 来源： CSDN 作者： 小灰灰的大灰灰 链接： https://blog.csdn.net/weixin_44229819/article/details/104523350

博客园样式(仿简书)

由 ↘锁芯ラ 提交于 2020-02-26 20:13:30
成品图 成品链接 设置流程 博客园　　→　　管理　　→　　设置　　→　　博客皮肤　　→　　SimpleMemory 页面定制CSS代码 禁用模板默认css不用勾选 body { background: none; } .postTitle { border-bottom: 0px solid #969696; border-left: 0px solid #969696; color: #969696; display: inherit; font-size: 18px; font-weight: 700; line-height: 1.5; padding: 0; } .postTitle a:link, .postTitle a:visited, .postTitle a:active { color: #969696; font-family: -apple-system,SF UI Display,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif; } .postTitle a:hover{ color: #646464; text-decoration: underline; } .c_b_p_desc { margin: 0 0 8px; font-size

简易flex双列布局

由 懵懂的女人 提交于 2020-02-26 16:34:05
.flex-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; background: #fff; } .flex-list .flex-list-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 48%; padding-bottom: 20px; } .flex-list .flex-list-item:nth-child(2n+1) { margin-right: 4%; } 来源： oschina 链接： https://my.oschina.net/u/2266306/blog/3164925

android P Choreographer原理

由 。_饼干妹妹 提交于 2020-02-26 14:34:12
前言 Android系统从4.1(API 16)开始加入Choreographer机制，用于同Vsync机制统一处理输入(Input)、动画(Animation)、绘制(Draw)三个UI操作。其实UI显示的时候每一帧要完成的事情只有这三种。Choreographer接收显示系统的时间脉冲(垂直同步信号-VSync信号)，在下一个frame渲染时控制执行这些操作。 如何理解Choreographer？ 1. Choreographer的源码位于android.view这个pakage中，是view层框架的一部分。 2. Choreographer中文翻译过来是"舞蹈指挥"，字面上的意思就是优雅地指挥以上三个UI操作一起跳一支舞。这个词可以概括这个类的工作，如果android系统是一场芭蕾舞，他就是Android UI显示这出精彩舞剧的编舞，指挥台上的演员们相互合作，精彩演出。 3. 开发者可以使用Choreographer#postFrameCallback设置自己的callback与Choreographer交互，你设置的callCack会在下一个frame被渲染时触发。 4. Callback有如下5种类型：. public static final int CALLBACK_INPUT = 0; public static final int CALLBACK

511,display:inline-block什么时候不会显示间隙？

由 ℡╲_俬逩灬. 提交于 2020-02-26 00:07:30
（百科： 在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。 display：inline；强制变成行内元素 display：block；强制变成块元素 而display：inline-block；顾名思义就是行内块的意思了，他具备了行内元素不换行的特征，同时也有块元素可以设置宽高的特征） 移除空格 使用margin负值 使用font-size：0 letter-spacing word-spacing eg， <html> <head> <title>display:inline-block元素之间空隙的产生原因和解决办法</title> <style type="text/css"> .parent .child { display: inline-block; background-color: #fdfd04; width: 100px; height: 100px; } .pst1{ margin-left: -5px; } </style> </head> <body> <div class="parent"> <div class="child">child1</div>

响应式布局原理

由 耗尽温柔 提交于 2020-02-25 15:38:05
什么是响应式布局 一种网站兼容多种终端 对不同屏幕尺寸（大小）做出响应，并进行相应布局的一种移动Web开发方式 以下有两种响应式布局，仔细读懂其中的代码，你也就掌握了响应式布局的原理了。（代码有很多重复的地方，只是看起来很长，内容并不多） grid.css .container { width : 100% ; padding-left : 15px ; padding-right : 15px ; margin-left : auto ; margin-right : auto ; } /*sm 小屏*/ @media ( min-width : 576px ) { .container { width : 540px ; } } /*md 中屏*/ @media ( min-width : 768px ) { .container { width : 720px ; } } /*lg 大屏*/ @media ( min-width : 992px ) { .container { width : 960px ; } } /*xl 超大屏*/ @media ( min-width : 1200px ) { .container { width : 1140px ; } } .row { margin-left : -15px ; margin-right : -15px ; }

SystemVerilog阵列操作SystemVerilog Array Manipulation

由 跟風遠走 提交于 2020-02-24 07:27:24
SystemVerilog中有许多内置方法可帮助进行数组搜索和排序。 数组操作方法只是简单地遍历数组元素，每个元素都用于评估with子句指定的表达式。 iterator参数指定一个局部变量，可在with表达式内使用该局部变量来引用迭代中的当前元素。 如果未提供参数，则item是默认使用的名称。 数组定位器方法 对于其中某些方法，with子句和expresison是必需的，而对于另一些方法，则是可选的。 强制性的“ with”子句 这些方法用于根据给定表达式从现有数组中滤除某些元素。 所有满足给定表达式的元素都将放入数组并返回。 因此，with子句对于以下方法是必需的。 Method name Description find() 返回满足给定表达式的所有元素 find_index() 返回满足给定表达式的所有元素的索引 – – find_first() 返回满足给定表达式的第一个元素 find_first_index() 返回满足给定表达式的第一个元素的索引 – – find_last() 返回满足给定表达式的最后一个元素 find_last_index() 返回满足给定表达式的最后一个元素的索引 – – Example module tb ; int array [ 9 ] = ' { 4 , 7 , 2 , 5 , 7 , 1 , 6 , 3 , 1 } ; int res [

css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）

由 蓝咒 提交于 2020-02-24 04:32:39
一、 上中下左固定 - fixed+margin 概括： 如图，此种布局就是顶部、底部和左侧固定不动，只有中间右侧超出可滚动。 html： <header>我是头部position: fixed;z-index: 9;</header> <section class="flexModal fixedLeft"> <nav> <ul> <li>section.flexModal nav ul>li*5</li> <li>栏目一</li> <li>栏目二</li> <li class="active">栏目三</li> <li>栏目四</li> <li>栏目五</li> </ul> </nav> <article> <h3> 内容区域 section.flexModal articel </h3> <p> section{ padding: 60px 0; } </p> <p> section.flexModal{ display: flex; } </p> <p> section.flexModal nav{ width: 200px; } </p> <p> section.flexModal article{ flex: 1; } </p> </article> </section> <footer>底部版权同头部 position: fixed;z-index: 9;<
订阅 display