一、网页的几种表现形式

视图层（html层）表现层（css层）行为层（js）

二、表现层（css ：层叠样式表）

1. css作用：

对html元素的位置和精确计算像素，外观，字体等等，

2. css特点：

- 丰富的样式定义 - 易于使用和修改 - 多页面使用 - 可层叠（一个元素可具有多个css样式） - 页面压缩 （尽量多次复用同样的css，减小css文件体积，提高网页 性能）

3. css样式属性写法**：

属性：值；

三、css几种使用方式：

元素设置宽高的时候 块级元素可设，行级元素设置宽高属性是无效的。

1.行内样式

在元素标签上的style属性上直接写css在浏览器上的位置在 element（元素）.style { background: red; }

2.内嵌样式

在网页里面任意位置（head/body标签之内去写< style >内部写css< /style>) <style type="text/css"> type="text/css" 可以省略不写 </style> 内嵌样式的写法 ele{ } 编译之后格式： * { （有当前页面多少行代码） border: 1px solid red; }

3.外部样式表

css写在外部的css文件里面，网页直接调用使用样式分为：单属性样式和复合属性样式复合属性 background: red url('./image/0.jpg') no-repeat 0 0; border:1px solid red; 复合上面不能写size，大小只能分开写 单属性 background-color: #f9fdff; 设置背景颜色 background-image:url('./image/0.jpg'); 设置背景图片 background-size:cover; 设置背景图片大小，cover auto background-repeat: no-repeat; 设置图片是否平铺 background-position:50px; background-position-x: 50px; background-position-y: 50px; border-left: 1px solid red; border-top:1px solid blue; border-bottom:1px solid orange; border-right: 1px solid pink; border-left-width:10px; border-left-style: dashed; border-left-color: blue; [1]背景属性加了背景图片时就不需要再设置背景颜色了，因为背景图片会覆盖背景颜色，设置也是无效的。 background-size: cover（整张覆盖） auto(自动 默认) contain（包含） >percentage（设置百分比） length（设置宽高） background-size: 50px 设置宽高都为50px background-size: 50px 100px 设置宽为50px,高为100px background-repeat: no-repeat 设置背景图片不平铺 background-repeat: repeat-x 设置背景图片横向平铺 background-repeat: repeat-y 设置背景图片纵向平铺 background-position: 0 0 背景图片的坐标 background-position-x: 50 图片到左边的距离为50 background-position-y: 50 图片到上边的距离为50 [2] 字体属性 font-size：设置文字大小，浏览器默认字体是14px, 这个用css默认的值 font-family：设置字体，css默认的有几个字体，也可以自己 自定义字体，但是需要自己导入字体文件：@font-face

四、内嵌样式里面的css选择器

head和body里面都可以进行内嵌先定位到当前元素，再写csscss 注释 ctrl+shift+/

五、css选择器

1. *匹配器：匹配当前网页里面的所有元素

2. 元素匹配器**：根据当前元素的名称来匹配

3. class类名称匹配器**：根据元素的class属性名称来匹配，用点来匹配 元素种的一部分 （一个元素可能同时具有多个类）

<button class="btn btnsub">按钮</button> <button>按钮</button> <button class="btn">按钮</button> <div class="btn"> 我是div </div>

4. id名称匹配器**: 根据当前元素的id属性来匹配（一个元素一个，不重名） 使用#来选择

#userID{ width: 200px; height: 30px; } （id可以重复，建议不这写）

六、组合选择器

1. 子父关系选择器**：

空格选择器 ul li{ color: red; } 备注：空格选择器：指匹配当前元素里面的所有后代元素

2. >选择器**

#menu>li{ border: 1px solid red; } 备注：>选择器：指匹配当前元素里面的直接子元素写的时候也可以根据元素区分class和id button.navinfo{ border: 1px solid blue; color: red; } ul#menu{ }

3. 相邻元素选择器**

+(匹配当前元素之后紧跟的元素)~（匹配当前元素之后的所有元素） 指的是同级元素匹配 .p1+p{ color: red; } .p1~p{ color: red; } <div class="box"> <p class="p1">p1</p> <span>我是span标签</span> <p>p2</p> <p>p3</p> <p>p4</p> <p>p5</p> </div>

七、子集选择器(css2里面的伪类选择器)

[1] 里面的数字是按照序号数 .box>p:nth-child(1){ } [2] 下面这两个选择器直接找的是子集里面的第一个或者最后一个 .box>p:first-child{ color: red; } .box>p:last-child{ color: red; } <div class="box"> <p class="p1">p1</p> <span>我是span标签</span> <p>p2</p> <p>p3</p> <p>p4</p> <p>p5</p> </div> [3] 上面这三个伪类选择器 可以直接写元素匹配 p:first-child{ color: red; } p:last-child{ color: red; } p:nth-child(3){ color: red; } <div class="box"> <p class="p1">p1</p> <span>我是span标签</span> <p>p2</p> <p>p3</p> <p>p4</p> <p>p5</p> </div>

八、属性选择器

[1] 根据元素的属性去匹配元素 写法是：匹配器[属性]{} button[type]{ color: red; } [2] 多个属性匹配 button[type][class]{ color: red; } [3] 根据属性值来匹配 button[class=info][type=button]{ color: red; } [4] 根据属性值来匹配: 值是以谁开头或者以谁结尾，包含那个字母 button[class^=a]{ (以a开头) color: red; } button[class$=m]{ (以m结尾） color: red; } button[class*=f]{ (包含f） color: red; }

九、分组选择器

button,p,span{ color: red; } .btn,#id,button{ } div>#menu,ul>li.info{ }

十、外部样式

[1] 在外部建立css文件，引入到网页里面[2] 引入位置在heade或者body里面都可以[3] 外部样式的写法和内嵌样式的写法一致（都是选择器） 引入方式： <link rel="stylesheet" href="./css/index.css" type="text/css"/> rel=“stylesheet” ---------css的解析方式href="./css/index.css"-------------解析路径type=“text/css” ------- 可以省略不写

十一、css三大样式之间的优先级

1.优先级：

[1] 三大样式之间如果存在冲突：行内样式>内嵌样式>外部样式（行内样式>外部样式>内嵌样式）-----------跟加载css的顺序就有关[2] 三大样式之间如果样式不冲突，则叠加

2. 选择器之间的优先级（内嵌、外部样式存在）

[1] 四个基本选择器之间的优先级： id>class>ele>*[1] 组合选择器里面的优先级： 如果是用元素匹配器在写，那么子父关系里面元素匹配器的优先级大于自身的优先级；元素匹配器里，如果只是元素在写，那么优先级就是它自身的类大；如果是带父级，子父关系组合里面的类的优先级一定比自身的优先级大id比这些的优先级都大，但是子父关系里面的id会大于id的优先级同元素、同名称，如果牵扯到组合的，组合的优先级一定大于它自身的优先级同匹配方案 牵扯到父级（父级的优先级高）提高样式优先级：！important 提高的比行内样式优先级还高

十二、css里面的盒子模型

[1] 作用：用来设计和布局的时候使用[2] 包括：边距 边框 填充 实际内容[3] 一个简单的元素就可以构成盒子模型[4] 浏览器给网页body元素默认一个margin外间距值 8px 一般加入： *{ margin: 0; padding: 0; } [5] 外间距属性写法： margin-left: 50px; margin-top: 50px; margin-right: 50px; margin-bottom: 50px; margin: 0 10px 20px 30px;（上、右、下、左） margin: 0px10px 20px;（上、左右、下） margin: 0px 10px;（上下、左右） margin:0;（上下左右） [6] 内间距属性写法： padding-left: 20px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding: 0 10px 20px 30px;（上、右、下、左） padding:0px 10px 20px;（上、左右、下） padding: 0px 10px;（上下、左右） padding:0;（上下左右） [7] 盒子格式 box-sizing: content-box; 正常的盒子模型是往外走，内容区域不变，把盒子撑大 box-sizing: box-sizing: border-box 盒子往里面陷，内容区域变小，盒子大小不变 [8] css样式属性值里面inherit 当前元素的这个属性值继承父元素的这个属性值 .box>span{ display: inherit; } [9] css里面块级元素和行级元素相互转化 使用display:block;（转化块级）display:inline-block;(转化行级块：转化为块级元素，但是他不换行）display:inline;（转化行级） 两个盒子上下放置，设置外间距：两个容器间的间距不会叠加，而是取两个里面间距的最大值如果是两个行级块，那么他们之间的外间距会叠加[10] BFC：是指元素相对独立，自身的结构和位置不会影响周边元素参考文档 https://blog.csdn.net/sinat_36422236/article/details/88763187，https://zhuanlan.zhihu.com/p/25321647 [11] 只要元素满足下面任一条件即可触发 BFC 特性： body 根元素浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed)display 为 inline-block、table-cells、flexoverflow 除了 visible 以外的值 (hidden、auto、scroll) [11] 普通流的BFC： 块元素上下结构如果属域同一个BFC，这两个元素之间的外间距会重叠 如果将另一个元素用其他元素包裹设置父元素样式 overflow: hidden; 会构建为另一个BFC，这样的两个上下元素之间的间距会叠加 不会重叠

十三、css里面的伪类

[1] :hover 悬停伪类[2] :active 激活伪类[3] :checked 选择伪类 主要使用 radio checkbox[4] :focus 获得焦点伪类 input表单元素[5] 一般使用下面这两个伪类来做css特效[6] :after 给元素的内容之后追加内容[7] :before 给元素的内容之前追加内容 a:hover{ color: blue; } a:active{ color: orange; } .ckbox:checked+span{ color: red; } .idcard:focus{ color: red; } [8] 下面这两个是可用和不可用的伪类，表单元素添加disabled 为不可用，不添加可用 input:disabled{ color: blue; } input:enabled{ color: green; } .fontbox:after{ content: ""; } .fontbox:before{ content: ""; }

十四、css里面的尺寸

[1] width height max-width min-width max-height min-height line-height[2] line-height: 100px：属性设置一行的高度 如果是单行文本，当line-height的值与height的值相同时，可以做单行文本相对父容器垂直居中。

十五、css里面的文本对齐方式

text-align:left center right inherit

十六、css里面的像素单位

[1] px(固定单位像素) rem em %（百分比 相对父容器走百分比）[2] rem 相对根节点 如果给html设置字体大小16px 1rem =16px;[3] em 相对像素 如果父元素没有设置字体大小，相对浏览器走默认像 （如果父容器设置字体大小， 相对父容的字体大小）

十七、input表单元素的轮廓

input { outline: none; -------------------去掉轮廓 outline-color: red;---------------设置轮廓颜色 outline-width: 2px;--------------设置轮廓宽度 outline-style: dashed;----------设置轮廓样式 outline-offset: 10px;------------设置轮廓偏移 }

十八、盒子超出隐藏属性​​​