CSS笔记

最新推荐文章于 2022-03-11 10:55:40 发布

w_xue

最新推荐文章于 2022-03-11 10:55:40 发布

阅读量56

点赞数

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

本文链接：https://blog.csdn.net/w_xue/article/details/114094865

版权

4 篇文章 0 订阅

订阅专栏

本文参考MDN记录CSS常用知识点，CSS全称为Cascading Style Sheets，层叠样式表。

外部样式表引入方式如下

<!DOCTYPE html>
    <head>
        <link rel="stylesheet" href="styles.css"/>
    </head>
</html>

内部样式表引入方式如下

<!DOCTYPE html>
    <head>
        <style>
            h1 {
                color: red;
            }
        </style>
    </head>
</html>

内联样式如下

<html>
    <body>
        <p style="color: red; background-color: yellow">This is a paragraph.</p>
    </body>
</html>

选择器的优先级由4个部分相加，不允许进位

比如h1 + p::first-letter的优先级为0003
另外一个影响到优先级的就是!important，可以覆盖样式层叠规则，强制使用该样式

在闭合括号前添加i表示字符串匹配时忽略大小写，比如li[class*=“box” i]

伪类是选择器的一种，它用于选择处于特定状态的元素，而伪元素匹配额外添加的元素或者现有元素的一部分。

常见伪类和伪元素参考 MDN伪类和伪元素

用法	含义
body article	后代选择器，选择body下的所有article，不论层级
body > article	子代选择器，选择body下一级的article，更深层级的不匹配
p + img	邻接兄弟选择器，选择p后面相邻的img元素，中间有其它元素相隔则不匹配
p ~ img	通用兄弟选择器，选择p后面所有的img元素，即使中间有其它元素

所有的元素都被一个个的盒子包裹着，两种典型的盒子为块级盒子block box和内联盒子inline box。
block box和inline box主要区别为

block元素会换行，inline元素不会换行
block元素默认充满父元素所有宽度
width height属性在block元素有效，inline元素不生效
block元素的padding,margin,border会把其它元素推开，而inline元素的padding,margin,border会生效但是仅水平方向上会把其它inline元素推开

常见的div img这些为block元素，a span strong em这些都是inline元素。

css的box模型有一个外部显示类型，来决定盒子是块级还是内联。同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。
通过设置display为block或inline设置该元素的外部显示类型，通过设置display为flex或者grid设置该元素的内部显示类型

关注