设置成行内元素可以解决高度塌陷吗

2024-11-02

CSS3 学习笔记（中）

七.文档流文档流(normal flow)--网页的基础(最底下的一层),我们所创建的元素默认都是在文档流中进行排列. 对于元素有两个状态:在文档流或脱离文档流. 元素在文档流的特点: 块元素:会在页面中独占一行(自上向下垂直排列),默认宽度为父元素的全部(撑满),默认高度被(子元素)内容撑开. 行内元素:行内元素不会占页面的一行,只占自身的大小.它在页面中从左向右水平排列,若一行无法容纳下所有的行内元素,则元素会换到第二行继续自左向右排列.行内元素的默认宽度和高度都是被内容撑开. 创建外

浮动和包含框的关系，伪元素after解决高度塌陷

浮动会使元素尽量向左或向右移动,直到碰到包含框或另外一个浮动元素的盒子模型的边缘包含框并不会改变里面浮动元素的宽高,浮动元素宽高不会限制在包含块以内 <!DOCTYPE html> <html> <head> <style type="text/css"> * { margin:0; padding:0; } .container { width:110px; height:100px; border:1px solid blue; }

CSS设置行内元素和块级元素的水平居中、垂直居中

CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ PS:当然,如果既要水平居中又要垂直居中,那么综合一下 div{text-align:center; height:30px; line-height:30px} CSS设置块级元素的水平居中 div p{margin:0 auto; widt

加overflow-hidden就可以解决高度塌陷问题，overflow-触发BFC

1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式,就会为这个块级元素生成一个独立的块圾上下文,就像在window全局作用域内,声明了一个function就会生成一个独立的作用域一样,新开僻的BFC像是开僻了一个新的小宇宙,使这个块圾元素内部的排版完全独立隔绝.2.独立的块级上下文可以包裹浮动流,全部浮动子元素也不会引起容器

padding-top：100%解决高度塌陷问题

<div class="img_box"> <img src="http://sms-shop.oss-cnbeijing.aliyuncs.com/${item.bannerpic.split(',')[0]}"/> </div> .img_box { position: relative; width: 90%; padding-bottom: 100%; } .img_box img { position: absolute

overflow:解决 div的高度塌陷问题

高度塌陷是如何引起的? 解析: 当一个 div中所有的子 div都进行了浮动后,那么会出现该问题,那么解决方就是在父 div中设置其 overflow:hidden;即可解决高度塌陷问题. 方式二:在父 div结束标签前添加一个子的 div,给该 div设置一个 id,然后通过样式清除浮动.代码如下: #littlediv{clear:left;} //左侧不允许浮动或者是 #littlediv{clear:both;} //清除左右两侧浮动元素

如何解决浮动元素高度塌陷---CSS

解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:both; height:0; overflow:hidden; 缺点:在结构里增加了空标签,不利于代码可读性,且降低了浏览器性能: 方法三. 万能清除浮动法: 选择符: .clear:after{ content: ' ', clear: both; display:block; height:0; v

浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

浮动引发的高度塌陷问题高度塌陷问题的产生 BFC(Block Formatting Context)的引入元素开启BFC后的特点开启BFC的元素不会被其他浮动元素所覆盖开启BFC的元素不会发生父子元素外边距重叠开启BFC后可以包含浮动的子元素如何开启BFC 设置元素浮动将元素display属性设置为inline-block.table等 overflow属性设置为非visible值开启定位高度塌陷解决方法1: 父元素高度写死高度塌陷解决方法2: 为父元素也设置浮动高度塌陷解

float浮动造成高度塌陷的解决办法

Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素都浮动了的话,父元素就“瘪”了. 就像下面这样 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">

css float父元素高度塌陷

css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题以下几个方法可以解决float 父元素高度消失/塌陷的问题 .clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;} .clearfix {*zoom:1} 更好的方法是 .clearfix:after{content:'';dis

x(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷

<div class="box1"> <tabl></table> <div class="box2"></div> </div> 原理1: <table> 将会隔离父子元素, 所以解决垂直外边距重叠问题方法1: .clearfix:before{ content:""; display:table; } 原理2: 解决高度塌陷方法2: .clearfix:af

html高度塌陷问题解决

高度塌陷的问题: 当开启元素的BFC以后,元素将会有如下的特性 1 父元素的垂直外边距不会和子元素重叠开启BFC的元素不会被浮动元素所覆盖开启BFC的元素可以包含浮动的子元素如何开启元素的BFC 设置元素浮动设置元素绝对定位设置元素为inline-block float:left; (不好) 虽然可以撑开父元素会导致父元素宽度丢失了而且使用这种方式导致下边的元素上移. display:inlink-block; 布局好了,但是宽度又没有了.但是会导致宽度丢

关于float高度塌陷问题

和所有刚入门的菜鸟一样,我发现float有高度塌陷问题,又很偶然的发现float元素后加<img/>能消除float带来的破坏性. 后来百度了一下,大部分的float高度塌陷问题都没有提及img带来的影响. 解决高度塌陷问题方法: 1.在最后一个元素后加入<div style="clear:both"> 2.father-div设置高度 3.父元素加上after伪元素: 其中第三种方法的效果是最好的,和<img/>差不多,不过好像还是after比

CSS行内元素和块级元素的居中

一.水平居中行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使在其之中的块级元素叶居中,但是这种方式不符合语义化标签的规范; 2.将块级元素转换行内元素(通过设置display:inline)后再居中.这种方式使居中元素变成行内元素而致使无法设置宽高; 3.设置父元素float:lef

CSS高度塌陷问题解决方案

高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ /*为box1设置一个边框*/ border: 10px red solid; } .box2{ width: 100px; height: 100px

前端-CSS-7-标准文档流&行内元素和块级元素转换

1.什么是标准文档流  2.行内元素和块级元素转换 HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素. 常用的块状元素: <div> <p> <h1&

浅谈BFC与高度塌陷

这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Context(块级格式化上下文) 简称BFC. BFC有什么用?如何开启BFC?开启BFC后会发生什么? 在这里我们先看看几个小情境.并且抛出几个另外的问题 (1) <div class="div1"> <div class="div2">div2&l

整理高度塌陷与BFC

当面试官问道你高度塌陷时,人们第一想到的方法一定是 .clearfix::after { content: ''; display: block; clear: both; visibility: hidden; height: 0; } 对,没错,这是一个完美的解决方案,但是我们有考虑过这个方案的实现原理吗,或者面试管继续问你这个方法的原理是什么?是不是一脸懵,不懵的也别杠,接下来我通过排他法来展示他的原理 1. 首先 ::after 是元素的伪元素,在元素后面生成伪元素 2.content

高度塌陷与BFC

高度塌陷的产生条件子元素浮动,脱离文档流子元素绝对定位或固定定位,脱离文档流定位产生的高度塌陷只能通过加固定高度或更换其他方案解决塌陷,本文主要讨论浮动产生塌陷的解决方法. 高度塌陷的解决方法 1.直接给父元素加高度 div{ border: 5px solid black; height: 200px; } p{ width: 200px; height: 200px; background-color: aqua; float: left; } 优点:代码简单,容易理解缺点:自适应性

3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P h1--h6 ul li ol li div hr table 2.行内元素(内联元素) A:常见的=行内元素有 a span img input B:行内元素的特点 B.1 大小受到文字区域影响,不受width height 影响 B.2 行内元素不会单独占满一行 3. 行内元素和块级元素相互转换 A: 行内元素转换成块级元素

html中的行内元素和块级元素小结

一.首先我们总结下行内元素和块级元素有哪些: 行内元素: <a>标签可定义锚<abbr>表示一个缩写形式<acronym>定义只取首字母缩写<b>字体加粗<bdo>可覆盖默认的文本方向<big>大号字体加粗<br>换行<cite>引用进行定义<code>定义计算机代码文本<dfn>定义一个定义项目<em>定义为强调的内容<i>斜体文本效果<img>向网

设置成行内元素可以解决高度塌陷吗

热门专题