CSS选择器的权重

优先级：
行内样式 >ID选择器 > 类选择器 > 元素选择器 > 通用选择器

权重的计算为相加比大小

CSS边框

边框样式

border-style属性指定了要显示什么样的边框

值：

dotted:定义一个点状的边框
dashed:定义一个虚线边框
solid:定义一个实线边框
double:定义一个双倍的边框
none:定义无边框
hidden:定义一个隐藏的边框

border-style: hidden>border-style: solid>border-style: none

table {
    border-collapse: collapse;    让表格线细一些
}

控制单独一条的边框线，可以在border-style中间添加一个表示方位的词
如：

border-right-style:

border-style有简写方法，有四种写法：

第一种写法:四个值，分别代表上边、右边、下边、左边的边框样式，从顶部开始按照顺时针方向来设置值

第二种写法:三个值，分别代表上边、左右边、下边的边框样式

第三种写法:两个值，分别表示上下边、左右边的边框样式

第四种写法:一个值，表示四个边框的样式

边框宽度

border-width属性用于设置四个边框的宽度
以 px、em等为单位
或者：
thin、medium、thick————薄、中、厚

边框宽度一样有简写方法，与上面一样

边框颜色

border-color属性用于设置四个边框的颜色

值为：颜色名称、十六进制颜色值、RGB颜色值
也可以通过transparent来设置透明

边框颜色一样有简写方法，与上面一样

和字体 font 属性一样,边框也可以使用速记属性。

如：boder: 5px solid red
border-style必须要有

单独边简写一样
如： border-top

CSS列表

应用list-style-type属性可以设置不同的列表项标记

值有：

circle 空心圆点
disc 实心圆点
square 小方点
decimal 数字
upper-roman 大写罗马字母
lower-alpha 小写字母

none 去掉列表标记

列表属性也可以简写：
list-style被用来在一个声明中设置所有的列表属性
例如：

list-style: square inside url(./purple.gif);
按照list-style-type---list-style-position---list-style-image 顺序书写
如果有值缺省，就按照默认值

list-style-image属性指定了一个图像作为列表项的标记
属性值为： url()

list-style-image: url(背景图片路径);

list-style-position属性来实现标记的位置
值为：
outside表示标记在列表项之外
inside表示标记在列表项内部

还可以改变颜色来修饰列表

padding和margin属性，给元素添加内外边距

* {
    padding: 0;
    margin: 0;
    用来消除元素默认的内外边距
}

CSS背景属性

给背景添加图片
可以通过background-image属性实现
值为： url()

添加图片之后，会以平铺的方式展示
如果不想这样，需要使用一个新的背景属性background-repeat
取值为：no-repeat

如果要调整图片位置，需要用background-position
有两个值：

第一个值表示在水平方向上的对齐方式left、center、rigt
第二个值表示在垂直方向上的对齐方式top、center、bottom

放上文字之后，背景图片会随着滚动，如果想到文字滚动，背景不动
需要使用background-attachment属性
用来声明容器里的背景图片与内容的依附方式

fixed :图片固定
scroll:同时滚动

修改背景颜色一般用background-color
有时候颜色深，可以让背景变透明一些实现颜色变浅

    background-color:rgba()
    值为0-1之间的数字，0为完全透明，1为完全不透明
    比如background-color:rgba(0,0,0,0.5)  表示黑色半透明

可以使用background来指定所有的背景属性，可以把body的全部背景属性
合并在background属性里
如：

    background:rgba(0,255,0,0.1) url(./xxxx.png) no-repeat right bottom fixed;

CSS精灵图

通过background-position调节位置
值为：110px 45px 这种

背景滚动视觉差

使用
background-attachment: fixed; 样式
实现了背景的固定

background-size: cover;会使背景铺满整个容器

所以可以这样实现

.box1 {
    background-color: red;
    background-repeat: no-repeat;
    background-image: url(./01.png);
    background-size: cover;
    background-attachment: fixed;
    最后一步是让图片固定，让下面的额图片上来
    如果没有这一步，无法实现视觉差效果
}

这样代码太乱，可以直接简写

.box1 {
    background: fixed no-repeat url(./03.png) 0px 0px/cover;
}

其中,background-size: cover;在简写中
在它的前面必须添加背景图片位置，即使位置不调整，也需要添加 0px 0px这一对值
0px 0px/cover 斜杠前是background-position的属性

CSS轮廓

CSS轮廓属性有：

outline-style:轮廓样式
outline-color:轮廓颜色
outline-width:轮廓宽度
outline-offset:轮廓偏移
outline:轮廓简写

首先是outline-style
值有：

dotted – 定义一个点状轮廓
dashed – 定义一个虚线轮廓
solid – 定义一个实线轮廓
double – 定义一个双线轮廓
none – 表示无轮廓
hidden – 定义一个隐藏的轮廓

outline-width轮廓线宽度属性
值有：

thin:一般为 1 px
medium:一般为 3 px
thick :一般为 5 px
一个特定的尺寸 : 以 px、em 为单位

轮廓是在元素的边框之外绘制的,并且可能与其他内容重叠
它不是元素尺寸的一部分,元素的总宽度和高度不受轮廓宽度的影响

outline-color轮廓线颜色属性
值为：颜色名称，十六进制，rgb

outline简写：

    outline: thin double red;
    其中outline-style必须设置

ouline-offset
用来设置轮廓和元素之间的空隙

CSS边距和margin塌陷

用来在元素周围创造空间，也就是控制元素边框外的距离
也就是margin属性，控制外边距属性
值有：

auto：浏览器自动计算的边距
length :以 px、pt（绝对单位，磅，1磅=0.376毫米）、cm 等为单位指定边距
% : 以父元素宽度的百分比来指定边距

length和% 可以取负值，表示减少外边距的空间大小

为了简化代码，可以在一个margin属性中指定所有的边距属性

    margin: 10px 20px 30px 40px;
    表示从margin-top开始按顺时针方向的四个值

    margin: 10px 20px 30px;
    表示上面边距为10px，左右边距为20px，下边距为30px 的三个值

    margin: 10px 20px;
    表示上下边距为10px，左右边距为20px 的两个值

    margin: 10px;
    表示上下左右边距均为10px

与border 很相似

margin: auto; 使元素在其父元素内或其容器内水平居中
该元素会占用指定的宽度，剩余的空间将在左右边距之间平分

在两个容器的邻接处，有时会出现边距塌陷的问题，也称之为 margin 塌陷
一般发生在相邻块元素垂直边距，和嵌套块元素垂直边距邻接的时候

比如这个元素的顶部边距和这个元素的底部边距，会被折叠成一个单一的边距
这个边距等于两个边距中最大的那个

这种情况不会发生在左右边距上，只会发生在顶部和底部的边距上

除了相邻块元素外，嵌套块元素垂直边距也会塌陷
两个嵌套关系的块元素，有时父元素的上边距会与子元素的上边距，也会发生合并，合并后的边距也为两者中的较大的值

CSS填充和宽高

CSS填充属性用于在一个元素的内容周围产生空间
也就是边框内到内容外，之间的距离
也就是padding 属性，设置内填充

所有的padding
值为：

length : 以 px、pt、cm 等为单位指定填充
%: 以父元素宽度的百分比来指定填充

length和% 可以取负值，表示减少外边距的空间大小

简写同CSS边距（margin）一样

如果一个元素有指定的宽度，那么加在该元素上的填充
就会加到该元素的总宽度上

高度和宽度属性不包括margin、border和padding区域
只是用来定义元素的内容尺寸
值有：

auto：浏览器会计算出高度和宽度
length : 以 px、pt、cm 等为单位定义高度和宽度
% : 以父元素宽度的百分比来定义高度和宽度
initial : 将高度和宽度设置为默认值，实际上就是 auto 了。

width 和height 属性是不包含内填充、边框和外边距的

CSS盒模型

标准盒模型

CSS 盒模型本质上是一个包裹每个 HTML 元素的盒子
包含margin、border、padding和content四个部分
浏览器就是通过盒模型来计算元素在网页中占据的空间大小的

content 表示盒子的内容，包含文本、图像等
Padding 表示填充内容周围的一个区域，它是透明的
Border 表示围绕填充和内容的边框
Margin 表示边框以外的区域，它是透明的

计算盒子的宽度和高度，有两个公式;

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边 + 右边 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填 + 上边 + 下边 + 上边距 + 下边距

当应用 CSS 设置一个元素的width和height属性时，只是设置了元素内容区域的宽度和高度，要计算一个元素的完整尺寸，必须要加上填充、边框和边距

怪异盒模型

给元素声明box-sizing属性
取值为border-box
这个元素就按照怪异盒模型来呈现大小了

所以怪异盒模型的公式为：

盒子的宽度 = CSS样式设置的 width 值 + 左边距 + 右边距
盒子的高度 = CSS样式设置的 height 值 + 左边距 + 右边距

box-sizing属性还有一个值content-box
就是用来触发元素的标准盒模型，这也是元素盒模型的默认值

如果没有给元素设置box-sizing属性，容器的大小就会按照标准盒模型来计算

CSS布局之显示属性

display是控制布局最重要的 CSS 属性
它指定了一个元素是否显示以及如何显示
每个 HTML 元素都有一个默认的显示值元素类型不同，默认的显示值也不同

大多数元素的默认显示值是

block:元素显示为块级元素
inline:元素显示为行内元素
none: 元素显示隐藏元素

span元素和a元素宽度为链接文本的长度

none会使盒子隐藏，并且占据的控件也消失
样式visibility: hidden也会隐藏一个元素，但是该元素仍将占用它隐藏前相同的空间
也可以通过visibility: visible样式来重新显示盒子
这在应用JavaScript 动态控制元素显示和隐藏时非常有用

CSS布局之元素类型

行内元素

行内元素不能设置宽高样式
行内元素可以设置边框线样式
行内元素可以设置内填充样式
行内元素可以设置左右方向的外边距样式

块元素

给块元素设置宽高、边框线、内填充、外边距样式，都是有效的

块元素虽然可以设置盒模型的全部样式
但是每个块元素会独占一行
如果想让块元素在一列显示
display: inline-block;样式可以满足我们的愿望
它具备inline和block两种显示类型的特点
既可以给元素设置宽高，又可以让它们在一行上显示

这里需要声明：
设置一个元素的display属性只能改变该元素的显示方式
而不能真正的改变html元素的类型
比如，一个具有display: inline;的块元素
还是不允许在它的内部有其他块元素。

嵌套规则

规则一：块元素可以包含行内元素或某些块元素，但行内元素却不能包含块元素，它只能包含其他的行内元素。
规则二：块元素不能放在p元素里面。
规则三：有几个特殊的块级元素只能包含行内元素，不能再包含块元素，这几个特殊的元素是：h1、h2、h3、h4、h5、h6、p、dt。
规则四：块级元素一般与块级元素并列、行内元素一般与行内元素并列。

CSS布局之溢出处理

通过CSS的溢出样式也能实现iframe功能
CSS 的overflow属性
指定了当一个元素的内容太大，无法容纳在指定区域时，是否要裁剪内容或添加滚动条
值有：

visible: 默认。溢出的内容没有被剪掉，内容会在元素的框外呈现
hidden: 溢出的内容被剪切，其余的内容将不可见
scroll : 溢出的内容被剪掉了，并且增加了一个滚动条来查看其余的内容
auto: 类似于 scroll，但它只在必要时才添加滚动条

如果只希望某一个方向有滚动条，可以采用overflow-x和overflow-y两个样式属性
它们指定的是否只在水平方向(x)或垂直方向(y)上滚动

white-space: nowrap; 让文本在一行上显示，并且溢出的部分隐藏
给 h1 再添加一个text-overflow: ellipsis;
溢出部分变成了省略号

CSS布局之浮动基础

容器浮动以后会脱离标准文档流，相当于飘起来了，不占据原来的位置

浮动样式的属性名为float
值有：

left : 左侧浮动
right : 右侧浮动
none : 不浮动

浮动只能让容器在当前所在行左侧或右侧排列

实现多个容器横向排列，只需要给所有的容器添加浮动样式即可

CSS布局之浮动清理

在三个浮动元素的外层，再包裹一个父元素
这样这个父元素和后面的元素就不存在浮动关系了

对于普通元素来讲，子元素的大小是可以将父元素撑开的
但对于容器里的浮动元素，它们是不占据空间的，也就不能将父元素撑开了
给父元素设置一个边框，会只显示上边框，给父元素设置一个高度，就能完整显示了

如果不想手动设置这个高度，有两种常见的解决方法，来清除浮动的影响：

第一种，为了使父元素的高度保持正常，我们给父元素增加一个样式overflow:auto，含义是：对于超出边界的元素，父元素可以做自动的调整，这样一来父元素的高度就变得正常了

第二种使用clear样式属性，clear这个样式叫做清除浮动，当我们不希望当前元素受到前面浮动元素影响的时候，就给当前元素增加 clear 这个样式，谁不希望受到影响谁就增加 clear 样式
clear 属性常见的值有三个：
分别是left、right、both
当 clear 的值为 left 的时候，表示当前元素不受到左浮动的影响
当 right 表示当前元素不受到右浮动的影响。
当 both 表示当前元素既不受到左浮动影响也不受到右浮动影响。

CSS布局之定位

position属性指定了一个元素定位方式
它有五个不同的类型值：

static:静态定位
relative: 相对定位
fixed: 固定定位
absolute: 绝对定位
sticky: 粘性定位

给元素设置了position属性后
再使用 top、bottom、left 和 right 属性
对元素进行定位

.box {
    position: sticky;
    top: 100px;
    bottom: 10px;
    left: 20px;
    right: 5px;
}

相对定位

relative

position: relative 相对样式需要配合left、top、right、bottom这些定位属性才能生效。
relative 相对的是容器自身的屏幕坐标 0,0 点。
容器位置发生位移后,原来占据的空间依然保留。
默认会覆盖没有定位的容器。

.box2 {
    background-color: skyblue;
    /* 相对定位 */
    position: relative;
    left: 50px;
    top: 50px;
}

绝对定位

绝对定位的元素会脱离文档流。
绝对定位的参照点为,有定位设置的离他最近的祖先元素的 0,0 点坐标。
绝对定位的容器默认会覆盖没有定位的容器

绝对定位参照父元素和body定位

.box2 {
    /* 绝对定位 */
    position: absolute;
    left: 50px;
    top: 50px;
}

在这里
absolute 绝对的是容器自身的屏幕坐标 0,0 点。

可以改变其0,0点位置

.container {
    display: inline-block;
    margin-top: 100px;
    margin-left: 100px;
    position: relative;   #这里设置一个positon
}

static为静态定位，
设置position:static 无法改变坐标

固定定位

直接参照千古图文吧

懒得做笔记了

定位

CSS布局之定位的堆叠顺序

z-index属性：

表示谁压着谁。数值大的压盖住数值小的。

特性：

（1）属性值大的位于上层，属性值小的位于下层。

（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。

（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。

（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。

容器的堆叠顺序的计算，是先比较同级容器的。子容器是不会超出父容器的堆叠顺序的。