CSS学习笔记-----自用！！

• 基础

1. 初识css+内嵌式

css的引入方法：内嵌式、外联式、行内式

内嵌式：style标签中，可以放在任意位置，但一般写在head里（小案例使用）

外联式：写在一个单独的.css文件中，需要通过link标签引入（项目中使用）

行内式：配合js使用，写在标签的style属性中（一般不用，配合js时用行内式 ）

   

css写在style标签中，一般写在title下面，head里面

一个选择器配一对大括号，要加封号; 

文字颜色： 若有两个颜色指令，执行下面的覆盖上面的

px：像素---font-size: 30px;

1. 谷歌浏览器的调试工具

右键点检查，或者Fn键＋F12

Tab键可以在调试工具中加css语句

1. 外联式+行内式

外联式：

<link rel="stylesheet" href="./my.css">

行内式：

<div style="color:aquamarine; font-size: 40px;">这是一个div标签</div>

1. 基础选择器

1. 标签选择器

以标签名命名的选择器。

局限性：标签选择器选择的所有的标签全部生效

标签名 {属性名:属性值;}

ex ：

 p{

            color: red;

        }

1. 类选择器

先定义，再使用

类名只能由数字、字母、下划线、中划线组成

但不能以数字或者中划线开头

一个标签可以同时有多个类名，用空格隔开

类名可以重复，即同时选中多个类名相同的标签

1. Id选择器

不是用来美化的，是未来配合js的时候用的

#id { }

id一个页面只能用一次

1. 通配符选择器

*

可以选中所有标签

在工作中用的极少

可以用于去除标签默认的margin和padding属性值

1. 字体和文本相关样式

1. 字体样式

字体大小（字号），谷歌默认字号为：16px

字体粗细

正常： font-weight: normal; font-weight :400;

加粗：bold  或者数字100——900;

字体样式（是否倾斜）

默认正常：normal

倾斜：italic

字的字体：windows默认微软雅黑，iOS默认为苹方字体

font-family: 宋体;

sans-serif  无衬线字体

serif  衬线字体

monospace  等宽字体

如果电脑没有微软雅黑就用黑体，如果没有黑体就用任意一种无衬线字体。

1. Font符合属性

复合属性：一个属性跟多个值，用空格隔开

层叠要求

如果想单独改变属性值，写在复合属性的下面进行覆盖

复合属性只能省略前两个，属性值有固定顺序

1. 文本样式

文本缩进

text-indent: 50px;

1. 首行缩进两个字的大小，默认16px，那就写32px
2. 首行缩进两个字符大小：em表示一个字符

1. 文本水平对齐方式

left center right左中右对齐方式

默认为左对齐

也可以让图等内容进行对齐

1. 文本修饰

默认无装饰线

underline 下划线

line-through 删除线

overline 上划线

none 无装饰线

ex:

div{

        text-decoration: line-through;

       }

1. 行高

控制一行和另一行的间距

一个是像素px，一个是光是数字，表示倍数

用font复合写法时，要用/将size和line-height隔开

• 进阶

1. 选择器进阶

1. 后代

找到div的儿子p

父级选择器+空格+后代选择器{}

ex :

div p{

            color: aqua;

        }

1. 子代

只选择儿子，不会选择儿子孙子等全部后代

1. 并集选择器

，用逗号，很多标签一起取

p,

div,

span,

h1{

    color: blue;

}

1. 交集选择器

用 . 链接

1. Hover伪类选择器

鼠标悬停状态的时候用的选择器

ex ：悬停时文字变红

a:hover{

            color: blueviolet;

            background-color: #808080;

        }

1. 背景相关属性

1. 背景颜色

标签默认背景为透明

background-color: pink;

background-color: #ccc;

background-color: rgba(0,0,0,0.5);

简写：bgc

1. 背景图片

背景图片（bgi）

  background-image: url(./一个小图片.webp);

背景平铺（bgr）

repeat ：默认全平铺

no-repeat ：不平铺

repeat-x：沿水平方向平铺

repeat-y：沿垂直方向平铺

背景位置（bgp）

方位名词：right left center；top center bottom

默认0 0是左上角

1. 元素显示模式

1. 块级元素

如果是块级元素，宽度默认和父级一样

独占一行

1. 行内元素

一行可以显示多个

宽高不可设置

根据内容自动撑开宽高

1. 行内块元素

一行可以显示多个

可以设置宽高

Input textarea img等

1. 元素显示模式转换

display：block（块级），inline-block（行内块），inline（行内元素）

1. 标签嵌套

块级一般做大容器

p中不能嵌套h、p、div块级元素

a不能嵌套a标签

1. CSS特性

1. 继承性

子承父业的特性

控制文字的都可以继承,不是控制文字的都不能继承

注意事项：a里面继承父类的color会失效。h标签继承父类的字号会失效。

原理：我自己有的，我不要父类的

1. 层叠性

下面的覆盖上面的

当样式冲突时，只有选择器优先级相同时，才能通过层叠性判断结果

• 浮动

1. 结构伪类选择器

  第一个

      li:first-child{

        background-color: green;

      }

  最后一个

      li:last-child{

        background-color: #808080;

      }

  任意一个

      li:nth-child(5){

        background-color: orange;

      }

    倒数第几个

      li:nth-last-child(3){

        background-color: pink;

      }

   括号里面可以填公式：2n，even-偶数，odd，（n-1）-奇数，（-n+5）-前五个，（n+5）-第五个往后

1. 伪元素

由css模拟出的标签元素，一般是装饰性的不重要的小图

：：before 在父元素最前加一个伪元素

：：after 在父元素最后加一个伪元素

默认为行内样式，且必须要由content属性存在，不然不生效

1. 体验行内块问题

标准流：标签默认的布局方式、排列规则

浏览器解析行内块或行内标签的时候，如果代码换行书写，会产生一个空格的距离 ，所以要用浮动

浮动早期：图文环绕，后来：网页布局

1. 浮动特点

特点：脱标----不占用原来的空间（标准流的位置）

一行可以浮动多个，且可以设置宽高------具备行内块的特点

不能用margin：0 auto；居中了

• 盒子模型

1. 优先级

1. 基本测试

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important

！important可以提高优先级，但不能提高继承的优先级

行内样式优先级很高

1. 叠加计算

行内样式的个数-id选择器的个数-类选择器的个数-标签选择器的个数

如果选择器优先级计算相同，根据层叠性进行选择

如果都是继承，继承离文字最近的，即父级最高的（最直接的亲爹）

复合选择器要通过权重叠加计算

行内样式的个数-id选择器的个数-类选择器的个数-标签选择器的个数

1. 盒子模型的组成

纸箱子，填充泡沫

边框线bd == 纸箱子

内边距 == 填充泡沫

外边距 ：出现在盒子的外面

像素大厨px cook

写网页的测量软件

盒子模型是用来布局的

每个标签就是一个盒子

每个盒子由：内容区域-content、内边距区域-padding、边框区域-border、外边距区域-margin构成

1. 组成的应用

盒子尺寸=width+边框线

border会撑大盒子尺寸

边框线bd ：复合属性

粗细，实线虚线 颜色

solid：实线

dashed：虚线

dotted：点线

选方向可以单独添加边框线

1. Padding内边距

padding也能撑大盒子

padding的多值写法

padding是复合属性，表示单独设置某个方向的内边距

1. 盒子自动內减

自动锁定盒子总尺寸

1. 清除默认边距

*{

        margin: 0;

        padding: 0;

    }

1. 版心居中

版心：网页中有用的内容

1. 外边距问题

1. 合并问题

垂直块级元素的合并现象：取两者最大值，只给其中一个盒子设置margin就行

1. 塌陷现象

互相嵌套的块级元素

坑爹行为叫塌陷

1. 行内标签的边距问题

margin和padding的垂直方向不生效

若要改变垂直方向的高度，加行高

• 定位装饰

1. 相对定位

相对定位：自恋型的

        （1）占有原来的位置 ：没有脱标

        （2）仍然具有标签原有的显示模式特点eq：独占一行

        （3）改变位置相对于原来的位置改变

水平以左left为准，垂直以上top为准

让标签自由摆放在网页的任意位置

1. 解决盒子和盒子之间的层叠问题
2. 可以让盒子始终固定在某个位置

设置定位方式

属性名：position

属性值：相对定位relative、绝对定位absolute、固定定位fixed

1. 绝对定位

先找已经定位的父级，如果有这样的父级或以这个父级为参照物进行定位

有父级，但父级没定位，以浏览器窗口为参照物进行定位

1. 会脱标、不占位
2. 会改变原有的标签的显示模式特点 ：具备行内块的特点，在一行，并且宽高有效

子绝父相：子绝对定位，父相对定位 ，父级为广义的父级（就近找父级）

1. 定位-居中

1. 绝对定位的盒子不能使用左右margin，auto居中

left：50%，整个盒子移动到浏览器中间偏右的位置

把盒子向左侧移动：自己宽度的一半

自动修改为原来大小的多少：

transform：translate(-50%,-50%);