CSS 宽度不受子元素影响但高度受子元素影响

2024-11-09

CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？

如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的内容自动适应的. 亦或者在子元素的最后一个清楚浮动.

CSS样式学习-3、轮廓、伪类/元素、display-flex布局

一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thick粗轮廓.inherit规定从父级继承.length可以规定大小px outline-style轮廓样式,属性:none无(默认值).dotted点状.dashed虚线.solid实线.double双线.groove凹槽3D.ridge凸槽3D.inset凹边3D.outset凸边3D(3D效果取决

关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案

以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-border父元素中的子元素添加margin-top时,发现没有直接表现出来,而是作用到父元素身上,就会导致子元素的margin-top溢出. 条件: 1.父元素没有上边框 2.为第一个子元素设置上外边距时解决方案: 1.为父元素增加上边框弊端:父元素会变高 2.通过为父元素设置上内边距来取代子元

CSS宽度高度的百分比取值基于谁

width=num% , height=num% 基于以下几点 1. 若元素不存在定位: 则基于直接父元素的宽高度 2. 若元素存在定位且定位为 relative, 则也基于直接父元素的宽高度 3. 若元素存在定位且定位为 absolute, 则基于最近的相对定位(relative)的祖先元素的宽高度 4. 若元素存在定位且定位为 fixed, 则始终基于body元素的宽高度结束.

CSS 两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行解决办法

我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .container{ wi

css如何让父元素下的所有子元素高度相同

小颖最近做的项目中要实现一个样式 ,小颖怕自己忘记了,写个随笔记下来需求父元素下有多个子元素,并且子元素过多时要实现自动换行,给每个子元素都加了右边框,而每个子元素里的内容多少不一定,这就会产生右边框的高度不一致,长的长短的短,为了解决这个问题,那就必须让父元素下的子元素都是等高的,并且高度决定于最高的那个子元素的高度. 其实就只需要给父元素加如下样式就好了: display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; 先来看下效果吧: 代码:小颖

css，对包含有子元素的元素进行flex后，会影响原有的布局。如何后续处理

对包含有子元素的元素进行flex后,会影响原有的布局. 例如设置两个div,第一个div包含一个img(图片),第二个div包含多个p元素(对前面的img的说明).如下图 1:当对着两个两个div进行flex布局后.虽然两个div会同时处在一行内.但第二个div内部多个p元素的排序会被打乱,因为p元素的父元素div被应用了display:flex:后,已经改变了其主轴方向,所有的p元素都会横向排列,而不是原来的纵向排列 2:为了让两个div再同一行内,同时第二个div内部的多个p元素仍按照原有的

css实现不定高度的元素垂直居中问题

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } .cc{ display: table; width:300px; height:300px; margin:30px auto; text-align:cen

行内元素有哪些?块级元素有哪些?CSS的盒模型?转载

块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的display属性(行内元素和块级元素) 我们常用的display属性值有: inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留. 我们最关心的还是display:inl

CSS: inline-block的应用和float块高度塌陷

普通流高度塌陷: 当块float浮动时,不会对块布局产生影响,块仍然会按照左右或者上下的顺序排列.但是会影响文档的排列,当文档的高度超过块的高度时,块的高度会产生塌陷现象. 高度塌陷解决方法: 闭合浮动: 1.在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”> 2.<br clear="all" />原理类似上面 3.父元素设置 overflow:hidden; 在IE6中需要出发hasLayout,例如zoom:1.缺

CSS定位:几种类型的position定位的元素

当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们. 一旦你更深入地了解了它是怎么运作的,你就能够做出一些更棒的事情来. CSS盒模型和定位的类型为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文

css实现盒尺寸重置、均匀分布的子元素、截断文本

盒尺寸重置重置盒子模型,以便width s和height s并没有受到border 还是padding他们的影响 . CSS文字折断 css实现盒尺寸重置.均匀分布的子元素.截断文本如何对多行文本进行截断? 实现文字的省略号 css实现单行.多行文本超出显示省略号纯 CSS 实现多行文字截断代码实现: html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } 效果如下: 说明 box-

Css中的两个重要概念：块状元素和内联元素

一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用.常见块状元素为div和p. 块元素(block element) address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是CSS layout的主要标签 dl - 定义列表 fieldset -

css盒模型和块级、行内元素深入理解

盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下一.CSS盒模型盒模型概述盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成.如下图所示: 内边距出现在内容区域的周围.如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域.因此可以用内边距在内容周围创建一

css菜鸟学习之text-align属性，行内元素，块级元素居中详解

一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文本有效,对元素无效,不能设置元素的对齐方式: 3.表格元素td是属于inline-block,可以使用text-align设置td中的文本对齐方式: 二.水平居中和垂直居中 1.水平居中 (1) 文本.图片等行内元素的水平居中给父元素设置text-align:center可以实现文本.图片等行内元

如何让 height:100%; 起作用---父级元素必须设定高度

参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/10600662.html https://www.cnblogs.com/kunmomo/p/10601289.html https://www.cnblogs.com/trccc9/p/9830820.html 解决方法:给父元素加绝对定位,然后子元素加相对定位,这样子元素的高度就会根据父元素的高度进行计算[

HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）

元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. why 子元素浮动会导致父元素高度塌陷? 这是因为内部的元素设置float:left || right后,就丢失了

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

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

CSS - 块状元素、内联元素和内联块状元素

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素(block).内联元素(又叫行内元素,inline)和内联块状元素(inline-block). 1. 常用的块状元素有: <div>.<p>.<h1>...<h6>. <ol>.<ul>.<dl>.<table>. <address>.<blockquote> .<form> 2. 常用的内联元素有: &l

18 12 27 css 盒模型使用以及相关技巧问题元素溢出块元素、内联元素、内联块元素

盒子模型的实际尺寸盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右盒子高度 = height + padding上下 + border上下 margin相关技巧 1.设置元素水平居中: margin:x auto;2.margin负值让元素位移及边框合并外边距合并外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合

css样式表和选择器的优先级以及position元素属性值的区别

css样式表优先级问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省设置: 2.外部样式表(使用<link>引用的) 3.内部样式表(位于<head>标签内部) 4.内联样式表(在HTML元素内部) css选择器优先级无论是对于外部样式表,内部样式表,或内联样式表css选择器的优先级都按照: id选择器>class选择器>HTML元素选择

CSS 宽度不受子元素影响 但高度受子元素影响

热门专题

CSS 宽度不受子元素影响但高度受子元素影响