呕心沥血总结的css学习笔记

目录
css
css选择器
引入css的三种方法
谷歌调试工具的使用
Emmet语法
元素显示模式
CSS 背景属性（重点）
背景色半透明
css三大特性
盒子模型
行内块元素和块元素的居中方法
ps基础操作
css3边框
css定位
定位
相对定位 relative
绝对定位

css
css选择器

标签选择器
id，#{}
类选择器 .{}
通配符选择器 *{}
复合选择器

后代选择器 :元素1 元素2

ul li{}
并集选择器
子选择器
伪类选择器

​ W3Sschool Google Wikipedia ​

注释：:hover 选择器鼠标指针在其上浮动的链接设置样式。

​ ​ ​ 字体属性

font-family:规定文本的字体系列。
font-size:规定文本的字体尺寸。
font-weight :规定字体的粗细。
文本属性

text-align:cent,left,right，文本对齐的属性值
text-decoration:规定添加到文本下划线情况。none,underline (可以修改a标签的下划线)
color :设置文本的颜色
text-indent: 规定文本块首行的缩进。2em 表示两个字的缩进
line-height:26px 行与行之间的距离
引入css的三种方法

内部样式

hello

行内样式 外部样式 谷歌调试工具的使用

重点：

使用调试工具排查错误

用最左边的那个鼠标选中一个元素，会在右边出现一个style样式，如果没有，则该样式有问题（），如果出现了样式，该样式的属性出现了一个横线，则该属性有问题，谷歌会显示在第几行报的错
使用调试工具在不改变源码情况下更改页面样式

用最左边的那个鼠标选中一个元素，会在右边出现一个style样式，可以修改
不会对源码产生影响
Emmet语法

乘以div*4
+
div+p p和div是兄弟节点
.
div.demo div标签中的类名为demo
$
ul>li.item$\ast 5div.demo$*5
div#demo$9
{}
{}往里面加文本
div5{helloworld}

div#demo1 id为demo1的div
ul>li*5

元素显示模式

行内元素和块元素

行内元素：可以独占一行

h1 p div 是常见的块元素

特点
行内元素的大小可以设置
默认的宽度是body的宽度
除了p h1 这些元素外，可以往里面添加其他元素
特点：

行内元素只能放文本，不能放块元素，可以放其他行内元素
h1和p中只能放文字不能放块元素

注意a标签中可以放块元素，一般用时，行转块

行内块元素

特点：

一行可以放多个
可以设置宽度和高度
行元素，行内块元素，块元素，之间的相互转换

——》块 display:block
->行 display :inline
—>行内块 display:inline-block
使文本垂直居中

line-height:元素的高度

hello√world

原理 :行元素本来是居中的，把他的height改了后，当高度大于line-height时，会往上偏，反之往下，

屏幕快照 2020-08-09 20.53.32

CSS 背景属性（重点）

background 在一个声明中设置所有的背景属性。 1
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
background-color 设置元素的背景颜色。 1
background-image 设置元素的背景图像。 1
background-position 设置背景图像的开始位置。 1
background-repeat 设置是否及如何重复背景图像。 1
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3

background-position

参数 描述

top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom right 如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。
值可以参考w3school

background-attachment

实现背景图不跟页面的内容滚动而滚动

背景色半透明

background-color: rgba(0, 0, 0, 0.5); //最后一个代表透明度50%
background-image和image的区别

background-image更容易控制位置，常用于小图片，logo，和精灵图

css三大特性

层叠性：最近的css
继承性：子标签继承父标签的css样式
优先级
屏幕快照 2020-08-09 23.14.45

复合选择器会对优先级权重进行叠加

盒子模型

由四部分组成

边框
CSS 边框属性（Border )
border-color 参考w3cshool
border-style
border-width
注意：给border边框设置大小时会影响整个盒子的大小
外边距
margin : 0 auto 这个auto代表左右的外边距相等，同理auto可以用于上下
margin
内边距
注意内边距会影响整个盒子的大小
保持原来的大小：width，height减去多出来的长度
好处：盒子会根据内容的增多而变大，看起来会很舒服
坏处：盒子变大需要重新计算盒子的宽度跟高度
div 和p当没有指定width时，padding不会将宽度增加
行内块元素和块元素的居中方法

行内块元素 text-align:center;

行内块元素,就可以看成一个行内元素，居中就是文本居中

块元素 margin :auto top ;块元素独占一行，左右外边距相等就是居中

外边距塌陷问题

屏幕快照 2020-08-10 12.58.58父盒子里面有个子盒子，两同时有margin top时，父盒子会选择一个margin大的值。

屏幕快照 2020-08-10 12.55.23