1.display 属性
display 属性用于设置一个元素应如何显示。
display: none；隐藏对象
display：block；除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置。
后面应用及其广泛，搭配JS 可以做很多的网页特效。
2. visibility 可见性
visibility属性用于指定一个元素应可见还是隐藏。
visibility：visible 元素可视
visibility：hidden元素隐藏
visibility 隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置，就用visibility：hidden
如果隐藏元素不想要原来位置，就用display：none (用处更多重点）
3.overflow 溢出
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
visible:不隐藏内容也不添加滚动条
hidden:不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll:不管是否超出内容，总是显示滚动条
auto:超出自动显示滚动条，不超出不显示滚动条
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。
打开CSDN，阅读体验更佳
CSS元素的显示与隐藏 ：display 属性， visibility 属性， overflow 溢出
元素的显示与隐藏 类似网站的广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。 本质：让一个元素在页面中隐藏或者显示出来。 display 显示隐藏 visibility 显示隐藏 overflow 溢出显示隐藏 display 属性 display 属性用于设置一个元素应如何显示。 display:none 隐藏对象 display:block ；除了转换为块级元素之外，同时还有显示元素的意思。 display 隐藏元素后，不再占有原来的位置。 后面应用及其广泛，搭配JS可以做很多的
继续访问
css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏
css元素的显示与隐藏display显示隐藏元素visibility显示隐藏元素overflow溢出显示隐藏 display显示隐藏元素 display 设置或检索对象是否及如何显示。 display: none 隐藏对象 display：block 除了转换为块级元素之外，同时还有显示元素的意思。 特点： display 隐藏元素后，不再占有原来的位置。 visibility显示隐藏元素 visibility 属性用于指定一个元素应可见还是隐藏。 visibility：visible 元素可视
继续访问
最新发布 css overflow溢出显示隐藏
将 overflow: hidden改为overflow: scroll将overflow: scroll改为 overflow: scroll有定位的盒子慎用overflow: hidden/* 超出的时候显示滚动条，不超出不显示 */将默认改为 overflow: hidden运行结果：溢出的部分显示滚动条 不溢出也显示。默认是：overflow: visible运行结果：超出的时候显示滚动条，不超出不显示。溢出的部分显示滚动条 不溢出也显示*/运行结果：隐藏了溢出的部分。
继续访问
overflow实现信息的显示和隐藏
我没想到,居然真的是这么做的.那天就是随便尝试了下,今天闲下来看了下淘宝网生成的页面代码,果然也是类似的作法.嘎嘎~ 利用overflow实现显示全部信息和隐藏部分信息． 不过偶写的很粗糙,还没利用overflowX,overflowY这两个样式． <ul id="cata_list" style="overflow:hidden"><% int len=listC...
继续访问
safari filter: drop-shadow 设置的变色图像无法显示问题
safari filter: drop-shadow 不显示
继续访问
CSS 如何实现文字溢出隐藏时，隐藏左边或者右边，并显示省略号
CSS 如何实现文字溢出隐藏时，隐藏左边或者右边，并显示省略号 指定一个定宽高的盒子，当文字溢出，会换行显示出来。 .box { width: 60pxheight: 30pxbackground-color: #ff000020} 当限制文字不换行后，会在一行超出显示出来。 .box { width: 168pxheight: 30pxbackground-color: #ff000020white-space: nowrap} 添加溢出隐藏，则会自动隐藏
继续访问
元素的显示与隐藏
元素的显示与隐藏
继续访问
用CSS实现元素的显示与隐藏（简单介绍display，visibility和overflow）
用CSS实现元素的显示与隐藏前言一级目录二级目录三级目录一级目录二级目录三级目录一级目录二级目录三级目录 前言 将元素的显示和隐藏，他们的主要目的是让一个元素在页面中消失，但是不并非是将该元素删除，虽然在界面中是看不见它的，但实际上它还存在与文档源代码里面。俗称消失了，但也没完全消失。 一级目录 二级目录 三级目录 一级目录 二级目录 三级目录 一级目录 二级目录 三级目录 ...
继续访问
CSS 深入理解：overflow: hidden——隐藏溢出、清除浮动、解除坍塌
overflow:hidden 的主要功能有三个： 隐藏溢出 清除浮动 解除坍塌 举例理解 初始html内容： <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Co
继续访问
css vissibility显示隐藏元素
隐藏元素后，继续占有原来的位置。隐藏元素后，继续占有原来的位置。隐藏元素后，不占有不占有原先的位置。visibility属性用于指定一个元素应该可见还是隐藏。把visibility: hidden
继续访问
元素的显示visibility/display
visibility visibility 属性虽然会隐藏元素，但会保留元素在页面中所占的空间。 值 描述 visible 默认值，表示元素是可见的 hidden 隐藏元素 collapse 主要用来隐藏表格的行和列，隐藏的行或列所占的空间可以被其他表格内容使用；如果在其他元素上使用，其效果等同于“hidden” inherit 从父元素继承 visibility 属性的值 display 通过 display 属性可以设置元素是否显示以及如何显示。
继续访问
display的用法
display这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的,要了解display之前，来了解一些块级元素和内联元素。 1、块级元素 ①总是在新行上开始(块元素独占一行)...
继续访问
CSS的display、visibility、overflow：hidden属性关于显示与隐藏的占位问题
CSS的display、visibility、overflow：hidden属性关于显示与隐藏的占位问题
继续访问
css overflow: hidden——隐藏溢出、清除浮动、解决坍塌问题
overflow:hidden 的主要功能有三个 隐藏溢出 清除浮动 解除坍塌 举例理解 1.初始html内容： <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-C
继续访问
display none 隐藏后怎么显示_display:none与visibility：hidden的区别？
“因为平时总是觉得自己不停的修改bug，好记性不如烂笔头，所以把自己每天遇到问题记录下来。”要想知道两者的区别，就要知道他们代表的是什么意思，其实两者都是对内容进行隐藏的的声明；两者都会在页面中消失，都不可被选中，但display：none是不会占用时间尺寸的，而visibility：hidden在页面这是会占用尺寸的。可以实现对内容进行隐藏的CSS声明：1、display：none ...
继续访问
关于visibility和display的区别
文章摘自：http://blog.csdn.net/cicada_slough/article/details/43305131 display:（可能的值）none 此元素不会被显示。block 此元素将显示为块级元素，此元素前后会带有换行符。inline 默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block 行内块元素。（CSS2.1 新增的值）list-ite...
继续访问
html 溢出的部分自动隐藏,css overflow溢出隐藏(文字溢出时的自动隐藏处理)
overflow 属性说明:版本：CSS2 兼容性：IE4+ NS6+ 继承性：无语法：overflow : visible | auto | hidden | scroll相关参数说明如下：visible:：不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。auto：此为body对象和textrea的默认值。在需...
继续访问
关于前端隐藏元素的问题
1.visibility(不会自适应) 可选值: visible 默认值。元素是可见的。 hidden 元素是不可见的。 collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 inherit 规定应该从父元素继承 visibility 属性的值。 2.hidden(会...
继续访问
CSS显示和隐藏元素「display」「visibility」
CSS显示和隐藏元素「display」「visibility」
1.d性盒子
display属性，设置元素的类型，属性值包括：none(不显示)，inline(行内元素)，block(块级元素)，inline-block(行内块元素)
设置display: flex，该盒子就成为了d性盒子，一旦给一个盒子设置为了d性盒子，它里面的子元素默认就会横向排列
flex-direction属性 设置子元素的排列方向，属性值包括：row(横向) column(纵向) row-reverse(横向反向) column-reverse(纵向方向)
2.子元素的对齐方式
主轴的排列方式，通过justify-content属性控制
属性值包括：flex-start(开始处对齐) flex-end(结束处对齐) center(居中对齐) space-between(平均分布，开始和结束处顶格)，space-around(平均分布，两边留有一半的间隔空间) space-evenly(平均分布，每个元素两端的间隔相等)
辅轴的排列方式，通过align-items属性控制
属性值包括： flex-start(开始处对齐) flex-end(结束处对齐) center(居中对齐) baseline(首行文本的基线对齐) stretch(拉伸对齐)
注意：主轴不一定是横向，排列方向如果是横向，主轴是横向；排列方向如果是纵向，主轴就是纵向
3.子元素的换行方式
flex-wrap属性，设置d性盒子内，子元素的换行方式
属性值包括： nowrap(不换行) wrap(换行) wrap-reverse(反向换行)
align-content属性，设置子元素换行后，每行元素在辅轴上的对齐方式
注意：一旦设置了align-content，align-items属性就失效了
align-content的属性值包括：flex-start(开始处对齐) flex-end(结束处对齐) center(居中对齐) space-between(平均分布，开始和结束处顶格)，space-around(平均分布，两边留有一半的间隔空间) space-evenly(平均分布，每个元素两端的间隔相等)
总结：不换行，辅轴上的对齐方式用align-items，换行后，辅轴上的对齐方式用 align-content
4.子元素order属性
order属性，用于设置子元素的排列顺序，默认值是1，值越小越靠前，值越大越靠后
5.子元素margin属性
子元素通过margin属性，可以抢占父级的剩余空间作为自己的外边距
6.子元素align-self属性
align-items属性设置所有d性子元素在辅轴上的对齐方式
align-self属性，用于设置d性子元素自身在 辅轴 方向上的对齐方式
属性值包括：flex-start，flex-end，center，baseline，stretch
7.子元素flex属性
flex属性用于指定d性子元素如何分配空间
.b为flex:5，.c为flex: 1 表示剩余的空间，b占5份，c占1份
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）