CSS - CSS案例和额外属性补充

最新推荐文章于 2023-09-11 18:17:19 发布

蚂蚁二娘

最新推荐文章于 2023-09-11 18:17:19 发布

阅读量570

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/web2022050901/article/details/124929159

版权

本文详细介绍了CSS中的一些关键属性，包括writing-mode用于控制文本排列方式，pointer-events防止点击事件触发，object-fit调整元素内容适应容器，以及如何处理移动设备的安全区域问题，确保内容在iPhone屏幕中正确显示。此外，还提供了一些CSS应用示例。

摘要由CSDN通过智能技术生成

writing-mode定义了文本水平或垂直排布以及在块级元素中文本的行进方向

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  padding: 10px;
  margin: 100px auto;
  writing-mode: vertical-lr;
}

该属性可以用来阻止当前元素上的点击事件

值	说明
auto	默认值，由浏览器来判断能否点击
none	禁止点击事件的发送

pointer-events是一个可继承属性，如果父元素设置了禁止点击，其所有子元素都会被禁止点击

我们可以在子元素上显示设置pointer-events: auto;来恢复点击事件

并且在子元素被点击的时候，因为事件冒泡，所以子元素和父元素的点击事件都会被依次触发

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度

object-fit用于替换元素上，功能类似于background-size

object-fit 一般用于 img 和 video 标签，可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等

值	说明
fill	`默认值`，填充容器，不保持初始比例
contain	保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白
`对于video标签，会将o`

关注