CSS属性

augenstern416

已于 2024-12-13 15:42:34 修改

阅读量946

点赞数 30

分类专栏： CSS 文章标签： css 前端

于 2024-12-12 18:50:19 首次发布

本文链接：https://blog.youkuaiyun.com/augenstern416/article/details/144430271

版权

CSS 专栏收录该内容

5 篇文章

订阅专栏

1.CSS定位方式

initial：设置该属性为浏览器默认值
inherit ：规定应该从父元素继承 position 属性的值。
static ：默认值。
- 没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative ：生成相对定位的元素，相对于其正常位置进行定位。
- 因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
- 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位。
- 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。fixed旧版本IE不支持
sticky
- 粘性定位，该定位基于用户滚动的位置。（特定阈值指的是 top, right, bottom 或 left 之一）

2.position的值relative和absolute是相对于谁进行定位的？

relative 的定位原点是相对正常位置；相对于文档流；“相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）
absolute 是定位原点是有定位属性的父元素左上角；如果没有这个父元素，则相对于body；

3.设置元素浮动后，该元素的display值是多少？

在CSS中，当一个元素被设置为浮动（即使用了float属性，并赋予了一个非none的值，如left、right），这个元素的display属性值会隐式地（或者说在内部处理时）被当作block来处理

浮动元素：浮动元素会脱离正常的文档流，向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。其他非浮动元素则会围绕浮动元素布局。

4.清除浮动的几种方法？

1.使用overflow属性

为浮动元素的父元素设置overflow: auto;或overflow: hidden;样式。

优缺点：无需添加额外元素，但是overflow: hidden;可能会隐藏掉超出的内容，导致信息丢失。

overflow: auto;可能会在某些情况下产生滚动条，影响用户体验。

2.使用伪元素clearfix

利用CSS伪元素（如::after）在浮动元素的父元素内部添加一个不可见的块级元素，并为其设置clear: both;样式。

优缺点：无需添加额外元素。老旧浏览器不支持，并且可能影响其他样式渲染

3.使用clear属性

在浮动元素后面添加一个空元素（如<div>、<br>或<hr>），并为其设置clear: both;样式。

优缺点：通俗易懂。影响代码结构，多的话会影响代码可读性。

4.直接为父元素设置高度

优缺点：手动计算并设置高度，不够灵活。当浮动元素的高度发生变化时，需要手动更新父元素的高度，增加了维护成本。

5.display:none和visibility:hidden的区别？

display:none将元素完全从页面中移除，不影响页面布局。
visibility:hidden将元素设置为不可见，但保留其占据的空间和样式

6.CSS3新特性？

新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）
圆角（border-radius:8px）
多列布局（multi-column layout）
阴影和反射（Shadow\Reflect）
文字特效（text-shadow、）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
增加了旋转,缩放,定位,倾斜,动画，多背景
transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg) Animation:

7.伪类和伪元素是什么，有什么用？

伪类

伪类用于描述元素的特定状态，比如鼠标悬停、被点击、被选中等。伪类以冒号（:）开头，例如:hover、:active、:checked等。伪类的主要作用是选择已有文档中的元素的特定状态，并为其应用相应的样式。以下是一些常见的伪类及其作用：

:hover：用于选择用户鼠标悬停在元素上时的状态。例如，可以为链接设置鼠标悬停时的样式，使其更加醒目。
:active：用于选择用户点击元素时的状态。通常用于创建点击效果，如按钮按下时的变化。
:focus：用于选择元素获得焦点时的状态，通常用于表单元素，如文本框或按钮，以突出显示当前激活的元素。
:first-child：选择父元素的第一个子元素。这可以用于为第一个子元素设置特殊的样式。
:nth-child(n)：选择父元素的第n个子元素。这允许你根据子元素在父元素中的位置来设置样式。
:not(selector)：选择不匹配给定选择器的元素。这允许你排除某些元素以应用样式。
:visited：选择已访问的链接元素，通常用于改变已访问链接的样式。

伪元素

伪元素用于创建一些元素的虚拟子元素，以便可以对其应用样式。伪元素以双冒号（::）开头（在CSS3及更高版本中，但CSS2及更早版本使用单冒号），例如::before、::after等。伪元素的主要作用是允许你在已选择的元素内部创建或修改内容，而无需在文档结构中添加额外的HTML元素。以下是一些常见的伪元素及其作用：