CSS overflow 内容溢出时的显示方式

CSS

css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。当元素框中的内容溢出时,无非就是两种情况: 溢出部分隐藏、溢出部分通过滚动条查看。最常见用法是: overflow: hidden; (溢出隐藏) overflow: auto; (内容溢出时显示滚动条)

辰风沐阳 阅读 196 2022-08-16

CSS 中的变量

CSS

在 CSS 中,有很多需要反复使用的属性值,如果每个使用的地方都直接写死这个值,而没有使用变量去定义这个值的话,后期修改起来会很麻烦。有很多人忽略了在 CSS 中也可以定义变量这个事情,相信你会爱上它 !

辰风沐阳 阅读 196 2022-08-06

CSS 选择器详细分类

CSS

CSS 选择器有很多类型: 通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子代选择器、交集选择器、兄弟选择器、属性选择器、伪类选择器。使用合适的选择器可以更好匹配元素,CSS 样式代码更加优雅

辰风沐阳 阅读 197 2022-08-06

CSS font-family 属性设置字体

CSS

font-family 属性用于给元素指定字体,该属性的值是一个字体系列,每个值使用逗号隔开,如果字体名名称包含空格,那么字体名称必须使用引号包裹,设置的字体是否可用取决于用户机器上该字体是否可用

辰风沐阳 阅读 180 2022-07-28

玩转 CSS Flexbox 弹性布局

CSS

本文记录 CSS 弹性布局中常用的属性及其属性值。创建 flex 块级容器: display: flex; 创建 flex 行内容器 display: inline-flex。定义主轴方向: flex-direction: row; 水平方向为主轴(默认值) flex-direction: column; 垂直方向为主轴

辰风沐阳 阅读 235 2022-07-24

CSS 控制内容显示行数

CSS

显示一行内容,超出部分使用省略号表示(只有块元素才会生效)overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 显示两行或三行,超出部分用省略号显示,需要使用 -webkit-box-orient: vertical;

辰风沐阳 阅读 166 2022-07-07

flex 弹性布局常用属性

CSS

flex 是 Flexible Box 的缩写, 意为弹性布局,又称为弹性盒布局、伸缩盒布局。用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局。通过给父元素添加 flex 属性,来控制子盒子的位置和排列方式

辰风沐阳 阅读 371 2022-01-11

CSS 边框属性总结

CSS

CSS边框属性:1. 基本属性(border)边框宽度、边框样式、边框颜色 2. 边框倒角(border-radius)3. 边框阴影(box-shadow)4. 轮廓属性(outline)

辰风沐阳 阅读 777 2020-09-10

父元素透明度不影响子元素透明度解决方案

HTML CSS

父元素设置opacity:0.5,子元素会受到父元素opacity的影响,也会有0.5的透明度。即使设置子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基础上设置的,因此子元素的opacity还是0.5。

辰风沐阳 阅读 903 2020-06-26