<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> 讯享网
讯享网
单行省略
当单行文本溢出省略号需要同时设置以下声明：
- 容器宽度：width: 200px;
- 强制文本在一行内显示：white-space: nowrap;
- 溢出内容为隐藏：overflow: hidden;
- 溢出文本显示省略号：text-overflow: ellipsis;
讯享网
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
行内元素也可以使用Flex布局。
讯享网
Webkit内核的浏览器，必须加上-webkit前缀。
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
讯享网
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器的属性
flex-direction属性
讯享网
flex-wrap属性
justify-content属性
讯享网
align-items属性
讯享网
讯享网
讯享网
display
- 我们不能为行内元素设置width、height、 margin-top和margin-bottom。
- 我们可以通过修改display来修改元素的性质。
- 可选值：
– block：设置元素为块元素
– inline：设置元素为行内元素
– inline-block：设置元素为行内块元素
– none：隐藏元素（元素将在页面中完全消失）
visibility
- visibility属性主要用于元素是否可见。
- 和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。
- 可选值：
– visible：可见的
– hidden：隐藏的
讯享网
讯享网
它创建从中心点向外辐射的色彩过渡效果。这种背景效果模拟了从一个颜色到另一个或多个颜色的平滑过渡，给人一种向外扩散的感觉。在 CSS 中，径向渐变通常通过 radial-gradient() 函数定义，需要指定渐变的起点（通常是圆心坐标），以及一系列的颜色 stops（停止点），表示颜色的变化路径
重复渐变（repeat gradient）是一种CSS背景填充方式，它将基础渐变图案按照一定的模式重复多次覆盖整个元素区域。与普通的渐变不同，重复渐变不会像径向渐变那样自然地从中心向外延伸，而是按指定的规则横纵两个方向重复。
CSS中使用linear-gradient()函数来定义线性渐变，并配合repeat-x, repeat-y, no-repeat, 或 repeat 属性来指定重复模式。
讯享网
讯享网
讯享网
讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/152496.html