display

导航栏

我的未来我决定 提交于 2020-03-01 06:00:37
<template> <div class="box"> <div v-for="(item, i) in Array(4)" :key='i' class='item'> <span>歌曲</span> </div> </div> </template> <style scoped> .box{ display: flex; line-height: 44px; } .item{ flex: 1; background-color: blue; color: red; text-align: center; } .item span{ border-bottom: 2px solid red; padding-bottom: 8px; } </style> 来源: CSDN 作者: QunBingCheng 链接: https://blog.csdn.net/chengQunBin/article/details/104574356

拜拜了,浮动布局-基于display:inline-block的列表布局

半城伤御伤魂 提交于 2020-03-01 05:42:37
一、一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了。写“ CSS float浮动的深入研究、详解及拓展(一) ”和“ CSS float浮动的深入研究、详解及拓展(二) ”似乎就在不久前,然而相隔差不多有一年之久了。文章最后留下了“浮动布局更好的替代方案是什么?”后文再介绍的预告。 由于自己肚子中的货物不足以撑起一篇足够质量的文章,所以关于“浮动布局更好的替代方案是什么?”的文章一直并未动笔。好在事物总是在发展的,我也 是每天都是在进步,对于列表布局的思考也愈发成熟。加上正好前不久又有人询问我“浮动布局的替换方案是什么”,于是觉得介绍“浮动布局的替换方案“的时机 成熟了。 要注意,本文的布局专指列表布局。就是具有相同DOM结构的水平排列可以repeat出来的列表元素。如QQ校友中的图片列表(图片截自老同学相册,已隐去名字): 二、列表浮动布局的局限 列表浮动布局就是指通过使用float属性,让列表元素依次排列的布局(通常是左浮动,float:left)。这是相当常见的也是目前最最主流的列表布局方式,所以这里就不吃咸鱼蘸酱油——多此一举show代码了。 对于浮动局部的局限性,想必同行们都知道,就是每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,“锯齿相错”,例如一个左浮动列表布 局,如果第一行有个列表高度高于其他列表,那就在第二行

浅谈“display:flex”属性(弹性盒子or弹性布局)——(逆战班)

假如想象 提交于 2020-02-29 14:40:17
一、flex简要概念 display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。 Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度(和排列顺序),从而能够最好地填充可用空间(主要是为了适应所有类型的显示设备和屏幕尺寸)。flex布容器能够放大子元素使之尽可能填充可用空间,也可以收缩子元素使之不溢出 二、display:flex 在父项添加的属性值 flex-direction:布局的排列方向 (主轴排列方向) row 默认值,显示为行。方向为当前文档水平流方向,默认情况下是从左往右。(1 2 3 4) row-reverse 显示为行。但方向和row属性值是反的(4 3 2 1) column 显示为列 column-reverse 显示为列。但方向和column属性值是反的 flex-wrap : 是否进行换行处理。 nowrap; 默认值,不换行处理 wrap; 换行处理 wrap-reverse; 反向换行 justify-content ; 属性 决定了主轴方向上子项的对齐和分布方式。 flex-start : 子项都去起始位置对齐。(默认值) flex-end : 子项都去结束位置对齐。 center : 子项都去中心位置对齐。

CSS中如何隐藏DOM节点

三世轮回 提交于 2020-02-29 14:26:49
今晚注定是个不眠夜呀,手贱的同学又要送上一则小文,来分享分享 一: 我们在想对如何隐藏节点这个问题上有所建树的话,那么我们就必须要先知道浏览器渲染引擎的基本工作原理,现在渲染引擎主力军有 ( Firefox使用Gecko —— Mozilla自家的渲染引擎;Safari 和 Chrome 使用 Webkit。Webkit是一种开源的渲染引擎 )。 渲染的基本流程: 解析HTML构建DOM树——构建渲染树——渲染树布局——绘制渲染树。 如果亲你不知道,请关注这个连接有所介绍: http://ued.ctrip.com/blog/?p=3295 二: 完成上面的脑补之后就可以说说我们的隐藏节点了。有两个CSS语句能起到隐藏节点的作用 1、visibility; W3c定义的是规定了元素的是否可见,值得注意的是在下面提示部分有一句话说:即使不可见也会占用上面的空间,在这里就是在指它与display的不一样了 2、display; W3C在说明这个属性的时候是比较客观的,这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。 3、对比这两个他们都有相同的功能就是隐藏

个人笔记1:display与visibility用法

Deadly 提交于 2020-02-29 14:26:36
有人会将CSS中的属性display和visibility混淆,他们看似没什么不同,其实区别是很大的。 visibility属性控制定位的元素是否可见,取值包括:visible(可见)、hidden(隐藏)、inherit(继承),默认值是inherit。visibility属性与display属性的不同之处在于:当元素被隐藏时,visibility属性定义的元素任然为保留原有的显示空间。 例如以下代码: <html> <head> <title>display和visibility</title> <style type="text/css"> #dis{ boder:2px solid red; width:100px; margin:10px; } #vis{ border:2px solid red; margin:10px; width:100px; } </style> </head> <body> <div id="dis">这是案例1</div> <div id="vis">这是案例2</div> </body> </html> 如果我们要隐藏案例1,同时案例2冲上来占据案例1的位置,我们可以使用如下代码对案例1进行格式化: #dis{ border:2px solid red; width:100px; margin:10px; display:none; }

display的设置

删除回忆录丶 提交于 2020-02-29 12:34:51
标准流 HTML元素在标准状况下的定位方式 行内元素在同一行内横向排列 块级元素占满整个一行,在页面中竖向排列 元素不会移动到其它地方去,对于嵌套的元素盒子也是嵌套的关系 行内元素的盒子 行内元素的盒子永远只能在浏览器中得到一行高度的空间(行高由line-height属性决定 如果没设置该属性,则是内容默认的高度),如果给它设置上下border,margin,padding等值 导致其盒子的高度超过行高,那么它的盒子上下部分将和其他元素的盒子重叠 因此,不推荐对行内元素直接设置盒子属性,一般先设置行内元素几块级元素显示,再设置它的盒子属性。 display属性 通过display属性可以控制元素是以行内元素显示还是以块级元素显示,或不显示 display:block|inline|none|list-item(行块切换代码) inline-block行内块元素(css2.1新增的值) block元素 block元素的特点是: 总是在新行上开始 高度,行高以及顶和底边距都可控制 宽度缺省是它的容器的100%,除非用width设定一个宽度 <div> <p> <h1> <form> <ul> <li>是块元素的例子 inline元素 inline元素的特点是: 和其它元素都在一行上 高,行高及顶和底边距不可改变 宽度就是它的文字或图片的宽度,不可改变 <span> <a> <label

查看SQL语句的真实执行计划

Deadly 提交于 2020-02-29 07:41:18
DBMS_XPLAN包中display_cursor函数不同于display函数,display_cursor用于显示SQL语句的真实的执行计划,在大多数情况下,显示真实 的执行计划有助于更好的分析SQL语句的全过程,尤其是运行此SQL语句实时的I/O开销。通过对比预估的I/O与真实的I/O开销来判断SQL语句所存 在问题,如缺少统计信息,SQL语句执行的次数,根据实际中间结果集的大小来选择合适的连接方式等。本文仅仅讲述display_cursor函数的使 用。 有关执行计划中各字段模块的描述请参考: 执行计划中各字段各模块描述 有关由SQL语句来获取执行计划请参考: 使用EXPLAIN PLAN获取SQL语句执行计划 有关使用autotrace来获取执行计划请参考: 启用AUTOTRACE功能 有关dbms_xplan之display函数请参考: dbms_xplan之display函数的使用 一、display_cursor函数用法 1、display_cursor函数语法 DBMS_XPLAN.DISPLAY_CURSOR( sql_id IN VARCHAR2 DEFAULT NULL, child_number IN NUMBER DEFAULT NULL, format IN VARCHAR2 DEFAULT 'TYPICAL'); 2、display

Django-admin管理工具

不打扰是莪最后的温柔 提交于 2020-02-28 07:14:11
知识预览 admin组件使用 admin源码解析 admin组件使用 Django 提供了基于 web 的管理工具。 Django 自动管理工具是 django.contrib 的一部分。你可以在项目的 settings.py 中的 INSTALLED_APPS 看到它: # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', "app01" ] django.contrib是一套庞大的功能集,它是Django基本代码的组成部分。 激活管理工具 通常我们在生成项目时会在 urls.py 中自动设置好 from django.conf.urls import url from django.contrib import admin urlpatterns = [ url(r'^admin/', admin.site.urls), ] 当这一切都配置好后,Django 管理工具就可以运行了。 使用管理工具 启动开发服务器

xpdf在centos下报错 Config Error: No display font for &apos;Courier&apos; 解决

时光怂恿深爱的人放手 提交于 2020-02-28 06:28:25
运行xpdf,报错: Config Error: No display font for 'Courier' Config Error: No display font for 'Courier-Bold' Config Error: No display font for 'Courier-BoldOblique' Config Error: No display font for 'Courier-Oblique' Config Error: No display font for 'Helvetica' Config Error: No display font for 'Helvetica-Bold' Config Error: No display font for 'Helvetica-BoldOblique' Config Error: No display font for 'Helvetica-Oblique' Config Error: No display font for 'Symbol' Config Error: No display font for 'Times-Bold' Config Error: No display font for 'Times-BoldItalic' Config Error: No display font for

display:box和display:flex属性介绍

混江龙づ霸主 提交于 2020-02-27 21:55:11
1.display:box 父容器里面的box属性有box-orient|box-dirextion|box-align|box-pack|box-lines box-orient:用来确定父容器里面子元素的排列方式,是水平还是竖直horizontal|vertical|inline-axis|block-axis|inherit box-direction:确定父容器里面子容器的排列顺序,normal|reverse|inherit box-align:表示父容器里面子容器的垂直对齐方式,start|end|center|baseline|stretch box-pack:表示父容器里面子容器的水平对齐方式,start|end|center|justify box-lines:决定子元素是单行显示还是可以换行,single|multiple 子元素的属性有box-flex|box-flex-group|box-ordinal-group box-flex:子元素所占比例,取值为数字 box-flex-group:作用不详,浏览器不支持 box-ordinal-group:可以改变子元素的顺序 Tips: (1).在box-orient属性中,inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的,让子元素横排;而vertical与block