- 网页分为几种表现形式： 视图层（html层） 表现层（css层，层叠样式表） 行为层（js）
- css的相关知识
2-1css作用： 对html元素的位置和精确计算像素，外观，字体,框架结构等等，
2-2 css特点： 1>丰富的样式定义 2>易于使用和修改 3>多页面使用 4>可层叠（一个元素可具有多个css样式) 5>页面压缩 （尽量多次复用同样的css，减小css文件体积，提高网页性能）
2-3css样式属性写法： 属性：值； - css几种使用方式：元素设置宽高的时候 块级元素可设，行级元素不可、
样式分为：单属性/复合属性样式
3-1行内样式 （在元素标签上的style属性上直接写css）<div style="border-left-width: 10px;border-left-style: dashed;border-left-color: blue; width: 100px; height: 100px;"><div style="background: red url('./image/0.jpg') no-repeat==不平埔== 0 0; background-size: 100px;width: 200px; height: 200px;">
3-2内嵌样式 ，head和body里面都可以进行内嵌 (在网页里（head/body标签之内去写 )
<style type="text/css">// type=“text/css” 可以省略不写
内嵌样式的写法是：某个东西{}
编译之后格式：
{
当前页面多少行代码
border: 1px solid red;
}
3-3外部样式表 （css写在外部的css文件里面，网页直接调用使用）
- 内嵌样式里面的css选择器：先定位到当前元素 写css
css 注释 ctrl+shift+/
4-1 *匹配器 ： 匹配当前网页里面的所有元素
4-2 元素匹配器 ： 根据当前元素的名称来匹配，当前网页所有同名元素，比如button
4-3 class类名称匹配器 ： 根据元素的class属性名称来匹配 == 用点来匹配== 元素种的一部分 （一个元素可能同时具有多个类）
<button class="btn btnsub">按钮</button>
<button>按钮</button>
<button class="btn">按钮</button>
<div class="btn">
我是div
</div>
4-4id名称匹配：根据当前元素的id属性来匹配 ，（一个元素一个 ，不重名），使用#来选择
#userID{
width: 200px;
height: 30px;
}（id可以重复，建议不这写）
4-5组合选择器：
4-5-1子父关系选择器： 空格选择（指匹配当前元素里面的所有后代元素）和>选择(指匹配当前元素里面的直接子元素,只有儿子辈，孙子辈没有)
ul li{
color: red;
}
#menu>li{
border: 1px solid red;
}
4-5-2写的时候也可以根据不同元素区分class和id
button.navinfo{
border: 1px solid blue;
color: red;
}
ul#menu{
}
4-5-3 相邻元素选择器 ： +(匹配当前元素之后紧跟的id名称或元素名称) 和 ~（匹配当前元素之后的所有元素），指的是同级元素匹配
.p1+p{
color: red;
}
.p1~p{
color: red;
}
4-6子集选择器(css2里面的伪类选择器)：
4-6-1
.box>p:nth-child(1){
}//里面的数字是按照序号数，先找一个子集，再找子集中的某一个
4-6-2下面这两个选择器直接找的是子集里面的第一个或者最后一个
.box>p:first-child{
color: red;
}
.box>p:last-child{
color: red;
}
4-6-3上面这两个伪类选择器也可以直接写元素匹配
p:first-child{
color: red;
}
p:last-child{
color: red;
}
p:nth-child(3){
color: red;
}
4-7属性选择器：根据元素的属性去匹配元素的。基本写法是：匹配器[属性]{}
button[type]{
color: red;
}
1>多个属性匹配
button[type][class]{
color: red;
}
2>根据属性值来匹配
button[class=info][type=button]{
color: red;
}
3>值是以谁开头shift+6或者以谁结尾==$(包含那个字母*==)
button[class^=a]{
color: red;
}
4-8分组选择器
button,p,span{
//逗号这种写法叫分组
color: red;
}
/* .btn,#id,button{
}*/
div>#menu,ul>li.info{
}
- 外部样式的使用：在外部建立css文件，里面新建stylesheet，引入到网页里面，引入位置在heade或者body里面都可以，外部样式的写法和内嵌样式的写法一致（都是选择器）。
引入方式：rel=“stylesheet” 是css解析方案，按照stylesheet的方式解析 type=“text/css” 可以省略不写
<link rel="stylesheet" href="./css/index.css" type="text/css"/>
- .css三大样式之间的优先级：
6-1三大样式之间如果存在冲突 时： 行内样式>内嵌样式>外部样式；若加载css的顺序就有关，（行内样式>外部样式>内嵌样式）；三大样式之间 如果样式不冲突 则叠加
6-2 选择器之间的优先级（只考虑内嵌和外部样式存在： 四个基本选择器之间的优先级，id（#类的）>class（类）>ele（元素)>星号(所有元素，范围大)
6-3组合选择器里面的优先级：同匹配方案，牵扯到父级（有父级父级的高，同元素同名称之间组合的大于自身的优先级）； 如果样式优先级不足（但是必须使用怎么弄）时提高样式优先级：！important ， 这时优先级最高。 - css里面的盒子模型， 用来设计和布局的时候使用，包括：边距 边框 填充 实际内容， 一个简单的元素就可以构成盒子模型
7-1 浏览器给网页body元素默认一个margin外间距值 8px， 一般加入：
*{
margin: 0;
padding: 0;//去掉所有元素的外间距和内间距值
}
7-2 外间距属性：
7-2-1 margin-left: 50px;
margin-top: 50px;
margin-right: 50px;//如果既有左又有右是靠左走，因为不可能拉大
margin-bottom: 50px;
7-2-2margin: 0 10px 20px 30px;//上右下左
margin: 0px 10px 20px;//上右下 ，左=右
margin: 0px 10px;//上下 ， 左右
margin:0;//上写左右（0像素可以不写单位）
7-3 内间距属性：
7-3-1 padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
7-3-2 padding: 0 10px 20px 30px;
padding: 0px 10px 20px;
padding: 0px 10px;
padding:0;
7-4boxing-sizing：border-box；inherit(当前元素的这个属性值继承父元素的这个属性值）：content-box//
.box>span{
display: inherit;
}
- css里面块级元素和行级元素相互转化的问题：
8-1使用的属性是 display:block（转化块级）；display:inline-block(转化行级块不换行但是是块级元素，两个行级快之间的外间距会叠加) ;display:inline（转化行级）;
8-2两个盒子上下放置，设置外间距： 两个容器间的间距不会叠加，而是取两个里面间距的最大值
BFC：是指元素相对独立，自身的结构和位置不会影响周边元素， 只要元素满足下面任一条件即可触发 BFC 特性：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
普通流（正常文档流）的BFC： 块元素上下结构如果属域同一个BFC，这两个元素之间的外间距会重叠；如果将另一个元素用其他元素包裹设置父元素样式（ overflow: hidden; //超出背景层 ）会构建为另一个BFC， 这样的两个上下元素之间的间距会叠加 ，不会重叠
9. css里面的伪类
9-1常用的伪类：
:hover 悬停伪类
:active 激活伪类
:checked 选择伪类 （ 主要使用 radio 单选按钮 ，checkbox复选框）
:focus 获得焦点伪类（ input表单元素）
9-2 一般使用下面这两个伪类来做css特效：
:after 给元素的内容之后追加内容
:before 给元素的内容之前追加内容
a:link{
color: red;//未被访问之前的伪类
}
a:visited{
color: yallow;//鼠标访问后的伪类(不要写最后会把之前的效果覆盖)
}
a:hover{
color: blue;//鼠标悬停伪类
}
a:active{
color: orange;//鼠标激活时伪类
}
.ckbox:checked+span{
color: red;//勾选上变红
}
.idcard:focus{
color: red;//输入框里面的字变红
}
下面这两是可用和不可用的伪类：表单元素添加disabled 为不可用，不添加为可用
input:disabled{
color: blue;//输入框不能输入
}
input:enabled{
color: green;
}
一般使用下面这两个伪类来做css特效
.fontbox:after{
content: "";//演示了做聊天气泡
}
.fontbox:before{
content: "";
}
- css里面的尺寸
width height max-width min-width max-height min-height line-height
line-height: 100px; 属性设置一行的高度 （如果是单行文本可以做单行文本相对父容器垂直居中）
.box{
width: 300px;
max-width: 200px;//适用于宽度auto
min-width: 70px;
height: 100px;
min-height: 50px;//适用于高度auto
max-height: 200px;
border: 1px solid red;
line-height: 100px;//行高，要考虑容器的总高度
text-align: inherit;
}
- css里面的文本对齐方式
text-align: inherit; left center right end start inherit(继承父容器的对齐方式) - css里的像素单位：
px(固定单位像素) ，相对于屏幕
rem 相对根（html）节点 ， 如果给html设置字体大小16px 1rem =16px;
em 相对像素， 如果父元素没有设置字体大小，相对浏览器走默认像素， 如果父容器设置字体大小， 走相对父容的字体大小
%（百分比 ，相对父容器走百分比） - input表单元素的轮廓
input {
outline: none;//去掉轮廓
/*outline-color: red;//轮廓是红色
outline-width: 2px;
outline-style: dashed;
outline-offset: 10px;*/ //轮廓偏移
}
总结：1. css里面的注释是ctrl+shift+/
2. 复合属性：
2-1background: red url(’./image/0.jpg’) no-repeat 0 0; 复合上面不写size
2-2background-color: #f9fdff;
background-image:url(’./image/0.jpg’);
background-size: cover;
background-repeat: no-repeat;
2-3 background-position:50px;//背景图片相对于父元素的位置，两个值都一样写一个值
2-1background-position-x: 50px;
background-position-y: 50px;
2-5 border边框复合样式：
边框统一样式border:1px solid red;
边框四条线拆开写，border-left:1px solid red;
边框左边框分开写 border-left-width: 10px;
border-left-style: dashed;//虚线
border-left-color: blue;
2-6border-top:1px solid blue;
border-bottom: 1px solid orange;
border-right: 1px solid pink;
3.字体样式：
font-size: 14px; 浏览器默认字体是14px, 这个用css默认的值//字体大小
font-family: serif; 设置字体的 css默认的有几个字体//字体样式。一般要自己导入 自定义字体:需要自己导入字体文件： @font-face（搜索字体文件下载eut，ttf文件类型）
4.关于#的用法：3-1 a链接里，#代表跳转当前页面，#menu指跳转当前页面的锚标
3-2 选择器里的#指使用id选择器
5.BFC再看看，好难