前端学习笔记2，3

• CSS基本语法

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

• 一般采用分行来写，pink老师真传

• CSS选择器

• 标签选择器

• 用HTML标签名称作为选择器,为页面中某一类标签指定统一的CSS样式。

• 总结来说就是一次选定全部带有这个标签的

• 类选择器

• 如果想要差异化选择不同的标签,单独选一个或者某几个标签 ,可以使用类选择器。

• 类名前加 .

• 类选择器我感觉用的会更多

• id选择器

• id选择器可以为标有特定id的HTML元素指定特定的样式。（只能调用一次）id选择器以"#" 来定义。

• 强调 只能一次！！！

• 类选择器在修改样式中用的最多, id选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用

• 通配符选择器

• 选取页面中所有元素（标签），不需要调用

• 复合选择器

• 后代选择器(包含选择器)

• 可以选择父元索里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。

• 子选择器

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

• 并集选择器

• 可以选择多组标签同时为他们定义相同的样式。通常用于集体声明，任何形式的选择器都可以作为并集选择器的一部分。

• 伪类选择器

• 用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。用冒号(:)示

• 链接伪类

• 为了确保生效,请按照LVHA的循顺序声明。

• 因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。

• focus伪类

• 用于选取获得焦点的表单元素。焦点就是光标，一般情况<input>类表单元素才能获取

• 字体颜色和文本

• 一般都是输入对应的英文即可，而且css对单位的要求比较严格，这里不再一一叙述

• 块元素

• 常见的块元素有<h1>~<h6>、<p>、<div>、 <ul>、 <ol>、 <li>等 ,其中<div>是最典型的。

• 自己独占一行。

• 高度,宽度、外边距以及内边距都可以控制。

• 宽度默认是容器(父级宽度)的100%。

• 是一个容器及盒子,里面可以放行内或者块级元素。

• 文字类的元素内不能使用块级元素，<h1>~<h6>、<p>主要用于存放文字,因此不能放块级元素

• 行内元素（内联元素）

• 常见的行内元素有<a>、<strong>、 <b>、 <em>、<i>、 <del>、 <S>、 <ins>、 <U>、 <span>等 ，其中<span>标签是最典型的行内元素。

• 相邻行内元索在一行上, 一行可以显示多个。

• 高、宽直接设置是无效的。

• 默认宽度就是它本身内容的宽度。

• 行内元素只能容纳文本或其他行内元素。

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

• 行内块元素

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

• 行内块在一行上,但是他们之间会有空白缝隙。一行可以显示多个 (行内元素特点)。

• 默认宽度就是它本身内容的宽度(行内元索特点)。

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

• CSS背景

• 设置背景颜色，背景图

• background-color

• 同时有背景颜色和背景图片时，图片会压住颜色。

• background-image : none / url(图片地址)

• 背景平铺：在HTML页面上对背景图像进行平铺

• background-repeat : repeat(默认)/no-repeat/repeat-x(沿x轴)/repeat-y(沿轴)

• 改变图片在背景中的位置

• background-position: x y;

• x和y坐可使用方位名词或者精确单位

• 如果参数值是精确坐标,那么第一个是x，第二个是y，如果只指定一个,那一定是x，y垂直居中

• 如果指定的两个值都是方位名词,则两个值前后顺序无关，left top=top left，如果只指定了一个,则另一个值默认居中对齐

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

• 背景附着（背景图像固定）

• 这个就可以实现一些比较厉害的效果，就比如学长展示的qq官网

• background-attachment : scroll / fixed

• 背景颜色半透明

• 在rgb值后加一位变为rgba即可实现，范围0-1

• 盒子模型

• 很重要i的模型，我们可以把每一个网页都理解为由一个一个不同大小的盒子堆砌而成，而事实上也的确是这样子的。

• 边框

• 内边距(padding)

• padding: 5px

• 1个值，代表上下左右都有5像素内边距

• padding: 5px 10px

• 2个值，代表上下内边距是5左右内边距是10

• padding: 5px 10px 20px

• 3个值，代表上内边距5左右内边距10下内边距20

• padding: 5px 10px 20px 30px

• 4个值，上5右10下20左30，顺时针

• padding可以做非常巧妙的运用。因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了,直接给padding最合适。

• 如果盒子本身没有指定width/height属性,padding不会撑开盒子大小。

• 外边距(margin)

• 与padding相同

• 实现水平居中

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

• 盒子必须指定了宽度( width)。

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

• 可以写为

• margin-left: auto; margin-right auto;

• margin: auto;

• margin: 0 auto;

• 上述方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

• 外边距合并

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

• 当上下相邻的两个块元索(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top , 则他们之间的垂直间距不是margin-bottom+margin-top。取两个值中的较大者。

• 解决方案:尽量只给一个盒子添加margin值

• 盒子阴影(shadow)

• 阴影不占空间

• box-shadow: h-shadow v-shadow blur(虚实) spread(范围) color(一般有透明度) inset ;

• 文字阴影

• text-shadow: h-shadow V-shadow blur color ;

• 浮动(float)

• 网页布局的本质一用CSS来把盒子摆放到相应位置。

• CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序) :

• 普通流(标准流):就是标签按照规定好默认方式排列.（以块级、行内）

• 定位

• 浮动

• 有很多的布局效果标准流没有办法完成，此时就可以利用浮动，因为浮动可以改变元素标签默认的排列方式

• 浮动特性

• 脱离标准普通流的控制(浮)，移动到指定位置(动), (俗称脱标)

• 浮动的盒子不再保留原先的位置，只会影响后面的标准流不会影响前面的标准流.

• 如果多个盒子都设置了浮动,则它们会按照属性值一 行内显示并且顶端对齐排列。互相贴靠在一起(不会有缝隙)。如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

• 浮动的元素具有行内块元素的特性，因此可以直接设置宽高。如果块级盒子没有设置宽度,默认和父级一样宽,但是添加浮动后,它的大小根据内容来决定

• 浮动元素和标准流父级搭配使用

• 先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

• 清除浮动

• 父级盒子很多情况下不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时，就会影响下面的标准流盒子。清除浮动的本质是清除浮动元素造成的影响。清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了