CSS笔记

最新推荐文章于 2024-07-09 18:09:59 发布

weixin_55045143

最新推荐文章于 2024-07-09 18:09:59 发布

阅读量118

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_55045143/article/details/123918109

版权

1 清除子元素的自动浮动，避免父元素没有高度

// html
.clearf>.container
// css
.container {
    max-width: 1080px;
    margin: 0 auto;
}
.container:before,
.container:after,
.clearf:before,
.clearf:after {
    content: "";
    display: block;
    clear: both;
}

2 用div实现col效果

// html
.col>.row
// css
.col-1,
.col-2 {
    position: relative;
    min-height: 1px;
    float: left;
}
.col-1{
    width: 10%:
}
.col-2{
    width: 20%:
}........

3、CSS 中的变量

:root {
--bg-color: #3a3a3a;
}

body {
background-color: var(--bg-color);
}

var()函数用于插入CSS变量的值。
:root是一个伪类，表示文档根元素，非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用
注意：变量名必须以两个破折号(-)开头，并且区分大小写！

javascript获取自定义属性

var rootElement = document.documentElement;

var styles = getComputedStyle(rootElement);

var mainColor = styles.getPropertyValue('--color-text');

console.log(String(mainColor).trim())

// javascript设置自定义属性

var rootElement = document.documentElement;

rootElement.style.setProperty('--color-text','#ccc');

4、类与伪类

一个冒号是伪类，两个冒号是伪元素

伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。
伪元素所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。

伪类有：:first-child ，:link，:vistited，:hover:，active:focus，:lang
伪元素有：:first-line，:first-letter，:before，:after （在苏沈小雨编的CSS2.0中文手册中把:first-line，:first-letter列为伪类应该是理解上的错误）

提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全

伪类和伪元素的区别：

伪类

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

:link

伪类将应用于未被访问过的链接，与:visited互斥。

:hover

伪类将应用于有鼠标指针悬停于其上的元素。

:active

伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。

:visited

伪类将应用于已经被访问过的链接，与:link互斥。

:focus

伪类将应用于拥有键盘输入焦点的元素。

:first-child

伪类将应用于元素在页面中第一次出现的时候。

:lang

伪类将应用于元素带有指定lang的情况。

伪元素

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

::first-letter

伪元素的样式将应用于元素文本的第一个字（母）。

::first-line

伪元素的样式将应用于元素文本的第一行。

::before

在元素内容的最前面添加新内容。

::after

在元素内容的最后面添加新内容。

5、垂直居中

一个行内元素（文字、图片等）水平垂直居中

// 父元素
 text-align: center;

// 让文字的行高 等于 盒子的高度，可以让单行文本垂直居中。比如：
.father{
    height: 20px;
    line-height: 20px;
}

一个块级元素水平垂直居中

(1)绝对定位 + translate（无需指定子元素的宽高，推荐）

 // html
<div class="father"> 
    <div class="son">这是子元素的内容</div> 
</div> 

 // css
 * {
            margin: 0;
            padding: 0;
        }
        .father{
            position: relative;
            min-height: 500px;
            background: pink;
        }
        .son {
            position: absolute;
            background: red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

(2)flex 布局 + margin: auto（推荐）

我们只需写两行声明即可：先给父容器设置 display: flex，再给指定的子元素设置我们再熟悉不过的 margin: auto，即可让这个指定的子元素在剩余空间里，水平垂直居中。大功告成。

* {
            margin: 0;
            padding: 0;
        }
        .father{
            display: flex;
            min-height: 100vh;
            background: pink;
        }
        .son {
            margin: auto;
            background: red;
        }

<div class="father">
        <div class="son">子元素的内容，想水平垂直居中</div>
        <div class="son2">这个元素不想水平垂直居中</div>
    </div>

字体(font-family)

字体参照表

overflow

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。