CSS学习笔记（2）

1.像素和百分比

长度单位像素px，

屏幕（显示器）由一个个点构成

不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰

所以200px在不同的设备下的显示效果不一样

百分比：可以将属性设置为其相对于父元素的比列

可以使子元素可以随父元素的改变而改变

2.em和rem

em是根据当前字体大小来决定的长度单位

em是当前设置字体大小（一般字体大小是16px，所以em默认是16px）

rem是相对于根元素的字体大小来设置的

比如head的style里

用hmtl{}来设置字体大小，这样网页的所有部分都会继承它的样式，rem的大小也会由其决定

3._RGB值(颜色单位)

RGB通过三种颜色（红，绿，蓝）的不同浓度来配出不同的颜色

R，red；G，green；B，blue

每一种颜色的浓度范围在0-255%之间。

语法  RGB(xxx,xxx,xxx);

RGBA是在原来的基础上加上了第四个属性：透明度，

1是完全不透明，.5（写作.5实际上是0.5）？半不透明，0完全透明

************************************

十六进制表示颜色

语法： #红色绿色蓝色

取值00--ff

如#ff0000表示红色，如果三个都是两位两位重复，可以简写

比如ffff00可以简写为ff0

4._HSL值（另一种颜色值）

常用于ps等，在编程中应用不多

hsla（色相，饱和度，亮度，透明度）

色相0-360，饱和度0%-100%，亮度0%-100%，透明度同上

5.文档流

网页是一个多层结构，一层摞着一层

通过css可以分别为每一层设置样式

用户只能看到最顶层

在这些层中，最底下的一层叫作文档流，文档流是网页的基础

我们所创建的元素默认都在文档流中进行排序

元素在文档流中的特点：
块元素：在页面中独占一行（只在文档流中适用）

默认宽度是父元素的全部（把父元素撑开即是把html撑满）

默认高度是被内容撑开（子元素）

行内元素：默认高度和宽度是被内容撑开，不独占一行，从左到右排列

6.盒子模型的组成（box model）

css将页面中所有的元素设置为矩形的盒子

然后对页面的布局就变成了对盒子位置的布局

每一个盒子都由下面几个部分组成：
内容区（content）

边框（border）

内边距（padding）

外边距（margin）

单个属性的设置：四个值上下左右，三个值上，左右，下；两个值上下，左右；一个值全部

a.内容区：width设置内容区宽度

height设置内容区高度

b.边框（影响盒子大小）：盒子可视化部分的边缘，需要至少设置三个样式

边框宽度（默认）：border-width或者（border-left-width这种细节设置）

边框的颜色（默认black）：border-color

边框样式：border-style（默认是none，需要指定否则边框不会显示）

solid 实线；dotted 点状虚线；dashed 虚线；double 双线

最简单是border（top）：xxx xxx  xxx(分别对应宽度颜色样式，顺序无所谓)

或者全部设置后给一个边设置none

c.内边距

关于padding的属性填写和上面一样

内边距影响盒子大小，内容区的背景颜色延伸到内边距，

如果设置一个内容区的子元素把内容区撑满，再设置另一个颜色，可以明显地看出差别

可见的盒子大小由内容区，内边距，边框共同决定

d.外边距

不会影响盒子可见框的大小，但影响盒子的位置

margin的属性设置与上相同，

默认情况下左上移动自己，右下移动别人

例如上边距设置正值会自身向下移动（如果设置负值，会向相反方向移动）

外边距影响元素实际的占地大小

7.盒子水平和垂直方向的布局

水平方向布局：一个元素在父元素中的水平布局必须满足以下等式

margin-left+border-left+padding-left+width+padding-right+border-right+padding-right+margin-right=父元素的width(必须满足)

如果相加结果使等式不成立,则称为过渡约束,则等式会自动调整

如果这七个元素没有设置auto属性,则会默认调整margin-right来使得等式成立

而且这三个值中有三个值可以设置为auto:分别为width margin-left margin-right

如果某个值为auto,会自动调整以使等式成立

如果是两个值为auto(分两种情况):
a.如果是一个外边距和一个宽度,边距会变0,宽度会最大

b.如果是两个外边距,剩余的长度由两个外边距平分,营造出居中的效果

如果三个值是auto:宽度最大,外边界与为0

总结;一旦width设置为auto,auto的外边距就会归零

-------------------------------------------------------------------------------

垂直方向的布局:默认情况下父元素的高度会被内容撑开
如果子元素的大小超过了父元素,则子元素会从父元素中溢出

使用overflow(-x/-y)属性设置父元素如何处理溢出的子元素

overflow的可选值:a.visible默认值,在父元素外显示

b.hidden,隐藏,溢出的内容会被裁剪,不会显示

c.scoll:生成两个滚动条.通过滚动条来查看完整内容(一出来就是两个滚动条)

d.auto:根据需要生成滚动条(更加灵活,在后面可以用来设置BFC模式)

8.外边距的折叠

相邻的垂直方向的外边距会发生折叠现象

a.兄弟元素:取两者之间的最大值(两者都是正值)

取两者的和(一正一负)

取两者中绝对值较大的(两个都是负值)

b.父子元素:父子元素的外边距相邻,子元素的会传递给父元素(一般是上外边距,可以通过给父元素设置BFC模式,来解决这种情况或者设置内边距)

9.前三个练习

(1.)nav标签用来设置一个容器

(2.)给子元素设置line-height与父元素高度相同,可使子元素在父元素中垂直居中

(3.)可以给文字设置text-decoration(文字格式):none来取消下划线

(4.)font-weight:bold可以给字体设置加粗效果

(5.)可以给元素设置为行内块元素属性display:inline-block

块元素默认宽度把父元素撑满,高度被子元素撑开,独占一行,可以手动设置宽高边距,可以放任意元素;

行内元素无法设置宽高边距,全由子元素撑开.可以和其他元素共处一行,但有空隙,只能容纳行内元素或者文本;

行内块元素可以手动设置宽高(块元素特性).宽高边距默认由子元素撑开,可与其他元素共处一行(行内元素特性).

10.浏览器的默认样式

通常情况下,浏览器会为元素设置一些默认样式,会影响到页面的布局
所以通常要去除默认样式(pc端页面)

这里可以通过引入css文件(link标签)来实现:一种是reset.css(直接消除),一种是nomalize.css(注重统一).