CSS（学习笔记）不定期更新~

CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

CSS 注释

CSS注释以 /* 开始, 以 */ 结束

CSS引入方式

CSS属性书写顺序

建议遵循以下顺序

1.布局定位属性：display / position / float/ clear / visibility / overflow( 建议display第一个写，毕竟关系到模式)

2.自身属性：width / height / margin/ padding / border / background

3.文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word

4.其他属性( CSS3)：content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient

CSS三大特性

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层性主要解决样式冲突的问题

层叠性原则

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

样式不冲突，不会层叠

继承性

子标签会继承父标签的某些样式，如文本颜色和字号(text-，font-，line-这些元素开头的可以继承，以及color属性)

行高的继承性

行高可以跟单位也可以不跟单位

如果子元素没有设置行高，则会继承父元素的行高为

body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

例：font: 12px/1.5 'Microsoft YaHei';

优先级

例：color: pink!important;

权重的叠加

权重虽然会叠加，但是永远不会有进位

元素显示模式

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<u>、<o>、<li>等，其中<div>标签是最典型的块元素

块级元素的特点

1.自己独占一行

2.高度，宽度、外边距以及内边距都可以控制

3.宽度默认是容器(父级宽度)的100%

4.是一个容器及盒子，里面可以放行内或者块级元素

注意：

文字类的元素内不能使用块级元素

<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>

同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有<a>、< strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素

行内元素的特点

1.相邻行内元素在一行上,一行可以显示多个

2.高、宽直接设置是无效的

3.默认宽度就是它本身内容的宽度

4.行内元素只能容纳文本或其他行内元素

注意：

链接里面不能再放链接

特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签 <img />、<input />、<td>,它们同时具有块元素和行内元素的特点

行内块元素的特点

1.和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)

2.默认宽度就是它本身内容的宽度(行内元素特点)。

3.高度，行高、外边距以及内边距都可以控制(块级元素特点)。

元素显示模式转换

转换为块元素: display: block;

转换为行内元素: display: inline;

转换为行内块: display: inline- block;

emmet语法

生成html标签

1.生成标签直接输入标签名按tab键即可，比如div然后tab键,就可以生成<dⅳ></div>

2.如果想要生成多个相同标签加上 * 就可以了，比如 div*3 就可以快速生成3个div

3.如果有父子级关系的标签，可以用 > 比如，ul>li就可以了

4.如果有兄弟关系的标签，用 + 就可以了比如 div+p

5.如果生成带有类名或者id名字的，直接写 .demo 或者 #demo

6.如果想生成指定的标签带有类名或者id名字的，比如 p.demo 或者 p#demo

7.如果生成的div类名是有顺序的，可以用自增符号 $

8.如果想要在生成的标签内部写内容可以用 {} 表示

生成css样式

1.比如 w200 按tab可以生成 width: 200px;

2.比如 lh26 按tab可以生成 line-height: 26px;

3.比如 tac 按tab可以生成 text-align: center;

选择器

标签选择器

是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

类选择器(class)

class可以在多个元素中使用

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点 "." 号显示

类选择器使用 "." (英文点号)进行标识，后面紧跟类名(自定义，我们自己命名的)

多类名使用方式：多个类名中间必须用空格分开

id选择器

id属性只能在每个HTML文档中出现一次

HTML元素以id属性来设置id选择器，CSS中id选择器以 "#" 来定义

通配符选择器

在CSS中，通配符选择器使用 "*" 定义，它表示选取页面中所有元素(标签)

通配符选择器不需要调用，自动给所有的元素使用样式

复合选择器

后代选择器

可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代

语法：元素1 元素2 { 样式声明 }

元素1和元素2中间用空格隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可

元素1和元素2可以是任意基础选择器

子选择器

只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素

语法：元素1>元素2 { 样式声明 }

元素1和元素2中间用大于号隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2必须是亲儿子，其孙子、重孙之类都不归他管，你也可以叫他亲儿子选择器

并集选择器

并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明

并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法：元素1, 元素2 { 样式声明 }

元素1和元素2中间用英文逗号隔开

逗号可以理解为和的意思

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格

语法：h3.class { color:red; font-size:25px; }

伪类选择器

链接伪类选择器

为了确保生效，请按照LVHA的顺序声明 link - visited - hover - active

a:link # 正常，未访问过的链接

a:visited # 用户已访问过的链接

a:hover # 当用户鼠标放在链接上时

a:active # 链接被点击的那一刻

focus伪类选择器

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

input:focus

字体属性

font-family # 指定文本的字体系列

font-size # 指定文本的字体大小

font-weight # 指定字体的粗细

font-weight

通常使用数字表示粗细

font-weight: normal; // 默认值（不加粗）

font-weight: bold; // 加粗

font-weight: 100~900; // 400等同于normal，700等同于blod

font-style

font-style: normal; // 默认值

font-style: italic; // 斜体

font

在一个声明中设置所有的字体属性

font: font-style font-weight font-size/line-height font-famliy

例：font: italic 700 16px 'Microsoft YaHei'

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

不需要设置的属性可以省略(取默认值)，但必须保留font-size和font- family属性，否则font属性将不起作用

文本属性

文本颜色color

十六进制值 - 如: ＃FF0000

一个RGB值 - 如: RGB(255,0,0)

颜色的名称 - 如: red

文本对齐text-align

text-align: left; // 左对齐（默认）

text-align: right; // 右对齐

text-align: center; // 居中对齐

文本修饰text-decoration

text-decoration: none; // 默认，没有装饰线

text-decoration: underline; // 下划线

text-decoration: overline; // 上划线

text-decoration: line-through; // 删除线

文本缩进text-indent

用来指定文本的第一行的缩进，通常是将段落的首行缩进

em 是一个相对单位，就是当前元素的1个文字的大小

例：text-indent: 2em

例：text-indent: 12px

行间距line-height

例：line-height: 26px

文字垂直居中

让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

原理

CSS背景

背景图片实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置(精灵图也是一种运用场景)

background-color // 背景颜色

background-image // 背景图片，例：background-image: url(img/01.jpeg);

background-repeat // 背景平铺

background-repeat: repeat; // 背景图像在纵向和横向上平铺（默认）

background-repeat: no-repeat; // 背景图像不平铺

background-repeat: repeat-x; // 背景图像在横向上平铺

background-repeat: repeat-y; // 背景图像在纵向上平铺

背景图片位置background-position

参数是方位名词

默认顺序是先水平(x轴)，后垂直(y轴)

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

例：background-position: left center;

参数是精确单位

如果参数值是精确坐标，那么第一个肯定是ⅹ坐标，第二个一定是y坐标

如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中

例：background-position: 20px 50px;

参数是混合单位

如果指定的两个值是精确单位和方位名词的混合使用，则第一个值是x坐标，第二个值是y坐标

例：background-position: 20px center;

背景图像固定background-attachment

background-attachment: scroll; // 背景图像随对象内容滚动

background-attachment: fixed; // 背景图像固定

复合写法

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

背景色半透明

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

最后一个参数是alpha透明度，取值范围在0~1之间

盒子模型

Margin(外边距)

Border(边框)

Padding(内边距)

Content(内容)

边框border

边框会影响盒子的实际大小

语法：border: border-width || border-style || border-color

border-width // 定义边框粗细，单位是px

border-style // 边框的样式

border-color // 边框的样色

border-style 常用属性值

none // 默认无边框

dotted // 定义一个点线边框

dashed // 定义一个虚线边框

solid // 定义实线边框

边框分开写法：

border-top: 1px solid red; // 只设定上边框，其余同理

表格的细线边框

border-collapse: collapse; // 表示相邻边框合并在一起

内边距padding

内边距会影响盒子的实际大小

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

padding-left // 左内边距

padding-right // 右内边距

padding-top // 上内边距

padding-bottom // 下内边距

复合属性

外边距margin

margin的简写方式和padding的完全一致

margin-left // 左外边距

margin-right // 右外边距

margin-top // 上外边距

margin-bottom // 下外边距

块级盒子水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1.盒子必须指定了宽度(width)

2.盒子左右的外边距都设置为auto

例：margin: 0 auto;

行内元素或者行内块元素水平居中，给其父元素添加 text-align: center 即可

相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin- bottom与 margIn-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系(父子关系)的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值

解决方案：

1.可以为父元素定义上边框

2.可以为父元素定义上内边距

3.可以为父元素添加 overflow: hidden

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距

padding: 0; /* 清除内边距 */

margin: 0; /* 清除外边距 */

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

圆角

语法：border-radius: length;

参数值可以为数值或百分比的形式

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%

如果是个矩形设置为高度的一半就可以

该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值： 四个圆角值相同

border-top-left-radius // 定义了左上角的弧度

border-top-right-radius // 定义了右上角的弧度

border-bottom-right-radius // 定义了右下角的弧度

border-bottom-left-radius // 定义了左下角的弧度

盒子阴影

默认的是外阴影(outset)，但是不可以写这个单词，否则导致阴影无效

盒子阴影不占用空间，不会影响其他盒子排列

语法：box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow // 必需。水平阴影的位置，允许负值

v-shadow // 必需。垂直阴影的位置，允许负值

blur // 可选。模糊距离

spread // 可选。阴影的尺寸

color // 可选。阴影的颜色

inset // 可选。将外部阴影（outset）改为内部阴影

文字阴影

语法：text-shadow: h-shadow v-shadow blur color;

h-shadow // 必需。水平阴影的位置，允许负值

v-shadow // 必需。垂直阴影的位置，允许负值

blur // 可选。模糊距离

color // 可选。阴影的颜色

三种布局方式

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

标准流

垂直的块级盒子（上下排列）显示就用标准流布局

浮动

浮动的盒子不再保留原先的位置(即脱标)

浮动的元素是互相贴靠在一起的，如果父级元素宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

一个元素浮动了，理论上其余的兄弟元素也要浮动

浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流

浮动的盒子不会有外边距合并的问题

浮动元素只会压住它下面的标准流盒子，但是不会压住下面标准流盒子里面的文字（图片），因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素

语法：选择器 { float: 属性值; }

float: none; // 元素不浮动（默认）

float: left; // 元素左浮动

float: right; // 元素右浮动

清除浮动

清除浮动本质

父元素没有高度或者是根据子元素去撑大父元素

影响布局，清除浮动元素脱离标准流造成的影响

清除浮动策略是

闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

清除浮动-额外标签法

额外标签法也称为隔墙法

额外标签法会在浮动元素末尾添加一个空的标签。例如<div style=" clear:both"></div>，或者其他标签(如<br/>等)

优点：通俗易懂,书写方便

缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素

语法：选择器 { clear: 属性值; }

clear: left; // 不允许左侧有浮动元素（清除左侧浮动的影响）

clear: right; // 不允许右侧有浮动元素（清除右侧浮动的影响）

clear: none; // 同时清除左右两侧浮动的影响

实际工作中，几乎只用 clear: both;

清除浮动-父级添加overflow

给父级添加overflow属性，将其属性值设置为hidden、auto或scroll

清除浮动- :after 伪元素法

是额外标签法的升级版，也是给父元素添加，给父元素添加clearfix即可

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    /* IE6、7专有，兼容低版本 */
    *zoom: 1;
}

清除浮动-双伪元素

也是给父元素添加，给父元素添加clearfix即可

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix {
    clear: both;
}
.clearfix {
    /* IE6、7专有，兼容低版本 */
    *zoom: 1;
}

定位

定位 = 定位模式 + 边偏移

可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

语法：选择器 { position: 属性值; }

position: static; // 静态定位

position: relative; // 相对定位

position: absolute; // 绝对定位

position: fixed; // 固定定位

position: sticky; // 粘性定位

边偏移

top // 顶部偏移量

bottom // 底部偏移量

left // 左侧偏移量

right // 右侧偏移量

定位特殊性

绝对定位和固定定位也和浮动类似

1.行内元素添加绝对或者固定定位，可以直接设置高度和完度

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

3.脱标的盒子不会触发外边距塌陷

4.浮动元素、绝对定位、固定定位元素都不会触发外边距合并的问题

定位-相对定位relative

1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标,继续保留原来位置)

例：选择器 { position: relative; top: 100px; }

定位-绝对定位absolute

1.如果没有祖先元素，或者祖先元素没有定位，则以浏览器为准定位(Document文档)

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置

3.绝对定位不再占用原先的位置（脱标）

绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin: 0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中

1. left:50% 让盒子的左侧移动到父级元素的水平中心位置

2. margin-left: 让盒子向左移动自身宽度的一半

子绝父相

子级是绝对定位的话，父级要用相对定位

1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子

2.父盒子需要加定位限制子盒子在父盒子内显示

3.父盒子布局时，需要占有位置，因此父亲只能是相对定位

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

定位-固定定位fixed

1.以浏览器的可视窗口为参照点移动元素

跟父元素没有任何关系

不随滚动条滚动

2.固定定位不在占有原先的位置（脱标）

固定定位小技巧-固定在版心右侧位置

1.让固定定位的盒子 left: 50% 走到浏览器可视区(也可以看做版心)的一半位置

2.让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了

定位-粘性定位sticky

语法：选择器 { position: sticky; top: 10px; }

1.以浏览器的可视窗口为参照点移动元素(固定定位特点)

2.粘性定位占有原先的位置(相对定位特点)

3.必须添加top、left、right、bottom其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE不支持

绝对定位和固定定位，会压住下面标准流所有的内容

定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序(z轴)

语法：选择器 { z-index: 1; }

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上

如果属性值相同，则按照书写顺序，后来居上

数字后面不能加单位

只有定位的盒子才有z-index属性

元素的显示与隐藏

display

display: none; # 隐藏对象，隐藏后不再占用原来的位置

display: block; # 除了转换为块级元素之外，还有显示元素的意思

visibility

visibility: visible; # 元素可见，

visibility: hidden; # 元素隐藏，继续占有原来的位置

overflow

该属性指定了如果内容溢出一个元素的框时，怎么处理

overflow: visible; // 不剪切内容也不添加滚动条

overflow: hidden; // 不显示超过对象尺寸的内容，超出的部分隐藏掉

overflow: scroll; // 不管是否超出内容，总是显示滚动条

overflow: auto; // 超长自动显示滚动条，不超出不显示滚动条