设置文本与图片的对其方式，元素的隐藏

最新推荐文章于 2017-08-03 10:47:36 发布
最新推荐文章于 2017-08-03 10:47:36 发布
阅读量326 收藏
点赞数
分类专栏： Html+CSS 文章标签： html css ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boxyuan/article/details/76336180
版权

overflow:溢出

取值：

  1. hidden 会将超出容器的部分隐藏起来 
  2. scroll:给容器加上滚动条
  3. auto:根据具体情况判断容器是否要加上滚动条

元素的隐藏

overflow:hidden  将超出部分裁剪掉
visibility:hidden可以及将元素隐藏，但是在页面上还保留着原来的位置
display:none可以将元素隐藏，并且在页面不占据位置
display:none与display:block是一对反义词








boxyuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现定时隐藏与显示图片的方法
10-23
今天我们就来探讨如何使用JavaScript实现图片的定时隐藏与显示功能。具体来说，这个功能可以使得网页上的图片在经过设定的时间后自动隐藏，同时又能在一定时间后再次显示。这样的操作对于实现动态效果非常有帮助，...
vue中使用带隐藏文本信息的图片、图片水印的方法
10-15
这个方法遍历图片的像素数据，根据之前设置的规则恢复隐藏的文本信息。 ```javascript methods: { decryptImg() { var data = this.originalData.data; for (var i = 0; i ; i++) { if (i % 4 == 0) { // .....
图片列表和小图文本列表切换js
01-23
在切换过程中，可能需要隐藏或显示特定的图片列表或文本列表元素，这可以通过`getElementById`, `getElementsByClassName`, 或 `querySelectorAll`等方法实现。 2. **CSS样式控制**：通过JS来修改元素的CSS属性，如...
jQuery使用hide方法隐藏页面上指定元素的方法
10-24
当`hide()`方法被执行时，被选中的元素将会被立即隐藏，其CSS属性display值会被设置为none，因此该元素不会显示在页面布局中，也不会占据任何空间。 下面，我们根据提供的内容部分来详细解读如何在页面上使用`hide...
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
10-16
在本文中，我们将探讨...总的来说，layui提供了一套简洁而强大的方式来实现富文本图片上传和普通按钮触发的文件上传功能。通过合理的前端和后端代码设计，我们可以轻松地集成这些功能，提升用户在网页上的交互体验。
让小盒子在大盒子中水平居中，固定定位
不因俊俏难为友，正为风流始读书
07-29 1974
* { margin: 0; padding: 0; } .big { width:600px; height: 300px; background-color: powderblue; margin: 0 auto; position: relative; } .small { w
a标签的几种用法
不因俊俏难为友，正为风流始读书
07-24 1968
1、跳转到同一目录的页面 例：同一目录下有1.html，2.html，在1.html里面利用a标签跳转到2.html，跳转到2.html 2、a标签可以不跳转 点我看看有没有反映 3、可以在当前页面定位 top即定位到p标签id为top,利用页面定位可以定位到页面的其他位置 4、在目标页面指定位置定位 跳转到指定页面的上部 -----------------------------
行高等于容器高度可以垂直居中
不因俊俏难为友，正为风流始读书
07-27 1874
行高： 应用：如果行高等于容器行高那么元素在父容器中垂直居中 问题：为什么行高等于容器的高度，元素在父容器中垂直居中？ 行高的定义：两行文本之间基线的距离叫行高 div{ display: inline-block; text-align: center;/*水平居中*/ background-color: plum; widows: 100px;
伪元素，使用伪元素来清除浮动
不因俊俏难为友，正为风流始读书
07-29 975
伪元素： 在页面上不存在的元素，但是可以通过css来添加上去 种类： :before:after 注意：每个元素都有自己的伪元素 使用伪元素来清除浮动： .clearfix:after { content:""; height: 0; line-height: 0; display: block; clear: both;
锚伪类的四种伪类
不因俊俏难为友，正为风流始读书
07-27 871
伪类： 与类选择器相似但是又有所不同 锚伪类： a:link { color: #2AABD2; font: "微软雅黑"; font-size: 50px; } 作用：给a标签设置没有访问过的样式 a:visited a:visited { color: palevioletred; font: "微软雅黑";
z-index，标签之间的嵌套规则，精灵图，整站练习(css初始化)
不因俊俏难为友，正为风流始读书
07-30 644
z-index定位： 作用：设置页面中元素的层级关系 取值：正整数 标签之间的嵌套规则： 行内元素只能包含行内元素 块级元素可以包含所有的行内元素和部分块内元素p标签h标签不能包含块级元素 精灵图： 将页面上较小的图放在一张大图上 制作精灵图： 精灵图必须是小的图片精灵图之间一定要留有足够的间隙精灵图的大小一定要大于所有的图片中最大 的那
透明度，margin为负数的应用，圣杯布局，倒三角
不因俊俏难为友，正为风流始读书
08-03 521
如果定位的盒子没有宽高，那么默认宽高为0如果给子盒子设置宽度为100%，那么这个子盒子的宽与父盒子一样宽透明度：opacity，取值0-1之间的小数 margin为负数的应用 如果margin-left设置为负数，那么将来这个盒子会像左方向移动 如果margin-right设置为负数，那么盒子向右移动 圣杯布局 左右两边内容保持不变，中间内容根据浏览器大小而改变 圣杯
文章列表，行高的单位，行高与font关系，margin特殊现象
不因俊俏难为友，正为风流始读书
07-28 490
/*清除标签默认的padding和margin*/ *{ padding: 0; margin: 0; } body { background-color: gainsboro; } .content{ width: 328px; height: 226px; border: 1px solid #00BFFF;
盒子模型
不因俊俏难为友，正为风流始读书
07-27 439
盒子模型： 概念：在写一个html页面的时候，其实就相当于在这个页面中叠盒子。 思想：万物皆盒子 具体内容： 盒子的挡板：border 盒子的泡沫：padding 盒子里的物品：content 盒子与盒子之间的距离：margin boder:盒子的挡板 div{ width: 200px; height: 200px; background-col
浮动
不因俊俏难为友，正为风流始读书
07-28 390
浮动： 解决一行中显示多个盒子的问题，并且这些盒子的位置可控 float:left float:right 标准流：浏览器默认摆放盒子的标准 浮动的特点： 浮动的元素会脱离标准流： 如果一个元素按照正常的标准来显示会在html中所属的位置占位，后面的元素会紧跟着他，但是浮动脱离了标准流，将来在看到浮动的元素之后，不能以正常的标准来进行判断 浮动以后的元素会覆盖标准流
html相关
不因俊俏难为友，正为风流始读书
07-24 271
声明位于html标签最前面，定义文档规范 现在都用H5规范标准： 标签里面用来存放 title,meta,base,style,script,link,head标签中必须设置的标签是title     ------------------------------------------------------------------- SEO：搜索引擎优化 ---
表格与表单
不因俊俏难为友，正为风流始读书
07-24 253
it大佬资料 id 姓名 班级 专业 1 马云 50 阿里 2 马化腾 48 腾讯 3 李彦宏 48 百度 4 雷军 48 小米
绝对路径与相对路径
不因俊俏难为友，正为风流始读书
07-24 190
绝对路径：文件带有盘符的路径 相对路径： html文件与图片在同一级路径下面: 如果html文件在图片的上一级目录: 图片在文件的上一级目录：../跳出当前目录回到上一级目录
CSS层显示/隐藏特效与元素操作实践
2. **none**：完全隐藏元素，不占据任何空间，与visibility属性的hidden不同，none隐藏不会保留元素的空间。 3. **inline**：元素按行内元素展示，不会换行，与其他元素在同一行。 学习重点包括了如何通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值