HTML--高度塌陷(css)几种小技巧

解决办法

1.在高度塌陷的父div里面加一个div:

<div id="a">

<div id="a1">

</div> <div id="a2">

</div>

<div style="clear: both;"></div>//加一个标签,清除浮动

</div>

优点:适合初学者,兼容性 强。 
缺点:代码不简练,不利于优化。

2.overflow + zoom方法

#a{ background: red;

/*第二种方法*/

overflow: hidden;

zoom:1; }

优点:兼容性强。 
缺点:对margin属性会有影响,不能设负值,会被裁掉。负值绝对定位也不可以。

3.after + zoom方法(绝杀)

#a{ background: red; zoom:1; }

#a:after{ display: block;

content: ‘.‘;

clear:both;

line-height: 0;

visibility: hidden; }

优点:通用,兼容性强 
缺点:不好记。

原文地址:https://www.cnblogs.com/sueing/p/9517869.html

时间: 2024-11-16 03:20:00

HTML--高度塌陷(css)几种小技巧的相关文章

平时遇见CSS的一些小技巧

清除浮动的三种方法 1.使用clear 样式清除 样例: .clear-float {clear:both;} clear 属性是 CSS 1 就提供的用来清除浮动的样式,设置了 clear 属性的元素,其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染,忽略其 margin-top 设置.这样,父容器高度未设定(值是 auto)时,由于定义的清理浮动样式元素所在位置处于浮动元素之下,容器计算后的实际高度就包含了浮动元素. 2.使用伪元素:after 清除 样例:.after

高度塌陷的四种解决办法

<!doctype html> <html> <head> <meta charset="utf-8"> <title>高度塌陷问题</title> <style type="text/css"> body,div,p,ul,ol,li,dl,dt,dd,form,table,tr,td,hr,h1,h2,h3,h4,h5,h6,fieldset,img,input{ margin:

解决高度塌陷-CSS

1:给高度塌陷的元素设置overflow:hidden; 原理:因为overflow:hidden;触发了一个BFC BFC布局规则:计算BFC高度的时候,里面的浮动元素也参与计算. 弊端:定位在当前元素外面的内容会被隐藏. 2:给出现高度塌陷的元素里面,放在浮动元素的后面,添加一个空div,并且给div{clear:both;} 原理:clear:both;忽略上面的浮动元素预留出的空间 弊端:形成不必要的空标签,代码冗余 3:万能清除法: 选择符(高度塌陷的元素):after{ conten

CSS进阶之CSS的一些小技巧

如何设置水平居中? 分两种情况 行内元素与块级元素 1.行内元素(如图片 文字)    div.textcenter{    text-align:center;    }    <div class="textcenter">hello joe!</div> 2.块级元素 块级元素的水平居中又分为两种 定宽块状元素 和 非定宽块状元素 定宽块状元素(即块状元素的width值是定值): 可以通过块级元素的左右margin为auto来实现中 如下    div{

从零开始学习html(十五)css样式设置小技巧——下

六.垂直居中-父元素高度确定的单行文本 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>垂直居中</title> 6 <style> 7 8 .wrap h2{ 9 margin:0; 10 height:100px; 11 12 background:#ccc; 13 } 14 </style> 1

HTML+CSS笔记 CSS中级 一些小技巧

水平居中 行内元素的水平居中 在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 语法: <body> <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示.</div> </body> <style> div.txtCenter{ text-ali

css样式设置小技巧

元素分为行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素. 水平居中内容如下~ 一.行内元素:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 二.定宽块状元素:满足定宽和块状两个条件的元素是可以通过设置"左右margin"值为"auto"来实现居中的. margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

从零开始学习html(十五)css样式设置小技巧——上

一.水平居中设置-行内元素 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>定宽块状元素水平居中</title> 6 <style> 7 div{ 8 border:1px solid red; 9 margin:20px; 10 } 11 .txtCenter{ 12 text-align:center; 13

css知识笔记(五)——css样式设置小技巧

水平居中设置-行内元素 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.如下代码: html代码: <body> <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示.</div> </body> css代码: <style> div.txtCenter{ text-align:center; } </style>