分类：CSS - MeowrainのBlog|木更老婆！！！

CSS-position位置-绝对定位和相对定位

笔记 CSS

CSS-position位置-绝对定位和相对定位position: relative 相对定位当元素的定位设置为relative时，它允许你通过CSS指定该元素在当前文档流页面下的相对偏移量。CSS中，控制各个方向偏移量的属性是left,right,top和bottom它们代表从原来位置向远离该方向

CSS-相对单位长度与绝对单位长度

笔记 CSS

CSS-相对单位长度与绝对单位长度相对单位长度相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。比如 em 的大小基于元素字体的字体大小。如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。em效果展示：绝对单位：参考文章: 【

Grid布局-CSS

笔记 CSS

Grid布局基本概念容器—有容器属性项目—有项目属性容器属性grid-template-columns: ;grid-template-rows: ;grid-row-gap: ;grid-column-gap: ;grid-gap: ; //上面两种的简写grid-template-areas:

css::before ,::after伪元素

笔记 CSS

其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。/* Add a heart before links */a::before { content: "♥";}我觉得不用再说啥了。直接上图和代码就行了p::b

Less-嵌套

笔记 CSS

先把html结构放上来<body> <div class="box"> <p>asdfasf</p> </div></body>对于类名为box的盒子来说，我们想要更改下面的p标签的

Less-变量

笔记 CSS

less变量变量是指没有固定的值，可以改变的，因为我们css中的一些颜色和数值经常使用@变量名:值;less变量命名规范必须有@为前缀不能包含特殊字符不能以数字开头大小写敏感,例如@Color和@color是两个不一样的变量//定义一个粉色的变量@color: pink;body { back

css-常见网页布局

笔记 CSS

常见网页布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>

css:float 案例

笔记 CSS

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>

css-浮动属性

笔记 CSS

floatfloat属性用于创建浮动框，直到左边缘或者右边缘以及包含块或者另一个浮动框的边缘不加float属性的时候效果如下加float属性（左浮动）的时候效果如下加float属性（右浮动）的时候效果如下加float属性（左右浮动）的时候效果如下浮动特性-脱标浮动的元素会脱离标准流浮动的元素会一行内

css伪类-:target

笔记 CSS

:target:target CSS伪类代表一个唯一的页面元素，其id与当前Url片段相匹配例如，以下 URL 拥有一个片段 (以#标识的) ，该片段指向一个 ID 为 section2 的页面元素：http://www.example.com/index.html#section2若当前 URL