某前端课笔记 之css(简略） 侵删

仅作个人纪录 可能有错误的内容 欢迎指证

 

其实我不会前端 乱投的简历湖里糊涂就面试了 要死 

css由

选择器selector 选择器property 属性值组成 

在页面中使用css有外链 link rel 嵌入<style> 和内联三种方式

选择器 selector 

找出元素 设置样式

1.统配选择器

2.标签选择器

3.id选择器

4.类选择器

5.属性选择器

优先级 id选择器 类选择器 标签选择器 子选择器 后代选择器 伪类选择器

！important优先级最高 作者重要样式 < 用户重要样式

出现冲突时比较四位数

选择器selector的特异度

分四个位

0 style属性（行内内联样式）的权重为1000如 <h1 style="">

1 # id 属性的权重为100 如#navbar

2 . (伪）类 的权重为10 如.classes ，[attributes]和伪类如：hover ,focus

3 E 标签 元素名称或者伪元素的权重为1 如h1 div :before

优先级相同时 采用就近原则 选择最后出现的样式

继承的来的样式优先级低 

伪类 不基与标签和属性定位元素 几种伪类 状态伪类 结构性伪类

组合 

直接组合 AB 满足A同时满足B input:focus

后代组合 A空格B 选中B 如果它是A的子孙 nav a

亲子组合 A >B 选中B 如果它是A 的子元素 section > P

兄弟选择器 A~B 选中B 如果它在A的后面而且与A同级 h2 ~p

相邻选择器 A + B 选中B 选中B 如果它紧跟在A后面 h2 + p

选择器组

颜色HSL

H色相

S饱和度

L亮度

fornt-family 字体及其使用建议

在字体列表最后写上通用字体族

英文字体放在中文字体前面

识别时 假如前面一个字体有就用前面的字体 否则看后面字体

通用字体族

text-decoration

空格 white-space

选择器property

继承 某些属性会自动继承其父元素的属性值 除非显式指定一个值

显式继承如box-sizing: inherit

初始值

css中每个属性都有初始值

可以用initial关键字显示重置位初始值

css取值过程（就为了这个我才做笔记的）

 layout布局

确定内容的大小的位置的算法

相关技术

1.常规流

行级 块级 表格布局 flexbox grid布局 

根元素 浮动和绝对定位的元素会脱离常规流

其他元素都在常规流之内

常规流的盒子 咋i某种排版上下文中参与布局 如行级 块级等

2.浮动

3.绝对定位

width 长度 百分数 auto 百分数相对于容器contentbox宽度

height 容器有指定高度时 百分数才生效

margin 百分数相对于容器宽度

margin:auto水平居中

margin:上下边框自动合并

overflow

块级 

block level box 不和其他盒子盒子并列排放 适用于所有的盒模型属性

生成块级盒子 body article div main section h1-6 p ul li等

display:block

block formatting context

某些容器会创建一个bfc

根元素     浮动·绝对定位·inline-block     flex子项和grid子项     overflow不是visible的块盒   display:flow-root     

bfc的排版规则

        盒子从上到下摆放

        垂直margin合并

        bfc内的盒子的margin不会和外面的合并

        bfc不会和浮动元素重叠

行级

inline level box 和其他行级盒子一起放在一行或拆成多行 盒模型中的的width height不适用

生成行级盒子 内容分散在多个行盒中 span em strong cite code等

display:inline

行级排版上下文Inline formatting context

只包含行级盒子的元素会创建ifc

ifc内的排版规则

        盒子在一行内水平摆放

        一行放不下会换行显示

        text-align决定一行内盒子的水平对齐

        vertical-align决定一个盒子在行内的垂直对齐

        避开浮动元素

flex box

一种新的排版上下文

控制子级盒子

        摆动的流向 上下左右 row row-reverse column column-reverse

        摆放顺序

        盒子的高度和宽度

        水平和垂直方向的对齐

        是否允许折行

主要由主轴和侧轴控制

主轴

可以设置justify-content 来控制 内部摆放侧重 flex-start 靠左 fles-end靠右 center居中 space-between 两侧贴边中间居中 还有一些

侧轴

align-intems flex-start 上 等

align-self自己盒子不和其他一起布局 如其他子级盒子是slex-start靠上 可以用使用flex-end靠下

order排序

flexibility 设置子项的弹性 容器有剩余空间时 会拓展 容器空间不足时 会收缩

flex-grow 伸缩 flex-shrink 收缩 flex-basis 没有伸展或者收缩时基础长度

grid布局

最自由的布局 可以实现其他布局

使用display：grid使元素生成一个块级的grid容器

使用grid-template相关属性将容器划分为网格

设置每一个子项占哪些行或列

gridline网格线

grid area网格区域四个数字分别为 上线 左线 下线 右线

display属性

(1block 块级盒子 （2inline 行级盒子 （3inline-block 本身是行级可以放在行盒中可以设置宽高 作为一个整体不会被拆散成多行（4排版时被忽略

float浮动

positition 属性 

static 默认值 非定位元素

relative 相对与自身原本位置偏移 不脱离文档流

在常规流里布局

相对与自己本应该在的位置进行偏移

使用top left botton right 设置偏移长度

流内其他元素当它没有偏移一样布局

absolute 绝对定位 相对于 非static祖先元素定位

脱离常规流 

相对于 最近的非static祖先定位

不会对流内元素布局产生影响

fixed 相对与视口绝对定位

其实没有写完 因为文档里面很多都是给链接没有图片 下次再说