标签: display

CSS的值inline和inline-block值之间究竟有什么区别display？

我正在使用iPython笔记本.当我这样做:

df

我得到一张带细胞的美丽桌子.但是,如果我这样做:

df1
df2 

它不会打印出第一张漂亮的桌子.如果我试试这个:

print df1
print df2

它以不同的格式打印出表格,使列溢出并使输出非常高.

有没有办法强制它打印出两个数据集的漂亮表格？

tibble(先前tbl_df)是由R中的dplyr数据帧操作包创建的数据帧的版本.它在意外调用数据帧时防止长表输出.

一旦数据帧被tibble/ 包装tbl_df,是否有一个命令来查看整个数据帧(数据帧的所有行和列)？

如果我使用df[1:100,],我将看到所有100行,但如果我使用df[1:101,],它将只显示前10行.我想轻松显示所有行以快速滚动它们.

是否有dplyr命令来抵消这种情况或解开数据帧的方式？

如果visibilityHTML元素样式的属性设置为hidden,是否仍可单击？

当display属性设置为时none,该元素甚至不是DOM树的一部分,因此这不是问题.但我想知道一个hidden元素是否仍然响应鼠标事件.

我有一个嵌入在 css-grid 中的组件。

在 stack blitz 中，我有一个 3 行的外部网格。其中一行具有最小宽度。如果视口小于最小宽度，如何让它水平滚动？

在中间行中，我有一个组件，它本身使用 2 列网格。列中的 div 有一个最小高度。

我正在寻找的是，如果视口的大小使整个内部组件（红色框）不可见，则红色框是可滚动的。

这是一个堆栈闪电战：

https://stackblitz.com/edit/angular-q4geyk

这是另一个例子：

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.content {
  display: grid;
  grid-template-rows: 2em 1fr 1px;
  grid-gap: 0.5rem;
  height: 20em;
}

.my-panel {
  border: 1 green solid;
  background-color: red;
  padding: 0.25rem;
}

.my-component {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
  padding: 0.25rem;
  height: 100%;
}

header {
  border: green solid 1px;
  padding: 4px;
}

main {
  border: …

由于fontHTML5中的标签在HTML5中被弃用(我明白为什么),是否有一个干净的解决方案,只将某些属性和样式应用于段落文本的某些部分？我正在使用JavaScript来解析XML文件,该文件依赖于font标记允许使用基于类的CSS格式化包装文本的部分.我意识到"锚"(a)标签也可用于此目的,但这种方式似乎非常倒退和不自然.

编辑

当我问这个问题时(几年前),我没有理解每个DOM元素属于一个display类别,两个主要类别是:

• block - 坚持自己的行
• inline- 符合其他inline元素或文字

HTML提供了两个通用容器元素,默认情况下每个元素都遵循其中一个显示值; div用于block显示,和span用于inline显示.

该span元素是指定文本的某些块,并给它一个独特的风格或ID,因为你可以将其套在一个更大的段落的部分不破坏所选择的内容到一个新行的完美方式.

最新的三星智能手机有一个有趣的功能称为全屏(或在营销术语无限显示).在这种模式下,应用程序还覆盖了主页/后退按钮所在的显示部分.通常的应用程序不会覆盖此区域,使其变黑.但三星的本土产品涵盖了这一领域.

问题:如何实现这种效果？我的意思是我应该使用什么样的清单声明或程序化调用(可能是三星的遗留API)？

我有以下要求.

绿色父母宽度将根据设备宽度而变化.我需要所有的盒子都在父母的中心.

我已经尝试了以下的东西,但它没有帮助我.

试验1
Parent {text-align:center} box {display:inline-block}.

这导致了以下输出

试用2
Parent {text-align:center} box{float:left}.

这导致了以下输出

试验3
Parent {display:flex} box -> justify-around & justify-between也没有奏效.

.parent {
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

任何有关这方面的帮助将不胜感激.

我正在使用JavaScript切换通知,如下所示.如何在display: block和之间添加转换display: none;

我不想添加像jQuery这样的外部库,因为我只会toggle单独使用该效果.

var btn = document.querySelector('button');

btn.addEventListener('click', function(){
  var hint = document.getElementById('hint');
  if(hint.style.display == 'none'){
    hint.style.display = 'block';
  }
  else{
    hint.style.display = 'none';
  }

});

div#hint{
  background: gold;
  color: orangered;
  padding: .5em;
  font-weight: bold;
}

<div id='hint'>
  
  <p>This is some hint on how to be safe in this community </p>
   <p>This is another hint on how to be safe in this community </p>
  </div>

<button> show hint </button>

我知道我可以使用jQuery来实现这一点,如下所示.

$(document).ready(function(){

$('button').click(function(){
$('#hint').toggle('slow');

}); …

我注意到人们在1:1的比较中涵盖了一些显示属性的细节,但是有很多未说明差异的内容.可能有人解释各种inline-之间的差异的东西显示标签？

对w3schools这样的地方进行更详细的定义会产生奇迹.