一.css选择器

1.1css有哪些常用选择器？

id选择器
类选择器
标签选择器

1.2这些选择器怎么来表示的？

id选择器

 
#demo {
    color: green;
}

类选择器

 .test {
            color: red;
        }

标签选择器

 div {
            color: pink !important;
      }

1.3选择器的权重

如果一个元素把以上三个选择器都用上了,那这个元素最后是都生效呢？还是只生效一个？还是都不生效？请跟着我的脚步一探究竟》.

              (注:这里只展示了部分代码,完整代码自行补充或联系我)
     div {
            color: pink;
        }

        .test {
            color: red;
        }

        #demo {
            color: green;
        }

    <div class="test" id="demo">你笑起来真好看</div>

运行结果：

结果显然是id选择器生效了,因为权重,一个id选择器权重为100,一个类选择器权重为10,一个标签选择器权重为1.
所以: id(100)>class(10)>标签(1)

二.元素的继承

2.1继承是什么？

一个元素某些属性会自动继承其父元素的计算值,除非显示指定一个值.

显示继承:一些元素属性不能从父元素继承，但是我想让它就继承父元素的属性，可以用inherit来实现显示继承. 例如:

 * {
         box-sizing: inherit;
        }
        html{
            box-sizing: border-box;
        }
        .some-widget{
            box-sizing: content-box;
        }

这里因为box-sizing是不能继承的一个属性，我可以使用通配符选择器写上 box-sizing: inherit;，让这个属性可以显示继承，然后使HTML里面的box-sizing的值为boder-box,那么html里的元素的box-sizing的值都为boder-box,写最后一个类选择器意思是，是如果你不想使用HTML里面box-sizing的属性的值，你可以自己写一个值。

2.2元素常用可继承和不可继承的属性

可继承的属性:

所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

不可继承的属性:

display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align。

2.3初始值

(可继承)从一个元素的父级一直往上找，如果找不到这个元素中CSS的值，我们可以使用初始值.
(不可继承)一个元素不可继承，我又没给他设置属性，我们可以使用初始值.
css中每个元素都有一个初始值,我们可以使用initial关键字显示重置为初始值. 例子: background:initial; 因为background初始值为transparent,所以background:initial;等于background:transparent;

2.4css求值过程

三.布局

3.1布局是什么？

确定内容的大小和位置的算法
依据元素，容器，兄弟节点和内容等信息来计算

3.2布局相关技术

3.3盒子模型

width

指定content box宽度
取值为长度，百分数，auto
auto由浏览器根据其他属性决定
百分数相对于容器的content box宽度

height

指定content box宽度
取值为长度，百分数，auto
auto由浏览器根据其他属性决定
百分数相对于容器的content box宽度
容器有指定的高度时，百分数才生效

padding

指定元素四个方向的内边距
百分数相对于容器宽度

boder

指定容器边框样式，粗细和颜色
三种属性

boder-width
boder-style
boder-color

四个方向

boder-top
boder-right
boder-bottom
boder-left

margin

指定元素四个方向的外边距
取值为长度，百分数，auto
百分数相对于容器宽度

使用margin:auto 水平居中

overflow

visible
hidden
scroll

案例:

overflow: visible;

overflow: hidden;

overflow: scroll;

四.布局元素

块级

Block level box
不和其他盒子并列摆放（一行只能放一个）
适用所有的盒模型属性

块级元素

生成块级盒子
body,div,section,h1-h6,article,p,ul,li等
diaplay:block

行级

Inline level box
和其他行级盒子一起放在一行或拆分成多行
盒子模型中的宽度高度不适用

行级元素

生成行级盒子
span,em,strong,cite,code等
diaplay:inline

diaplay属性

属性值	解释
block	块级盒子
inline	行级盒子
inline-block	本身是行级，可以放在行盒中，可以设置宽高，作为一个整体，不会被拆散成多行
none	排版时完全被忽略

常规流(normal flow)

根元素浮动和绝对定位的元素会脱离常规流
其他元素都在常规流之内
常规流中的盒子在某种排版上下文中参与布局

行级排版上下文

块级排版上下文

BFC内的排版规则

盒子从上到下摆放
垂直margin合并
Bfc内盒子的margin不会与外面的合并
Bfc不会和浮动元素重叠

flexbox

flex属性

grid布局

diaplay:grid

划分网格

grid网格线
1133

        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: 3;
        grid-column-end: 3;
        或者:
        grid-area:1/1/3/3;

浮动

图片环绕文字

定位

position属性

属性值	含义
static	默认值,非定位元素
relative	相对于自身位置偏移,不脱离文档流
absolute	绝对定位,相对于static祖先元素定位
fixed	相对于视口绝对定位

相对定位（position:relative）

在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top left bottom right设置位移长度
流内其他元素，当它没有偏移一样布局

绝对定位(position:absolute)

子绝父相

                 (注:这里只展示了部分代码,完整代码自行补充或联系我)
 div {
            width: 228px;
            height: 270px;
            background-color: pink;
            position: relative;
            top: 100px;
            right: -100px;
        }

        img {
            position: absolute;
            top: 5px;
            right: -10px;
        }
        
        
     <div>
        <em><img src="study/new.png" alt=""></em>
    </div>

结果:

五.学习css的几点建议

充分利用mdn和w3c css规范
保持好奇心善用浏览器的开发者工具
持续学习,CSS新特性还在不断出现

《深入理解CSS》学习笔记 | 青训营