前端一周笔记

学习笔记

一、选择器

作用：通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器选中的标签上。

二、声明块

作用：声明块紧跟在选择器后面，使用一堆{}括起来，声明块其实就是一组一组的名值对结构，这一组一组名值对我们称为声明。

三、常用选择器

1.元素选择器

语法：标签名{}

2.id选择器

语法：#id属性值{}

3.类选择器：通过元素class属性值选中一组元素，可以同时为一个元素设置多个class属性值，并且使用空格隔开

语法：.class属性值{}

4、选择器分组（并集选择器）

语法：选择器1，选择器2，选择器3.....{}

5、通配选择器

语法：*{}

6、交集选择器（1中2选择器选择的元素）

语法：选择器1选择器2....{}

7、后代元素选择器

语法：祖先元素 后代元素{}

8、子元素选择器

语法：父元素>子元素{}

9、a的伪类选择器（专门用来表示元素一种特殊状态）

a：link{}表示普通链接

a：visited{}表示访问过的链接（由于涉及到用户隐私问题，使用visited伪类只能设置字体颜色）

a：hover{}表示鼠标移入状态

a：active{}表示超链接被点击状态

注意：伪类选择器也可以为其他元素使用

10、input：focus{}（文本框获取焦点）

11、p：：selection{}（为p标签选中的内容使用样式）

12、给段落定义样式选择器

p：first-letter{}（p元素中第一个内容）

p：first-line{}（p元素中第一行内容）

p：before{}（一般before结合content使用，content可以向before或after位置添加一些内容）

13、属性选择器（根据元素属性选取元素）

p[属性]{}（选取含有指定属性的元素）

p[属性名=”属性值“}（选取含有指定属性值的元素）

p[属性名^="属性值"]（选取属性值以指定内容开头的元素）

p[属性名$="属性值"]（选取属性值以指定内容结尾的元素）

p[属性名*="属性值"]（选取属性值以指定内容包含的元素）

14、子元素伪类选择器

15.兄弟选择器

语法：后一个元素 + 前一个元素{}（可以选中一个元素后紧挨着的兄弟选择器）

语法：前一个~ 后边所有{}

16、否定伪类

语法:元素：not（选择器）{}

四、元素之间的关系

**1.父元素：**直接包含子元素的元素

**2.子元素：**直接被父元素包含的元素

**3.祖先元素：**直接或间接包含后代元素的元素，父元素元素祖先元素

**4.后代元素：**直接或间接被祖先元素包含的元素，子元素也是后代元素

**5.兄弟元素：**拥有相同父元素的元素

五、样式的继承

**1.定义：**像儿子一样可以继承父亲的遗产一样，在css中，祖先元素上的样式，也会被其他后代元素所继承。并不是所有样式都会被继承，所有背景相关的样式不会被继承。

六、选择器的优先级

1.定义：当使用不同的选择器，选中同一个元素时并且设置相同的样式时，样式之间产生了冲突。由优先级决定

2.规则：

1. ** a的伪类顺序问题 **

七、单位

1.长度单位：

①像素px

②百分比%

③em

2.颜色单位：

①在css中可以用不同的颜色单词来表示颜色

②RGB值表示不同颜色（RGB表示三原色Red Green Blue）：通过三种颜色的不同浓度，来表示不同的颜色

例：background-color：rgb（红色浓度，绿色浓度，蓝色浓度）

③使用十六进制RGB来表示，使用三组两位的十六进制数组来表示一个颜色

例：background-color：#ff0000（ 红色）

八、字体样式

1.字体颜色

①使用color来设置文字的颜色

2.字体大小

①使用font-size来设置字体大小

3.字体类型

① 通过font-family可以指定文字的字体

4.字体表现

①使用font-style可以用来设置文字斜体

②font-weight可以设置文字的加粗

③font-variant设置小型大写字母

font：使用该样式可以同时设置字体相关的所有样式

九、字体分类

例如：<p style = "font-size：50px；font-family：serif；”>衬线字体：我是一段文字，ABC</p>

十、文本样式

1.行间距

①使用line-height设置行高

②注意

2.大小写化

①text-transform可以用来设置文本的大小写

例如：

3.文本修饰

①text-decoration可以用来设置文本修饰

②注意

4.字母间距和单词间距

①letter-spacing用来设置字符之间的间距

word-spacing用来设置单词之间的间距

5.对齐方式

①text-align用于设置文本的对齐方式

6.首行缩进

①text-indent用来设置首行缩进（一般使用em作为单位）

十一、盒子模型

1.盒子组成部分：

内容区（content），内边距（padding），边框（border），外边距（margin）

2.设置一个盒子

①为盒子设置内容区大小

使用width来设置盒子内容区宽度

使用height来设置盒子内容区高度

使用color来设置盒子内容背景颜色

② 为盒子设置边框大小

为盒子设置边框必须有三要素

border-width：边框的宽度

*使用border-width可以分别指定四个边框的宽度（上右下左）

border-color：边框的颜色（和宽度一样，这个也提供了四个方向的样式，可以分别指定颜色）

border-style：边框的样式

border

边框的简写样式，通过他可以同时设置四个边框的样式，宽度，颜色，没有任何顺序要求

border：red solid 10px

③为盒子设置内边距

（指的是盒子内容区与盒子边距之间的距离，一共有四个方向的内边距）

注意：修改内边距会影响整个盒子大小

例如：

padding

内边距的简写样式，通过他可以同时设置四个边距

④为盒子设置外边距大小

(1)（盒子与其他盒子之间的距离，不会影响盒子可见框的大小，而是会影响盒子的位置）

(2)例如：

(3)

*注意：设置上和左外边距会改变自身盒子位置，设置下和右外边距会改变旁边盒子大小。

外边距也可以做一个负值，如果外边距设置为一个负值，则元素会往反方向移动。

margin还可以设置为auto，auto一般只设置给水平方向的margin

(4)

margin

外边距的简写样式，通过他可以同时设置四个外边距

margin：；

(5)

外边距的特殊：垂直外边距的重叠

-在网页中相邻垂直方向的外边距会发生外边距重叠

-指兄弟元素之间的相邻外边距会取最大值，而不是取和

-如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

(6)默认的样式

浏览器在页面中没有设置样式时，也可以让页面有一个较好的显示效果

如果要清除所有标签的默认效果

*{

padding= 0；

margin= 0；

}

十二、内联元素的盒模型

1.内容区

①内联元素不能设置width和height

2.内边距

①可以设置水平方向的内边距

②可以设置垂直方向的内边距，但是不会影响页面布局,会重叠

3.边框

①可以设置水平边框，

②但是垂直的边框不会影响页面布局，会重叠

4.外边距

①水平方向相邻的外边距不会重叠，而是求和

②不支持垂直外边距

十二、将一个内联元素转化成块元素

1.通过display样式可以修改元素的类型

none：不显示元素，并且元素不会在页面中占位置

2.visility标签

一、overflow标签（处理子元素溢出时发生的情况）

二、文档流

1.定义：文档流处在网页最底层，表示的是一个页面中的位置，我们所创建的元素默认都在文档流中。如果一行不足以容纳所有内联元素，则换到下一行，继续自左向右

2.元素在文档流中特点：

块元素：

①在文档流中会独占一行，块元素会自上向下排列。

②文档流中默认宽度是父元素的100%

③文档流中高度默认被内容撑开

内联元素：

①在文档流中只占自身的大小，会默认从左向右排

②宽度和高度都被内容撑开

注意：

十三、浮动

1.使用float标签来使元素浮动，从而脱离文档

2.注意

3.元素脱离文档流的特点

①块元素：脱离文档流以后，高度和宽度都被内容撑开

②内联元素：脱离文档流以后，会变成块元素

十四、高度塌陷问题

1.问题出现原因

2.解决高度塌陷问题

①开启BFC属性

②怎样开启元素bfc

③解决高度塌陷问题方案一

overflow：hidden

overflow：auto

在IE6以及一下浏览器中不支持此方法解决

④解决高度塌陷问题方案二

⑤解决高度塌陷问题方案三

十五、清除浮动产生的影响

1.clear标签

注意：只能清除兄弟元素之间浮动影响问题

十六、相对定位

1.定义：定位就是将指定的元素摆到页面任意位置

       -通过position属性来设置定位

3.当元素position属性设置为relative时，则开启了元素的相对定位

4.方法

先开启相对定位：position：relation；

按照布局移动元素：列如：left：100px；

十七、绝对定位

1.当position属性值设置为absolute时，则元素开启了绝对定位

2.方法

先开启绝对定位：position：absolute；

按照布局移动元素：列如：left：100px；

十八、固定定位

1.当元素position属性设置成fixed时，则元素开启了固定定位

2.方法

先开启绝对定位：position：fixed；

按照布局移动元素：列如：left：100px；

十九、元素的层级

注意：当两个元素为父子关系时，子元素永远盖着父元素，无论父元素z-index有多高。

二十、设置元素透明度

2.列如：opacity：0.5；

二十一、背景

1.设置背景颜色

2.设置背景图片

3.设置背景图片重复方式

列如：

学习心得：可能前端刚开始会很轻松吧，我的感觉是比后端简单，不知道后面怎么样。做一些页面布局什么的，感觉就是 要理清楚结构，再设置各种想要的样式，说起来那么简单，做起来的时候，考虑高度塌陷，以及注意浮动产生的影响各种小问题，需要理清楚思路，与代码的实现过程。而下载，刚好我的第一阶段的前端也学完了，下午准备做一个网页，还在琢磨该如何下手。最好的方式，还是的多敲敲，熟悉代码。自然知识点就记住了。

学习计划：下周学习页面的制作，以及自己尝试做第一个未来软件工作室浏览网页。不懂的可以查询css和html文档，以及询问师兄师姐。