pixel: 像素
1.所设置的 width 和 height 只是内容区的
2.所设置的 background (也就是看见的) 为内容区和padding(内边距) 区的
3.所谓的盒模型=外边距(margin) + 边框(border) + 内边框(padding) + 内容区
4.<ul> 和 <ol> 默认上、下外边距为16px, 左内边距为40px
5.相邻的外边距会合并，以大为准
6.浮动元素不在文档中，任何元素都可浮动，浮动元素会变成一个块状元素
7.相对定位元素依然在文档流中，依然占据原始空间，相对本身定位。
伸缩项目的属性：
flex:弹性的
属性： flex-grow:扩展，成长，df(0)
flex-shrink：缩小 df(1)
flex-basis :基础的 df(auto)项目长度的起始数值
order:顺序,命令，订货 df(0) 数值越小，排列越靠前，
伸缩容器的属性：
flex-flow:流，流动。复合属性，有下方两个：
flex-direction:方向，设置伸缩项目在主轴上的排列方向，有4个值：
row:默认值，主轴为水平方向，起点在左端，
row-reverse:行反向，主轴为水平方向，起点为右端，
column：列， 主轴为垂直方向，起点为上沿，
column-reverse:列反向，主轴为垂直方向，起点为下沿。
flex-wrap:包装,设置伸缩容器为单行还是多行，默认项目排列在一行上。
若换行，多的一行不占据空间位置。
nowrap:默认值，不换行
wrap:换行，第一行在上方，
wrap-revers:换行，第一行在下方。
justify-content:整理版面-内容：定义项目在主轴上的对齐方式。
具体对齐方式与主轴有关，假设主轴为从左到右。
flex-start:默认值，左对齐
flex-end: 右对齐
center:居中
space-between; 两端对齐(靠墙)，项目之间间隔相等，
space-around:靠墙的项目靠墙距离相等，相邻项目之间的距离是其两倍
align-items:对齐-项目：定义项目在交叉轴上如何对齐。
对齐方式与交叉轴有关，假设交叉轴从上到到下：
flex-start:默认值：交叉轴的起点对齐
flex-end:交叉轴的重点对齐。
center: 交叉轴的中点对齐
baseline:(基线)项目的第一行的文字的基线对齐
stretch:(拉伸)默认值，如果项目未设置高度或设为 auto ,则将占满整个容器的高度。
后代选择器：用空格隔开每一层
交集选择器： 例：p.prap : 代表既是 p 标签 ，本身又是 prap 类
#paras.shi{} 是错误的， 因为 ID 是唯一的
并集选择器：用逗号分隔开：例 ： div,p,img{}
属性的继承：可以简化css 代码
盒子属性不可以继承，文字属性可以继承
文字属性 ：font-系列，color,line-系列，text-系列
盒子属性：width,height,background-系列，border-系列，浮动，定位
css 层叠性：
权重的比较：id选择器 > 类选择器 > 标签选择器
层叠性： 不同的选择器权重不一样，权重高的会层叠掉权重低的属性。
而在浏览器的控制台中可以看到被层叠掉的属性会被中间画线。
(一个 id = 255)
选中的样式属性看权重：
比较权重:先比较 id 选择器的 数量， 多的权重高。
若id 数量相同，就再比较 类 选择器的数量，多的权重高，
若 id 和 类 的数量的相同，就比较标签的数量，数量多的权重高，
若 id 和 类 和标签的数量相同， 就看谁写在后面，就显示谁的样式
没有选中的元素的 可继承的 样式属性看继承性：
都没有选中的元素，继承样式看html结构中的距离远近， 遵循就近原则， 最终继承的样式是距离最近的属性。
若距离相同，就再回归到比较权重。
《2》！important 加载属性值后面，分号前面。
选中元素时， ！important 的权重最高。
没选中元素，不影响就近原则
！important 只能提高一个属性的权重，不是选择器中的所有属性。
文字属性：
color : 文字颜色：
属性值： 单词表示法，十六进制表示法， RGB 表示法。
font-family :字体
font-size: 字号。
font-style； 文字是否倾斜：
font-weight: 文字加粗。
lien-height: 行高。一行文字实际占有的高度，在行高内文字垂直居中。
font 复合属性： italic bold 20px/200% “Microsoft yahei”
文本控制属性： text-align
text-indent:
text-decoration:去掉 a 标签的 下划线
盒模型：
width: 内容宽
height：内容高
盒子实际的高为 ： 内容 高 + 上下内边距 + 上下边框
盒子实际的宽为： 内容宽 + 左右内边距 + 左右边框
背景颜色渲染区域： 边框之内。
border: 用于制作表格。
border-collapse；塌陷 默认值为： separate:线会分开。
：collapse: 线会合并。
盒模型扩展：
1.清除默认样式：
例如： <body> , <ul> ,<p> , <dl>,<ol> 有默认的 padding 和 margin 值。
列表有 小圆点。 <a> 有 默认的下划线。都不是我们想要的。
写网页第一步就是清除默认样式。
用通配符选择器。因为效率低，现在可以用。实际工作用并集选择器，
宽度剩余法：在写网页时，左内边距是固定的，右侧根据内容的多少不固定右内边距，
直接给盒子一个足够的宽度，右侧自动剩余。
height: 写网页，一般新闻页面，内容是活的，所以高度 应设为不固定，让内容自动向下撑开盒子。
margin塌陷: 就是 相邻的盒子外边距会合并。以大的为准，小的margin 会塌陷在 大的 margin 里。
用户界面属性：box-sizing: 默认值为 content-box，表示padding和border
不被包含在 定义的width和 height 中。
值如果为：border-box, 表示padding 和border 被包含在 定义的 width 和 height 中。注意： 当 对称两边padding 和加上 对称两边border和大于 width 或者 height
时， width 或者是 height 将失去作用，以 padding 和 border 为准。
不可以用儿子去踹父亲：例如有两个 嵌套型 的 Div ，注意：单独指垂直方向。
想让儿子的颜色区域与父亲的颜色区域上方之间有一个间隔，
不可以直接 设置儿子的 margin-top 属性。这样会带着父亲距离 body 之间多少距离。
解决方法为; 1.设置父亲 border 属性。强制给父亲限制区域。
2.也是推荐的。 用父亲的 padding属性 去挤开 儿子
父子盒模型： 子盒子的最大占有宽度不能超过父盒子 的内容 区域宽，
当子盒子有内边距和边框时，需要注意子盒子的宽度內减。
不给盒子设置高度，盒子的高度根据内容自适应，刚好包裹内容。
居中： 1.单行文本的垂直居中，(行高等于盒子的高度)
2.文本水平居中， text-align:center.
3.多行文本的垂直居中。(不给盒子设置高度，给盒子设置上下 padding 来挤兑内容使其居中。)
盒子水平居中： 设置外边距 margin: 0 auto; auto:自动左右撑开相同大小的距离。
盒子垂直居中： 这时设置 auto 就不管用了。违反了不可用儿子踹父亲的原则 。
而这时就要用父亲的 padding 属性来挤兑儿子使其垂直方向居中。
标准文档流： 从上到下， 从左到右， 前米的文字变大或者图片变大，光标会下移。
从微观上说：1.文本类内容有空白折叠现象。(多个空格为一个，)
2.文本类的内容高矮不齐，底部对齐，
3.文本类内容超过盒子的宽度会自动换行。
块级标签和行内标签。
块级标签。 所有的容器级标签都是块级标签。 p 标签也是 块级标签。
h1,h2 --h6 ,ol,ul,li,div
行内标签：所有的文本类标签都是行内标签。（p标签除外）
span, 表单元素， a, b, i, u
块级元素特点：
1.独占一行，
2.块级元素可以设置宽高，
3.块级元素不设置 宽高， 会显示父盒子的宽度的 100%
行内元素的特点：
1.行内元素不独占一行， 会并排显示。
2.行内元素不能设置宽高，
3.行内元素的宽是由 内容 决定的。
块级元素和行内元素的转换：属性：display 值：none，block,inline, inline-block.
标准文档流不能制作精美的网页， 只有脱离标准文档流,(脱标)，才可以制作我们想要的网页。
脱标的方法： 浮动， 绝对定位， 固定定位，
浮动：让元素并排显示还能设置 宽和高。
float: 漂浮 属性： left, right.
浮动的元素会贴父盒子边显示。
浮动的性质：
1.浮动的元素脱离标准文档流，不再区分块级元素和行内元素，
可以让元素并排一行显示，还可设置宽高。
2.浮动的元素没有 margin 塌陷
3.浮动的元素依次贴边显示， 贴边有方向之分，看浮动的方向。
如果前一个盒子剩余的宽度不够，会再向前一个盒子的贴边。
不会钻盒子。
小盒子
双向贴边。02
4.浮动的元素让出标准流的位置。
两个同级的元素， 前一个元素左浮动， 后 一个元素不浮动，浮动的元素让出标准流的位置。
视觉上有一个压盖效果，(实际工作中我们不会用浮动做压盖效果，用定位做压盖效果较好。)
子围效果： 两个同级的元素，前面的盒子左浮动，后面的盒子不浮动， 不浮动的元素里面的文字
不会被压盖住，会在浮动的元素的周围显示。
清除浮动：
1.浮动的影响：
1.浮动的元素不能撑高 父 盒子
2.浮动的元素会影响 相同高度的行中的 后面的 浮动的 元素。
清除浮动的办法：
1.给父盒子加 高度。没有解决高度自适应。
2.给 被遭受 影响的父盒子添加 clear 属性：
属性值： left (清除左浮动元素的影响)
right(清除右浮动元素的影响)
both(清除左右浮动元素的影响)
3.隔墙法：
外墙法：给两个大盒子之间加一堵清除了浮动的墙，有高度的墙，没有解决高度自适应，
内墙法： 在两个大盒子的最底部加了一堵清除了浮动的墙，解决了高度自适应。
但在实际工作中也不推荐使用。因为了增加了很多无意义的标签，影响了
代码的加载速度以及可读性。
4.添加 overflow 属性(推荐)：溢出隐藏，
属性值：auto (默认的) ，盒子有高度若不设置此属性，文字将自动溢出显示。
margin显示，当文字超出盒子高度时，将自动添加垂直滚动条。
hidden: 当文字超出盒子高度时，文字自动隐藏，(隐藏的是border 边框外的文字)
给父盒子添加此属性 ，也可起到清除浮动的作用，并且可使父盒子 的高度自适应。
overflow: hidden 的作用：
1.强制我们的父盒子去检测他里面的子盒子的高度，让父盒子的高度等于子盒子的高度，
(以后只要看到让盒子高度自适应，就加 overflow:hidden )
2.强制我们的父盒子去检测他里面的浮动的元素， 管住它里面的浮动的元素不让他去影响别人。
(voerflow: hidden; 是我们解决浮动存在的问题的最好也是最简单的办法)
在实际工作中，
我们使用 overflow : hidden 解决浮动存在的问题：
可以在几个大的板块之间加一堵墙：分隔区域
3.特别注意 此属性和 盒子的 height 配合使用。如果父盒子有overflow:hidden属性
并且有 height 属性且 子盒子的高度超过了父盒子的高度， 则超过的隐藏。
a标签的 4 个伪类顺序不能颠倒，(a 伪类的权重相同，顺序颠倒了后面的会层叠掉前面的)，
但是可以不写全，伪类可以从 a 标签 继承样式， 一般我们会把 盒子属性给 a 标签，
书写， 文字颜色 和 背景颜色 给伪类 书写。
a 标签 不能从祖先 继承文字颜色和下划线， 需要 单独设置。
背景：background :复合属性
1.background-color:背景颜色
十六进制， 单词表示法， rgb 表示法， rgba 表示法：a 表示 透明度
背景颜色的渲染位置: border 以内，
2.background-image:背景图片
渲染位置 ： border 以内
background-image:url("wang/23.png");
注意： 背景颜色 和 背景图片可以同时设置。
3.background-repeat:重复模式
属性值：
repeat:重复 （默认值）
no-repeat :不重复
repeat-X： 在水平方向 （X轴）重复
repeat-y: 在 垂直方向 （y轴）重复
repeat-X：的应用：
制作渐变背景色，切 1px 宽度的图片，利用repeat-X进行重复。
4.background-position:背景图片 在整个背景图的位置。
像素表示法：（X的偏移，Y的偏移），
可以实现精灵图技术(Css sprite)。 接是 X 和 Y 的偏移是 负值 。
精灵图技术：
精灵图技术：我们知道 任何一张图片都会发起一次 http 请求，
我们的页面有很多小图片或者小图标，都会发起 http 请求。
这样就会降低网页的加载速度，这时我们可以把这些小图标
或者是小图片放在一张 图片上，利用宽度和高度 以及 背景位置得到
任意的 小图片,这就是精灵图技术。
单词表示法：(X轴，Y轴)：图片在容器中居于的位置。
X轴：left, right, center
Y轴：top, bottom , center
应用一：大背景居中
应用二：通栏大 banner(广告) 居中。
百分比表示法：拿水平百分比来说，是指图片的左边缘与容器的左边框之间的距离在
容器的宽度减去图片的宽度之差中所占的百分比。
百分数与像素的转换，
100%： 指 (大盒子的宽度 - 图片的宽度) * 100%
居中： background-position:50% 50%;
5.background-attechment: 背景是否 固定。
属性值：scroll :背景跟随页面滚动（默认的）
fixed:背景固定(背景不跟随页面滚动)
复合写法： background:blue url(2.png) no-repeat center top fixed;
注意： 其中的位置属性（center top）顺序不能写颠倒
四, 背景应用:
1.通常我们logo是用图片显示，但是需要写文字让文字隐藏，值显示图片，
用插入图片实现不了。
利用文本首行缩进和 行高 ，超过 a 标签的范围，进行文字隐藏。
1.设置文字的 text-indent 过大， 然后 overflow 为 hidden .
2.设置文字的line-height 过大，然后设置 overflow 为 hidden.
给 h1 内嵌一个 a 标签， 让 h1 的文字隐藏
给 h1 甜加 背景图， a 标签 添加文字描述。
2.用 padding挤出 背景图的位置。
定位(position)： 相对定位、绝对定位，固定定位
1.相对定位: 没有脱离文档流（形影分离）
正值表示以相对自身相反方向移动
负值表示以相对自身相同方向移动
应用：1.微调
2.相对定位作为 绝对定位的参考盒子(子绝父相)
2.绝对定位： 脱离文档流：参考最近的已定位的元素
1. 没有祖先元素参考的参考点。
1.有 top 的参与的情况，参考点是 页面的左上角（右上角）
2.有 bottom 参与的情况， 参考点是首屏的右下角（左下角）
首屏：用户第一眼见到的屏幕大小。
2.有祖先元素参考的定位参考点。
定位参考点是 border 以内。
参考的是：距离最近， 同时已定位的祖先元素。
3.用绝对定位制作压盖效果：
4.绝对定位的 居中 不能 用 margin: 0 auto ;不起作用。
第一步： left:50%; 表示： 左边框在相对定位容器中 左右居中
第二步： margin：-50px； 表示再往回拉自身 全部 宽度的一半。
5.轮播图：
呼吸轮播图：
滚动轮播图：
3.固定定位：position:fixed;
脱离标准流：参考点为浏览器的四个顶点。
四个方向值： left , right , top , bottom
应用： 1. 返回顶部 2. 固定导航栏
4. Z-index：属性：
一、默认压盖顺序。
1.有定位的元素会压盖住没有压盖住的元素。
2.都有定位，html 结构中后面的会压盖住前面的元素
二、自定义压盖顺序。
z-index属性值：数字， 没有单位。
1.只有定位元素可以加 z-index属性， 浮动的元素也不可以加 z-index 属性。
三、z-index 的应用：
轮播图：
浏览器的兼容性：
hack :黑客分类： html hack 和 css hack
html hack:
同一套代码 为了让不同的浏览器 的显示相同的效果，需要加 hack 处理浏览器的兼容性问题
<!--[if lt IE 9]>
<h3>你是低版本</h3>
<![endif]-->
低版本的浏览器显示：
其中的参数 ： lt ；小于该版本
lte:小于或者是等于该版本
gt；大于该版本。
gte；大于或者是等于该版本
html hack 表示满足条件能够认识这个 hack 并且渲染此 hack , 而不满足条件
会认为这个 hack 是注释。 不在页面渲染。
针对 IE 6 有固定的一个 hack :
<!--[if IE 6]>
<h3>这时 IE 6 浏览器才可以看见</h3>
<![endif]-->
表示只能 IE 6 浏览器可以看见里面的内容， 其他浏览器会认为是注释。
应用: 给 IE 6 添加特殊的一些样式或者 js 表示只有 IE 才可以加载。
浙公网安备 33010602011771号