css中级高级学习

最新推荐文章于 2024-05-22 14:36:42 发布

看云清雾淡

最新推荐文章于 2024-05-22 14:36:42 发布

阅读量592

点赞数 1

分类专栏：前端文章标签： css css3 学习

本文链接：https://blog.csdn.net/qq_53366282/article/details/123609817

版权

本文详细介绍了CSS的中级和高级特性，包括隐藏属性、定位方法、布局溢出处理、组合器、伪类和伪元素，以及不透明度和透明度的控制。此外，还涵盖了CSS高级教程中的圆角、边框图像、渐变、阴影效果、文字溢出、书写模式、2D和3D转换、过渡属性和动画。内容详实，适合进阶学习者提升CSS技能。

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

CSS中级教程学习

隐藏属性

display 属性
display 属性规定是否/如何显示元素。
display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中：
visibility:hidden; 也可以隐藏元素。但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局

width、max-width 都设置margin: auto；
当缩小浏览器的时候width定义的矩形框不会缩小，
max-width定义的可以根据浏览器的变化而变化。

css的定位

position 属性：
规定应用于元素的定位方法的类型。
有五个不同的位置值：
static relative fixed absolute sticky
元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。
根据不同的 position 值，它们的工作方式也不同。
设置 position: static; 的元素不会以任何特殊方式定位；它是始终根据页面的正常流进行定位
设置 position: relative; 的元素相对于其正常位置进行定位
设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：
设置 position: absolute; 的元素会相对于最近的定位祖先进行定位（而不是相对于视口进行定位）
position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。
起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。
如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。

css布局-溢出

CSS Overflow

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow 属性可设置以下值：
visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条
注释：overflow 属性仅适用于具有指定高度的块元素。
注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 "overflow:scroll"）。
overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：
overflow-x 指定如何处理内容的左/右边缘。
overflow-y 指定如何处理内容的上/下边缘。
例如：
div {
overflow-x: hidden; /* 隐藏水平滚动栏 */
overflow-y: scroll; /* 添加垂直滚动栏 */
}

CSS 布局 - 浮动和清除

CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
float 属性
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：
left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值
最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。
clear 属性
clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
clear 属性可设置以下值之一：
none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值
使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。
在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。
您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。
box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。
使用 inline-block 来创建导航链接
display 的一种常见用法：inline-block 用于水平而不是垂直地显示列表项。

CSS 布局 - 水平和垂直对齐

居中对齐元素
要使块元素（例如 <div> ）水平居中，请使用 margin: auto;
如果仅需在元素内居中文本，请使用 text-align: center;
垂直对齐 - 使用 padding
有很多方法可以在 CSS 中垂直对齐元素。一个简单的解决方案是使用上下内边距
垂直对齐 - 使用 line-height
另一个技巧是使用其值等于 height 属性值的 line-height 属性