1.当position设置为:absolute或者fixed时,元素的display会转换为block。(设置float也会产生这样的效应)
2.正常情况下,div会被内容撑开,但是如果设置了1.的情况下,父元素就会产生塌陷,失去高度。
给父元素设置高度。
给父元素设置overflow: hidden;
对于那种长单词,会超出元素的实际宽形象的近义词度。
word-break:break-all;
overflow: hidden;
p{ width: 200px; overflow: hidden; white-space: nowrap; /*不换行*/ text-overflow: ellipsis; /*溢出部分点样式*/}
p{ width: 200px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /*行数*/ -webkit-box-orient: vertical;}
当设置了display: flex;后,那么子元素的float、clear和vertical-align属性失效。
flex布局,分为容器和项目两个部分。一般而言,容器就是父元素,项目就是该父元素下的子元素。
(1)flex-direction: row(默认)| row-rever | column | column-revers中粮集团待遇e
决定主轴方向,也就是定义容器元素是行方向排列还是列方向排列,
并且定义它的起点方向,例如行方向是从左向右还是从右向左。
反之,列方向是从上到下还是相反呢。(row是行,column是列。)
(2)flex-wrap: nowrap(默认) | wrap | wrap-rever
决定是否都拍在一行(列)里,也就是是否换行。
以行为例有三种情况,不换行、换行(第一行在上方),换行(第一行在下方)
(3)flex-flow: row nowrap(默认)
这是flex-direction属性和flex-wrap属性的简写形式,
第一个参数定义排列方式,第二个参数定义是否简单窗花剪纸图案换行。
(4)justify-content: flex-start | flex-end | center | space-between | space-around
调整主轴方向上项目的对齐方式。
以行向排列为例,可以设置为靠左对齐,靠右对齐,水平居中对齐。
还有两个特殊的:
space-between(两端对齐,相当于文本对齐【text-align】里的justify);
space-around(元素两侧间隔相等,且比它与边框的间隔大一倍)
(5)align-items: flex-start | flex-end | center | initial(从父元素继承)
调整交叉轴方向上的项目对齐方式。
如果行方向是主轴方向,那么列方向就是交叉轴方向。
以行方向为例,可以设置垂直在上,垂直在下,垂直居中。
两个特殊的:
baline(项目元素第一行文字的基线对齐);
stretch是默认的(如果项目元素没有设置高度,那么它就会自动拉伸高度至整个容器高度)
/d/file/titlepic/10698237.html
本文发布于:2023-04-03 18:20:57,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/bd7c46ca5e6c71b6f2a4a56a263e617c.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:CSS中的一些细节.doc
本文 PDF 下载地址:CSS中的一些细节.pdf
留言与评论(共有 0 条评论) |