CSS精要点笔记

你在卷吗

已于 2022-11-07 22:50:42 修改

阅读量149

点赞数

文章标签： css html 前端

于 2022-10-31 22:56:32 首次发布

本文链接：https://blog.csdn.net/weixin_49526860/article/details/127625135

版权

CSS学习精要笔记

一、选择器优先级

1.1 选择器

1、全局选择器

html{
    background: skyblue;
}

2、tag选择器

p{
    color:pink;
}

3、class选择器

<p class="paragraph">text</p>
.paragraph{
    font:...;
    height-line:...;
}

4、id选择器
注：建议在使用id时唯一地表示某个标记元素，这样更能发挥id的作用

<p id="marked">text</p>
#marked{
    font:...;
    height-line:...;
}

5、分组(拼团)

<p class="p1">text</p>
<p class="p2">text</p>
<p class="p3">text</p>
.p1{
    font:...;
    height-line:...;
}

.p2{
    font:...;
    height-line:...;
}

.p3{
    font:...;
    height-line:...;
}

.p1 , .p2 , .p3{
    font:...;
    height-line:...;    
}

6、合并(要加上某个属性不要再写个大括号了)

p{att1:text1}
p{att2:text2}

===> p{
    text1;
    text2;
}

注：如果反复的更改同一个选择器的的同一个属性，渲染以最后一次更改为主

p{
    font: value1;
    color: value2;
}

p{
    color: value3
}

===> 
p{
    /* font can been inheried */
    font: value1;  
    /* use the last alter */
    color: values; 

}

1.2 优先度算法

tag , class , id 所指定的范围越来越小
class 在tag的基础上分类
id 在一类class中标识某一个元素
故可以理解优先级 tag < class < id
而
(1)连接符 > (如 html > body)不增加优先度
(2)通用选择符： (*) 也不增加优先度
实际上：优先级总共有四位，0-0-0-0

1、选择符中每个id加0-1-0-0  

2、class属性或者属性选择(如[attr=3])或伪类加0-0-1-0

3、每个tag和伪元素加0-0-0-1

二、边距和长度

2.1 元素种类

块级盒子(Block box)和内联盒子(Inline box)
在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和内联盒子 (inline box)
这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为：

一个被定义成块级的(block)盒子会表现出以下行为: [比较硬]

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
每个盒子都会换行
width 和 height 属性可以发挥作用
内边距(padding), 外边距(margin)和边框(border)会将其他元素从当前盒子周围“推开”
除非特殊指定，诸如标题 (h1等) 和段落 § 默认情况下都是块级的盒子

如果一个盒子对外显示为 inline，那么他的行为如下: [比较软]

盒子不会产生换行
width 和 height 属性将不起作用
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开

2.2 弄清边距

在这里插入图片描述

1、content: 平时用的width或者height都是要展现的内容的实际长度
2、padding：在内容(content)与盒子之间默认还有一些距离，这就是内边距
3、border: 这平时都会用，边框加宽
4、margin: 盒子与其他盒子边框之间的距离，也就是这个盒子主观上要把别的盒子推出的距离
margin 在指出四个参数时，是按照时钟顺时针的顺序来生效的，也就是上右下左
且margin 在指明两个数则会表示折叠(上下外边距，左右外边距)
注意: 边框不会影响到外边距,这是浏览器的图

在这里插入图片描述

2.3长度的概念——值和单位

在这里插入图片描述

强调一点，当设置宽高时，百分数是按父元素宽高度来计算的，当以百分数设置内外边距时也是按照父元素的宽高度来算的
margin(top/bottom)对应父元素height ,margin(left/right)对应父元素width，padding同理，若无父元素就以视图区域(浏览器视图)来算

计算值方法： calc()
使用方法举例：

p{
    /* 表示段落的宽度设置为父标签宽度的90%少3em*/
    width: calc(90% - 3em)

}

三、字体[otf文件用法]

@font-face: 可以让你在网页开发中使用自定义的字体
通过url指定字体文件的地址，让用户代理去加载，所以.otf文件
也是一种静态资源

四、定位[position]

position属性用于指定一个元素在页面中的定位方式,有以下几种定位属性:

4.1 relative:

相对定位此定位模式下对table-*-group, table-row, table-column，
table-cell, table-caption 这些元素无效,在relative定位方式下，元素会以默认定位(即不设置定位模式和top等参数)
为参照物，按照设定的top等参数进行偏移,虽然偏移但是之前它的位置浏览器依然会保存为空白的一块区域不准其他元素抢占

4.2 absolute:

绝对定位,这种定位模式下，元素会以最近的非static定位父级元素(注意是父级元素)为参照物，按照指定参数定位
如果没有父级元素，就以屏幕视口(viewport)(就是浏览器视图界面)为参照物,但是元素会被移除常规文档流，不会为元素保留位置，
也就是说元素会浮在页面上方但当多个元素都以absolute定位方式时，会一层一层地浮在上面，父子元素子元素在父元素之上，兄弟元素
后定义在先定义之上，绝对定位可以设定边距，且不会和其他元素的边距重合

4.3 fixed:

元素会被移出正常文档流，不为元素预留空间，而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置
元素的位置在屏幕滚动时不会改变,fixed 属性会创建新的层叠上下文,当元素祖先的 transform, perspective 或 filter 任一
属性非 none 时，容器由视口改为该祖先，fixed 和 absolute混一起时(就是多个元素有的用fixed有的用absolute)浮动的规则与absolute相同
若不指定fixed的定位，则会按照static应该存在的位置定住不动(尽管它已经浮起来了)