margin和flex布局
问题:做地图点击查询按钮,折线图的宽度也逐渐变大。
貌似是margin的问题,好像是margin的宽度在变大,把地图和折线图的宽度挤压
仔细了解下margin
margin为外边距,用来控制元素周围空间的间隔,从视觉上达到相互隔开的目的。
padding为内边距
找到问题了,是我把折线图的宽度width:105%,为了让折线图的宽度大一点。但是这种方式显然不可取。
找到地图的样式
flex原来为2,改为1,达到想要的效果
2.
(1)了解flex。flex为flexible box,即弹性布局。用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为flex布局
.box{
display:flex
}
行内元素也可使用flex布局
.box{
display:inline-flex
}
webkit内核的浏览器,必须加上-wekit 前缀
.box{
display:-webkit-flex /Safari/
diaplay:flex
}
注意:设为flex布局后,子元素的float,clear和vertical-align属性会失效
(2)基本概念
使用flex布局的元素,称为flex容器(flex container)。它所有子元素成为容器的成员,称为flex项目(flex item)
容器默认存在两根轴:水平主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置叫做main start,结束位置叫做main end .交叉轴的开始位置叫做cross start ,结束位置 叫cross end.
项目默认按主轴排列。单个项目占据的主轴空间叫做main size.占据的交叉轴空间叫做cross size
(3)容器的属性
flex-direction flex-wrap flex-flow justify-content align-items align-content
(1)flex-derection 属性决定主轴的方向,即项目的排列方向
.box{
flex-direction:row|row-reverse|column|column-reverse
}
row:水平方向,起点在左端
row-reverse:水平方向,起点在右端
column:垂直方向,起点在上
column-reverse:垂直方向,起点在下
(2)flex-wrap属性
flex-wrap属性定义,如果一条轴线排列不下,如何换行。
.box{
flex-wrap:nowrap|wrap|wrap-reverse
}
nowrap:不换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
(3) flex-flow
flex-flow属性是flex-direction和属性flex-wrap属性的简写,默认值为row nowrap
.box{
flex-flow:<flex-direction>||<flex-wrap>
}
(4)justify-content
justify-content属性定义了项目在主轴的对齐方式
.box{
justify-content:flex-start|flex-end|center|space-between|space-around
}
flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
(5) align-items
属性定义项目在交叉轴上如何对齐
(6)align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
3.项目的属性
order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。-
.item { order: <integer>; }
flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小。flex
属性是flex-grow
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。后两个属性可选align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
Erwachen: 我也遇到了同样的问题,请问您解决了吗,可以分享一下吗?
Joy_Garfield: 我按住鼠标右键,再按wsda没用啊,这是为什么
普通网友: 大佬的文章写的太精辟了 让我深刻了解了这篇文章的精髓 谢谢大佬分享,希望继续创作优质博文。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】
星辰大海_enoch: 感谢,有一些效果,左边没问题,但是右边还是拽不回来,我再研究一下。
Tiomt: 可以修改父元素或者其他祖先元素的transform、perspective、filter 或 backdrop-filter 属性,只要值不为none,fixed定位就不再会相对于视口,而是相对于设置的那个元素