flex 影响后代元素

2024-11-01

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

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

当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style> .fixed { position: fixed; left:0

HTML&CSS基础-子元素和后代元素选择器

IE 中单元格的 colspan 属性在某些情况下会影响 TABLE 元素的自动布局

今天在写一个jsp页面时,遇到一个如下的问题:在一个table中写了如下内容,table中定义了4列,在firefox中能正常显示,而在ie8中,显示不正常, 如下如图1:第二,三,四列宽度发生变化,和代码中定义的宽度显示不一致, 图1(IE8): 图2(firefox): 代码如下: <table id="cont2"> <tbody> <tr> <td class="ct_t"> 是否分包<font styl

CSS 设置背景透明度，不影响子元素

由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素．解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 */ background: rgba(0, 0, 0, 0.6); } 2> 使用 opacity, 设置一个背景DIV,此DIV使用绝对布局 Example <div class="demo"> <div class="demo-bg"&g

jquery层级原则器（匹配后代元素div）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>层级 </title> <

布局时margin会影响父元素

布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login"> 12345 </div></div><style>.login-bg{ background-color:red; width: 400px; height: 400px; margin: 0 auto; background: url(imac.png) n

子元素margin-top为何会影响父元素？

子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28日 11:25:38 阅读数:6944 问题如下一段很简单的代码: css如下: <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; he

jQuery查找子元素与后代元素

1. 子元素: $().children('选择器') 如选择type为file的子元素 $(this).children("input[type=file]") 或者 $("#p >s") 2. 后代元素 $().children('选择器') 如选择type为file的所有后代元素 $(this).find("input[type=file]") 或者 $("#p s")

flex布局 justify-content：space-between; 解决最后一排数量不够自动向两端排列问题和flex布局的元素会有默认间隙（垂直间隙）

1 .flex 布局两端对齐当最后一排数量不够时,会出现以下布局情况实现效果: 解决方案:使用after伪类, 解决最后一排数量不够两端分布的情况.宽度就是每张图片的宽度 .list:after { content: ""; width: 1.87rem; } 2.flex布局的元素会有默认间隙(垂直间隙) 效果图: 解决方案:使用align-content:flex-start解决附上所有有关代码参考: .list { width: 100%; display: flex; ju

jQuery选择：子代元素与后代元素的区别

(1)后代元素:html代码如下,那么在jquery选择时,$(".test img"),中间为空格,则是选取后代元素,img对于ul来说是孙子辈元素,中间隔了li元素,所以后代元素是指ul标签内的孙子辈.曾孙辈及以上元素. (2)子元素:html代码如下,那么在jquery选择时,$(".test>li"),中间为>大于号,则是选取子元素,li对于ul来说是儿子辈元素,所以子元素是指ul标签内儿子辈的元素. <ul class='test'>

jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

<!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.11.3.js"&

flex盒子里面元素linehight对高度的影响

那天,高高兴兴的测试flex属性.大家都知道,当父盒子display:flex的时候,子盒子即使宽高和大于父盒子,也会由于flex的特性进行收缩:然而,在给父盒子加了flex-direction:column之后,居然出现了: 它们没收缩!!!!!! html: <div class="father"> <div class="box1">1</div> <div class="box2">2<

CSSmargin击穿问题（子元素margin-top会影响父元素）

最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑.唉,有些东西不用就忘. 一.问题描述 <div class="container"> <div class="children">子元素</div> </div> .container { background-color: rgb(226, 43, 89); } .children { background-colo

[CSS七分钟系列]都1902年了,还不知道用margin:auto给flex容器内元素分组?

最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨. 引子日常业务迭代过程中,flex已经是前端工程师解决常见布局的神兵利器.但是随着使用的深入,偶然会发觉flex对于简单的布局足够直接迅速,但是对于稍稍复杂一些的布局,就需要层层的包裹分组来解决.举个栗子,下图是我们常见的布局图: 如果flex容器之中仅仅只有三个元素,彼此分离,我们借助于justify-content就足够应付.但是如果其

Jquery学习笔记：利用find和children方法获取后代元素

在很多场景下,需要根据一个已知的jquery对象,去查找其满足条件的后代节点. 这时可以利用 find函数和children来处理. find和children函数都可有一个参数,常见的是一个字符串,其值就是选择器,含义同利用 $()函数来获取元素. 两者的区别是children函数只获取其满足条件的第一层子节点,而find函数则获取所有下级子节点. 下面我们举例说明: <div id="mydiv"> <p id="pid"></p&

jQuery照片伸缩效应，这不是一个简单的图像缩放，它不影响其它元素的布局

之前在网上看到这样的效果,但我没有收藏夹网址,后来被我不知道如何来实现这种效果. 如今,互联网已收集有关专门.真是功夫不负有心人,被我发现. 我也努力过自己尝试着写: 但仅仅是单纯的图片放大.并且还影响了图片周围的元素的布局(由于图片放大占领了更大的空间). 后来发现要灵活巧妙的运用overflow和position这两个属性,就能达到目的.事实上我认为CSS(CSS3)中的overflow和position(顺带的top,bottom,left,right)简直是做网页特效无解的组合,当然还是

子元素设定margin值会影响父元素

有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例如: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g

overflow:hidden 影响inline-block元素周围元素下移

前言: 最近在切页中,我想实现左边一个类似下拉选框,且不允许输入,右边有一段垂直居中的文字描述的效果.我对文字用的是p标签.其实可以用个i/b/em等其他行内标签,同时也具有一定语义,做为强调提示,(当时事实证明用行内标签问题一样存在).最后我的问题出现了.一个设置了overflow:hidden 的inline-block元素旁边的文字与边框的下边放佛是对齐的.因为vertical-align属性的默认值时baseline,同是文字又只有一行那么它们的baseline应该是对齐的啊!! 当修改

chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

1 <div class="container"> <div class="item"> <div class="item-inner"> <a> Botón </a> </div> </div> <div class="item"> <div class="item-inner"> <a>

margin-top影响父元素定位

写样式时无意中发现margin-top会影响到父元素的定位,下面是示例: HTML代码: <div class="demo"> <div class="inner"> 子元素 </div> </div> CSS代码: .demo{ width: 100%; height: 100%; background: #a4c1de; } .inner{ width: 200px; height: 200px; backgrou

flex 影响后代元素

热门专题