页面<div>位置调整

调整页面<div>样式。

给<div>、<select>分别起名字:div2,s1

<div>代码:

<div class="div2" style="height: 100px;  width: 150px;">
          		<label class="">+</label>
				<select id="catagory" name="catagory" class="s1" >
					<option value="1" <c:if test="${obj.catagory eq 1}" >selected="selected"</c:if>> 含目录分类</option>
					<option value="2" <c:if test="${obj.catagory eq 2}" >selected="selected"</c:if>> 不含目录分类</option>
				</select>
          	</div>

样式调整格式:

.div2{
		position:relative;
		left: 401px;
		top: -118px;
	}

.s1{
		width: 120px;
	}

TIPS:页面调整div技巧,F12,在页面选中需要调整的功能,例如:“确定”按钮,在页面的控制台可看到调整的标志“div4”,在控制台左侧,找到“div4”,双击,按住上下箭头,对数字加减,调整<div> 位置,直到合适为止

 

### HTML 空 `div` 标签的用途及影响 #### 一、定义与基本概念 `<div>` 标签在 HTML 中作为一个通用容器,用于将文档中的内容分组并划分区域[^3]。此标签本身并不携带任何固有的视觉样式或语义意义;其主要作用在于提供一种机制以便于通过 CSS 进行样式的应用或是借助 JavaScript 实现交互逻辑。 #### 二、空 `<div>` 的常见应用场景 即使内部没有任何子元素(即为空),`<div>` 仍然可以在页面布局设计中发挥重要作用: - **占位符**:有时为了保持页面结构的一致性和完整性,在某些情况下可能需要预留一定的空间给未来可能会填充的内容。此时就可以利用空的 `<div>` 来作为占位符。 - **辅助定位与其他组件的关系调整**:当涉及到复杂的网页布局时,开发者经常使用浮动(float)、绝对/相对位置(positioning)等技术手段来精确控制各个部分的位置关系。这时即使是空白状态下的 `<div>` 也可以帮助创建必要的间距或者边界条件,从而更好地管理其他可视化的HTML 组件之间的相互作用。 ```css /* 使用CSS为一个空DIV设定高度宽度 */ .empty-div { width: 100px; height: 50px; background-color: lightgray; } ``` ```html <div class="empty-div"></div> ``` - **清除浮动(clearfix)**:在一个包含多个浮动物体(parent container with floated children elements)的情况下,如果不采取措施的话,父级容器的高度将会塌陷无法包裹住所有的子项。因此通常会在最后面加入一个清除了之前所有方向上的浮动属性的空 `<div>` ,以此确保整个区块能够正常显示出来而不至于因为高度丢失而导致错乱的现象发生。 ```html <!-- 清除浮动 --> <style> .clearfix::after { content: ""; display: table; clear: both; } </style> <div class="clearfix"> <!-- 浮动元素 --> <div style="float:left;">左侧栏</div> <div style="float:right;">右侧栏</div> <!-- 自动清理浮动的影响 --> </div> ``` #### 三、潜在负面影响 然而值得注意的是,过度依赖空 `<div>` 可能会给项目带来一些不必要的复杂度甚至是性能开销: - 如果过多地引入没有实际内容支撑却仅用来做装饰性处理或者是简单地维持布局效果的空 `<div>` ,这不仅增加了 DOM 结构的层次深度使得维护成本上升,而且对于搜索引擎优化(SEO)也不利——毕竟机器抓取程序更倾向于关注那些真正含有有价值信息的部分而非纯粹形式主义的东西; - 此外,浏览器渲染引擎每次遇到新的 HTML 元素都需要消耗一定资源去解析和绘制它们,所以大量冗余的空 `<div>` 同样会对加载速度造成不利影响。 综上所述,虽然适当运用空 `<div>` 是合理有效的做法之一,但在具体实践中应当权衡好必要性和合理性,避免滥用而引发上述提到的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值