div标签 | 易学教程

多个div排列在同一行而不换行

阅读更多关于多个div排列在同一行而不换行

有时候，我们可能会产生多个div标签横向排列而不换行的需求，具体有以下几种实现方法： 1. 同级div设置display:inline-block，父级div强制不换行例如： <html> <head></head> <body> <div id="container"> <div class="lable">测试测试</div> <div class="lable">测试测试</div> <div class="lable">测试测试</div> <div class="lable">测试测试</div> <div class="lable">测试测试</div> <div> </body> <style> #container { width:400px; height: 200px; background-color: red; overflow: auto; white-space: nowrap; } .lable { width: 100px; background-color: blue; display: inline-block; } </style> </html> 2. 通过position绝对定位实现例如: <html> <head></head> <body> <div id="container"> <div id="lable1">测试测试<

HTML <div> 和<span>

阅读更多关于 HTML 和

HTML 可以通过 <div> 和 <span>将元素组合起来。 HTML 区块元素大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。实例: <h1>, <p>, <ul>, <table> HTML 内联元素内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img> HTML <div> 元素 HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。 HTML <span> 元素 HTML <span> 元素是内联元素，可用作文本的容器 <span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。 HTML 分组标签标签描述 <div> 定义了文档的区域，块级 (block-level) <span> 用来组合文档中的行内元素，内联元素(inline)

DIV标签里面IMG图片下方留有空白怎么办

阅读更多关于 DIV标签里面IMG图片下方留有空白怎么办

我们很多个人博客网站都会广告位投放一些图片广告，在网页设计中，图片是不可缺少的素材，但是在 div 标签里面放入 img 图片的话，有时候会在图片的下方出现一行空间的区域，如果单纯的图片不醒目或是图片所在的位置不重要的话，我们可以不去理会，但是做为一个完美型的页且不太会前端的我来说，出现这个问题是忍无可忍的，由于广告位平时背景色是白色，所以从未关注过图片广告下方有空白。刚才试着改变广告位背景色为红色后才发现广告位内的 img 图片下方有空白，具体见下图：经过检查广告位的 CSS 代码没有发现什么问题，至于 DIV 标签内的 img 图片下方有空白的原因，倒是没有深入学习，好像大概是说图片 display 属性默认是 inline，vertical-align 属性默认是 baseline 的原因所以才会有空白。在 HTML5 与 CSS3 中，DIV 标签中的图片也就是 IMG 标签的默认 vertical-align 属性为 baseline，而这个 baseline 在 css2 的文档中有这么一句解释，翻译过来也就是一个 inline-block 元素，如果里面没有 inline 元素，或者 overflow 不是 visible，则该元素的基线就是其 margin 底边缘，否则，其基线就是元素里面最后一行内联元素的基线。其实原因什么不重要，重要的是解决办法。想要去除

fieldset是个什么?它和div有什么区别?

阅读更多关于 fieldset是个什么?它和div有什么区别?

fieldset 元素可将表单内的相关元素分组。 <fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。<fieldset> 标签没有必需的或唯一的属性。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。 <div> 可定义文档中的分区或节（division/section）。 <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。用法 <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。来源： https://www.cnblogs.com/kimij1602/p/11770801.html

关于js中获取div中的数据

阅读更多关于关于js中获取div中的数据

原文地址为：关于js中获取div中的数据关于从中学到的知识：上面的标签在这几钟基于两种浏览器的内核的浏览器，这几种方法是不兼容的。下面是解决方案兼容火狐ie的js 获取div的内容 else var text = document.getElementById(“text”).textContent; 用来获取浏览器的名称，第一句话的意思就是当获取到的浏览器的名称中带有Explorer。涉及到indexof用法 indexOf 方法返回一个整数值，指出 String 对象内子字符串的开始位置。如果没有找到子字符串，则返回 -1。转载请注明本文地址：关于js中获取div中的数据文章来源: 关于js中获取div中的数据

可编辑div的一些方法总结（一）复制文字去除标签和样式

阅读更多关于可编辑div的一些方法总结（一）复制文字去除标签和样式

// 去除复制样式的方法 function textInit(e) { e.preventDefault(); // 阻止默认事件 var text; var clp = (e.originalEvent || e).clipboardData; if (clp === undefined || clp === null ) { text = window .clipboardData.getData( "text" ) || "" ; if (text !== "" ) { if ( window .getSelection) { var newNode = document .createElement( "span" ); newNode.innerHTML = text; window .getSelection().getRangeAt( 0 ).insertNode(newNode); } else { document .selection.createRange().pasteHTML(text); } } } else { text = clp.getData( 'text/plain' ) || "" ; if (text !== "" ) { document .execCommand( 'insertText' , false , text); } } }

hmtl div水平、垂直居中

阅读更多关于 hmtl div水平、垂直居中

最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。水平居中直接加上<center>标签即可，或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中（水平居中+垂直居中）的方法放上示范的html代码： <body> <div class="main"> <h1>MAIN</h1> </div> </body> 方法一： div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。 .main{ text-align: center; /*让div内部文字居中*/ background-color: #fff; border-radius: 20px; width: 300px; height: 350px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } --------------------- 作者：qq_32623363 来源：CSDN 原文：https://blog.csdn.net/qq_32623363/article/details/77101971 版权声明：本文为博主原创文章，转载请附上博文链接！

解决 chrome 浏览器对 div 的 display : none 不支持

阅读更多关于解决 chrome 浏览器对 div 的 display : none 不支持

试了很久，发现在style设置display：none的时候，IE是可以的，但是chrome不行 <div style="display:none"> 测试测试 </div> 在chrome下，“测试测试”这几个字还是占位置的，即时display：none不起效，最后将代码改成下面这样才可以。 <div style="display:none"> <span style="display:none"> 测试测试 </span> </div> 个人认为，chrome浏览器下，只要div还有内容，display：none就不起效，所以要将div下的标签也置为display：none，这样div就没有东西了，display：none才有效，纯属个人观点，不是官方的，有错的话请高人指教一下。来源： CSDN 作者： keyler 链接： https://blog.csdn.net/keyler/article/details/17285723

在p标签里面不能嵌套ul、div等块级元素

阅读更多关于在p标签里面不能嵌套ul、div等块级元素

在p标签里面不能嵌套ul、div等块级元素显示结果为：在ul元素的前后都加上了兄弟元素p 不可自由嵌套的元素就是里面只能放内联元素的有：标题标记的<h1~6>、<caption>；段落标记的<p>；分隔线<hr> 一个特别的元素 (它只存在于列表元素的子一级)。 <ul>、<ol>、<dl>、<table>，它们的子一层必须是指定元素， <ul>、<ol>的子一级必须是<li>； <dl>的子一级必须是<dt>或者<dd>； <table>的子一级必须是<caption> 或<thead>、<tfoot>、<tbody>等，而再子一级必须是<tr> 注： <tr>只存在于<thead>、<tfoot>、<tbody>中，之后才是可放内容的<td>或者<th> 居中的一种方式来源： https://www.cnblogs.com/panghu123/p/11677350.html

肆拾叁--Jquery

阅读更多关于肆拾叁--Jquery

Jquery 一、Jquery简介 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。能使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 特点：一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件

订阅 div标签