CSS学习笔记

举个栗子：

 h1 {

            color: red;

            background-color: lightblue;

            text-align: center;

        }

css:为网页添加样式；cascading style sheet层叠样式表

css规则=选择器+声明块

开发者把写好的html和css的文件放到服务器上，用户通过IP地址向服务端索要下载文件的副本，在本地进行浏览，下载一点执行渲染一点，如果在执行到CSS文件时，浏览器会开启一个新的线程，进行异步加载css文件

1、引入CSS的方法

1）行间样式，在标签里面加入style

2）页面级CSS：在head里面写入style

3）外部CSS文件：在head里面写入link标签

2、css代码书写样式

1）内部样式表

书写在style元素中，style元素写在头部，让浏览器加载的时候先把样式加载出来（样式200行以内使用）

2）内联元素表，元素样式表，不需要写选择器，直接书写在元素的style属性中

例如：<h1 style="color:red;background-color:lightblue">（常常用来测试）

3）外部样式表：将样式书写到独立的CSS文件中

在head中添加link元素，填写单独的外部css元素（推荐使用）

-外部样式表可以解决多页面样式重复的问题

-有利于浏览器缓存，从而提高页面响应速度

-有利于代码分离（HTML和CSS），更容易阅读和维护

3、异步与同步

异步：同时做的事情

同步：先干一件事，再干一件事（和现实中相反）

4、选择器-选中元素

1）ID选择器：将对应的元素赋予ID，在上面style中使用#+ID+{}的形式选择对应的单个元素

一个元素只能有一个ID值

2）元素选择器：书写对应的元素，使用 元素+{} 就可以改变页面上所有对应元素信息

3）类选择器：将对应的元素赋予对应的class属性，例如class=nihao,在style中使用.nihao{}进行添加样式，选择这一类的样式；一个元素可以添加多个类选择器（推荐使用类选择器）

4）通配符：*意思是all，选中了所有的元素，一般用通配符选择器初始化，margin=0，padding=0，color=#424242（标准的黑色）；font-family：Arial

5、声明块

出现在大括号中，包含很多声明（属性），每一个声明（属性）表达了某一方面的样式

6、CSS常见样式

-color：元素内部的文字颜色

预设值：定义好的单词

三原色、色值：光学三原色：红绿蓝，每种颜色可以使用0~255之间的数字来表达，色值。

书写示例：

rgb表示法：rgb(0,255,0)

hex(16进制)表示法：00~ff;

#红绿蓝

常见颜色：

透明色：transparent

淘宝红：#ff4400；#f40

黑色：#000000；#000

白色：#ffffff;#fff

绿色：#00ff00；#0f0

红色：#ff0000;#f00

蓝色：#0000ff;#00f

紫色：#f0f

青色：#0ff

黄色：#ff0

灰色：#ccc

-background-color：元素背景颜色

-font-size，默认值是16px

元素内部文字的尺寸大小，一般设置字体的时候，都是设置字体的高

1）px：像素，相对单位，简单的理解为文字的高度占多少个像素

2）em:相对单位，相对于父元素的字体大小；每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号，即浏览器设置的字号

user agent, UA：用户代理

-font-weight，默认值是bold,加粗;有对应的值：lighter  normal  bold  bolder;100-900

strong,默认加粗

文字粗细程度，可以取值为数字，可以取值为预设值

默认值为normal:400

加粗：bold:700

-font-family:常用的是arial

文字类型，必须用户计算机中存在的字体才有效，使用多个字体以匹配用户环境

sans-serif:非衬线字体，字体比较圆滑

-font-style

字体样式，通常用它设置斜体

i元素、em元素：italic:默认倾斜；实际使用中，通常用它表示一个图标（icon）

-text-decoration：underline（下划线）overline（上划线）

文本修饰，给文本加线

a元素

del元素：错误的内容

s元素：过期的内容：line-through（划去的）

-text-indent：首行文本缩进

-line-height

单行文本的高度，该值越大，每行文本的距离越大

设置行高为容器的高度，可以让单行文本垂直居中

行高可以设置为纯数字，表示相对于当前元素的字体大小

-width：宽度

-height（容器的高度）：高度

-letter-space：文字间隙

-text-align：对齐方式：center，right，left；justify

元素内部文字的水平排列方式

cursor：当鼠标放上去的样式：point（点上去的小手）help(问号帮助)

7、选择器-帮助你精准的选中想要的元素

简单选择器：

通配符选择器：*（通常用来初始化所有标签，因为权重为0，对后面用户自定义不影响）

属性选择器：【】用大括号将属性写进去，比如【id】{}

伪类选择器：使用方式：元素：伪类选择器，比如：a:hover{}

link：超链接未访问的状态

visited：超链接访问后的状态

hover：鼠标移动上去显示的颜色

active：表示鼠标按下去的状态

按顺序写：爱恨法则

伪元素选择器：（一个标签在出生的时候就存在两个伪元素了，我们可以通过CSS将伪元素选择出来修改内容,伪元素可以当做元素来操作CSS，但是他没有元素结构；伪元素是行级元素，是inline属性，可以将他设置为inline-block属性；伪元素经常用于设置文本前面的样式）

元素：：before{content="neirong"}在逻辑最前生成内容

元素：：after在逻辑最后生成内容

父子选择器（派生选择器） ：父元素下面的子元素，只要满足父子元素就可以,例如：div span；浏览器遍历父子元素是从右向左进行遍历的，先走子元素，再走父元素

直接子元素选择器：直接一级的子元素：例如div>span

并列选择器：可以采用  div.class{}的形式

分组选择器：标签之间用逗号隔开

选择器的组合：

1、并列，元素直接写在一起

2、后代元素-空格

3、子元素->

4、相邻兄弟元素-+(选择元素后面的一个元素)

5、兄弟元素-~（选择元素后面的所有元素）

多个选择器，逗号隔开（语法糖）

8、层叠（权重计算）

声明冲突：同一个样式，多次应用到同一个元素

层叠：解决声明冲突的过程，浏览器自动处理

1、比较重要性

作者样式表：开发者书写的样式表

-作者样式表的重要样式

-作者样式表的普通样式

-浏览器默认样式表中的样式

2、比较特殊性：看选择器

总体规则：选择器选中的元素越窄，越特殊

具体规则：通过选择器，计算出一个4位数：

无穷大（infinity正无穷）：！important

千位：如果是内联样式，计为1，否则为0

百位：等于选择器中所有ID选择器的数量

十位：等于选择器中类选择器、属性选择器、伪类选择器的数量

个位：等于选择器中所有元素选择器、伪元素选择器的数量

0：通配符

（逢256进1）

尽量不要改样式代码，就进行一个覆盖

3、比较源次序

代码书写靠后的胜出

应用：

1、重置样式表：书写一些作者样式，覆盖浏览器的默认样式

重置样式表->浏览器的默认样式

常见的重置样式表：normalize.css\reset.css(推荐)\meyer.css

继承：子元素会继承父元素的某些CSS属性

通常，跟文字内容相关的属性font都能被继承

属性值的计算过程：

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件：该元素的所有CSS属性必须有值

一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值的计算过程

从无属性到所有属性都有值：

1、确定声明值：参考样式表中没有冲突的声明，作为CSS属性值

2、层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS值

3、使用继承：对仍然没有值的属性，若可以继承，则可以集成父元素的值

4、使用默认值：对仍然没有属性的值，使用默认值

例子：a元素一般不能继承，因为他有自己的声明值

-inherit:手动（强制）继承，将父元素的值取出应用到该元素

-initial：初始值，将该属性设置为默认值

9、盒模型

box:盒子，每个元素在页面中都会生成一个矩形区域（盒子）

盒子类型：

行级元素：内联元素，inline，凡是带有inline的都有文字属性，能够识别空格

常见行级元素：span、strong  em  a  del

feature：内容决定元素所占位置；不可以通过CSS改变宽高

块级元素：block

常见块级元素：div  p  ul  li  ol  form  address

feature：独占一行；可以通过CSS改变宽高

行级块元素：inline-block

常见行级块元素：img（img之间有空格的话，去掉空格的方式就和文字去掉空格的方式一致）

feature：内容决定大小；可以改宽高

1、行盒，display等于inline的元素

2、块盒，display等于block的元素

行盒在页面中不换行、块盒独占一行

display默认值为inline

浏览器默认样式表设置的块盒：容器元素、h1-h6、p

常见的行盒：span\a\img\video\audio

无论是行盒、、还是块盒，都由下面几个部分组成，从内到外分别是：

3、盒模型：margin+border+padding+（content=width+height）

1）内容：content

width、height:设置的盒子内容的宽高

2）填充（内边距）：padding

盒子边框到盒子内容的距离

padding-right\left\top\bottom

padding:上、右、下、左（设置4个值就是顺时针的顺序）

设置三个值：上、左右、下

设置两个值：上下、左右

填充区+内容区：填充盒

3）边框：border（可以用border画三角形）

边框和边框交接的地方是斜线，边框四条线（上下左右），每条线都可以单独设置宽、样式和颜色

border-width

border-style: solid(实体)、dotted(点状虚线)、dashed(条状虚线)

border-color

border-radius(圆角):50%;圆环

边框样式、边框宽度、边框颜色

边框和=边框+填充区+内容区

4）外边距：margin

边框到其他盒子的距离

速写属性：margin

10、定位元素

position：父相子绝

一般使用relative作为参照物，用absolute进行定位，可以任意的调换自己的参照物，比较

是向右移动50像素）

1）absolute，绝对位置：相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位

层模型：脱离原来位置进行定位；当一个元素用了absolute定位之后，相当于他到上面的层里面，自己原来的层就真空了，所有其他元素可以在它的层上；每一个absolute都是一个新的层

2）relative：相对的，可以和left、top配合：left：相对于出生的位置进行定位，相对于出生位置移动

保留原来位置进行定位，就是使用relative的元素之前的空间不会被占用，但是他也是生成了不同的层，可以和别的元素进行重叠

3）fixed:固定位置，配合left\top使用，页面怎么动，这个fixed都不会动，一般用来做灵活，减小对后续元素的破坏

单独元素定位要和left、right、top、bottom放在一起用（left:相对于左边50像素，就像广告

4）z-index，表示层数

opacity:透明度：0-1

body里面的默认margin值是8px

11、margin塌线

因为设置的父子元素中子元素的margin-top不起作用了，这是一个bug

解决方法：只设置一个CSS属性就行了

1）给父级元素设置一个border-top（不建议使用）

2）bfc:block format context:块级格式化上下文，设置之后会改变盒子里面的语法规则，但改变的不多

如何触发一个盒子的bfc:

1)position :absolute  2)display :inline-block  3)float :left/right  4)overflow：hidden

这四种方法都能弥补这个缺陷，但是根据实际情况进行选择用哪一个

12、margin合并

两个div设置margin-top和margin-bottom时，距离会进行合并，正常情况下是会进行累加的，bug

解决方法：1、利用上面的bfc方法（不建议使用）

2、选择不解决，利用数学方法进行处理

盒模型、层模型、浮动模型

13、盒模型应用

1）改变宽高范围：

默认情况下，width和height设置的是内容盒宽高

页面重构师：将psd文件（设计稿）制作为静态页面

衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒;

1)精确计算

2)CSS3：box-sizing

2）改变背景覆盖范围：

默认情况下，背景覆盖边框盒

可以通过background-clip进行修改

3）溢出区域：

overflow:控制内容溢出边框盒后的处理方式

4）断词规则：

word-break:会影响文字在什么位置被截断换行

normal：普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）

break-all:截断所有，所有字符都会在文字处截断

keep-all：所有文字都在单词之间截断

5）空白处理(只能控制单行文本)

white-space：nowrap

overflow: hidden

text-overflow: ellipsis

行盒的盒模型

常见的行盒：包含具体的元素

span\strong\em\i\img\video\audio

行盒显著特点：

1、盒子沿着内容延伸

2、行盒不能设置宽高

调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整

3、内边距（填充区）

水平方向有效，垂直方向不会实际占据空间

4、边框

水平方向有效，垂直方向不会实际占据空间

5、外边距

水平方向有效，垂直方向不会实际占据空间

行块盒（经常用来做分页）

display:inline-block的盒子

1、不独占一行

2、盒模型中所有尺寸都有效

空白折叠：

空白折叠，发生在行盒内部或者行盒之间（包含行块盒）

可替换元素和非可替换元素：

大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素

少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素：img\video\audio

绝大部分可替换元素均为行盒

可替换元素类似于行块盒，盒模型中所有尺寸都有效

常规流

盒模型:规定单个盒子的规则

视觉格式化模型（布局规则）：页面中的多个盒子排列规则

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

1、常规流、文档流、普通文档流、常规文档流

所有元素，默认情况下，都属于常规流布局

总体规则：块盒独占一行，行盒水平依次排列

包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域

绝大部分情况下：盒子的包含块，为其父元素的内容盒

块盒：

1)每个块盒的总宽度（总宽度包含width+padding+border+margin），必须刚好等于包含块的宽度，宽度(width)的默认值是auto；margin的取值也可以为auto

auto：将剩余空间吸收掉

width吸收能力强于margin

若宽度、边框、内边距、外边距计算后，仍有剩余空间，该剩余空间被margin-right全部吸收

在常规流中，块盒在其包含块中居中，可以定宽，然后左右margin设置为auto

2）每个块盒垂直方向上的auto值

height: auto,适应内容的高度

margin: auto,表示0

3）百分比取值：

padding、宽高、margin可以取值为百分比（以上的所有百分比相对于包含块的宽度）

高度的百分比：

包含块的高度是否取决于子元素的高度，设置百分比无效

包含块的高度不取决于子元素的高度，百分比相对于父元素高度

4）上下外边距的合并

两个常规流块盒，上下外边距相邻，会进行合并（两个外边距取最大值）

父子元素边距相邻合并，不想合并可以放个padding

2、浮动

3、定位

14、浮动float模型

能够让元素进行站队浮动，最开始设置浮动属性是为了设置报纸上的文字能够环绕图片进行展示的。因为一般图片旁边的文字都是和图片底部对齐的，所有设置一下float之后文字就和图片的顶部对齐了

float：right（从右向左排队）、left（从左向右排队）；

站队顺序是按照写的元素顺序来的

站队的边界是父级的边界，够一个元素就往后补，不够就换行

而且站队过程中可以加入margin等属性

1、浮动元素产生了浮动流：

影响：所有产生了浮动流的元素，块级元素看不到他们（并不是产生了分层，而是看不见）

产生了bfc的元素和文本类属性的元素（inline属性元素）以及文本都能看到浮动流

2、清除浮动流：clear：right、left、both（消除了浮动流带来的影响，如果想要clear生效的话，加的元素必须是块级元素block）

1）可以用来解决父级包住浮动元素，直接在浮动元素下面写一个其他元素，属性为clear就可以了（不建议使用，因为添加元素改变了HTML结构）

2）可以使用伪元素选择器进行改变，after，利用伪元素来清除浮动

3）将父级元素改变块级元素属性，也设置成浮动元素或者设置一下inline属性，或者设置一下定位

常用清除浮动流三件套：

：：after{

content：“”；

display: block;

clear: both}

注意：凡是设置了position：absolute\float:left/right属性的，他会打内部将元素转换成inline-block，这样他的宽高就可以设置了

15、溢出容器，要打点展示

1、单行文本

常用的三件套：

white-space：nowrap;

overflow: hidden;

text-overflow: ellipsis;

2、多行文本

网页一般都是估算一个大概的容器值，然后手写…上去的，因为多行打点是CSS3才有的技术，老的网页不识别，但是手机端可以识别出来；多行一般不做打点，做截断，直接用overflow：hidden

16、背景图片

使用css里面的background-image：URL（）

设置背景图片大小：background-size：200px 200px

background-repeat: repeat(默认值，重复出现，铺满整个容器)、no-repeat（不重复出现，铺不满就算了，一般都是用这个）

background-position：用来设置图片的位置，居中可以设置为center center

17、图片代替文字

当网速低到一定值的时候，网页会优先加载html，屏蔽掉css和js

1、可以使用三件套来进行展示文字：

首先是将文字缩进：text-index：首行缩进

然后是缩进的文字不换行：white-space：nowrap

接着是溢出隐藏：overflow：hidden

2、只有content和border可以设置背景图片，padding是和内容content一起的，是不能单独设置背景图片的，content设置的背景颜色和背景图片都会展示在padding上，但是内容不会显示在padding上

设置容器的高为0

然后设置padding-top的高度

最后overflow：hidden

TIPS

行级元素只能嵌套行级元素，块级元素可以嵌套任何元素

（但是在移动端或者考虑到选择范围，可以让a标签嵌套其他元素，设置a标签宽高之后方便点击选择）

但是p标签里面不能套块级元素，如果写了，会被div砍成两个p

a标签里面不能套a标签，因为不知道跳的哪个网址

淘宝项目注意事项

1、设置淘宝顶端的栏目随浏览器缩小而改变：margin：0 auto（这个必须是父子级且是块级元素才能实现）

2、文本属性：inline inline-block：具有文本属性的特点，可以识别空格，能被文字分割符给分割了

分割符之间的距离是由font-size来决定距离的

文本类元素都是底对齐，如果想要使用顶对齐的话，就需要使用float属性；

但是一旦行级块元素里面包含文字，外面写的文字就会和标签里面的元素底对齐，如果想要调整对齐线，可以设置一下vertical-align

3、outline：none/没有外边框