CSS笔记

最新推荐文章于 2023-08-18 15:26:22 发布

sleepyocean

最新推荐文章于 2023-08-18 15:26:22 发布

阅读量191

点赞数

分类专栏：笔记文章标签： CSS

本文链接：https://blog.csdn.net/stoneBridge1920/article/details/83511093

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS笔记

1. 知识点

outline（轮廓）属性不占宽度和高度，效果和bodrder类似，其位置是在border外围。
隐藏元素 - display:none或visibility:hidden:
- visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
- display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
块(block)和内联(inline)元素(ps: 通过display属性更改元素为块元素或是内联元素):
- 块元素是一个元素，占用了全部宽度，在前后都是换行符。例如<h1>、<p>、<div>
- 内联元素只需要必要的宽度，不强制换行。例如<span>、<a>
CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
1. display:block – 显示为块级元素
2. display:inline – 显示为内联元素
3. display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
单位em和rem的区别
- px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
- em和rem的区别：**em相对于父元素，rem相对于根元素。**rem中的r意思是root（根源）。
  - em
    - 子元素字体大小的em是相对于父元素字体大小
    - 元素的width/height/padding/margin用em的话是相对于该元素的font-size
  - rem
    
    rem是全部的长度都相对于根元素，根元素是谁？元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

2. 选择器

分组选择器
1. 具有相同样式的元素使用,分隔
```
h1,h2,p
{
    color:green;
}
```
嵌套选择器
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class=“marked” 的元素指定一个样式。
- .marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
组合选择器
- 后代选择器(以空格分隔–’ ')
- 子元素选择器(以大于号分隔–’>’）
- 相邻兄弟选择器（以加号分隔–’+’）
- 普通兄弟选择器（以破折号分隔–’~’）
伪类：例如:visited
伪元素：例如:first-letter
属性选择器

3. position定位

static 定位：HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。
fix 定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
relative 定位：相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。
absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
sticky 定位：它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
重叠元素：元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。一个元素可以有正数或负数的堆叠顺序.具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

sleepyocean

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记

CSS笔记1. 知识点outline（轮廓）属性不占宽度和高度，效果和bodrder类似，其位置是在border外围。隐藏元素 - display:none或visibility:hidden:visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。display:none可以隐藏某个元素，...
复制链接

扫一扫

专栏目录