10.8

9.26-10.24

1. 复习

1. 标签

(1) 需要大家记，单标签和双标签

(2) 性能上 块标签和行标签

(3) 标签的属性

1. Css

(1) 选择器，* 标签 class id 后代 子代 交集 并集 伪类 结构

(2) 层叠性 选择器权重的计算

① 选中和选不中 如果没有选中就是继承父级的样式，采用就近原则

选中的话就计算权重，谁的权重大就选谁，如果权重相同，后者会覆盖前者。

(3).继承性 样式的属性 font color text line-height

1. 排版

(1) Float

(2) Position

(3) 标准文档流:浏览器天生的一种排版方式，块独占一行，行可以并排排列。

打破标准文档流的方式有 float absolute fixed。

9.26

1. background-position  雪碧图

我们的html和css中有三个属性可以向服务器发送请求，src href url。

1. Overflow

(1) 值Hidden 超出就隐藏

(2) 值Scroll  出现滚动条

Visibility:hidden;  可见的 （消失但是占用位置）

Display:none;消失但不占用位置

为什么使用雪碧图？

因为我们使用雪碧图之后，本来需要多次请求的图片，我们一次就请求过来了，然后使用background-position调位置，从而减少了该页面向服务器请求的次数，间接的优化了该页面的性能。

9.27

1. 如何实现浏览器title中的小图标

 

我们需要借鉴link标签

Link标签的标签属性有哪些？ rel type href

Rel 是当前页面和url之间的关系  rel=”stylesheet” 

Type 是资源文件的mime类型  .html文件mime类型是text/html 图片的mime类型

Image/jpg(png/gif)  css的mime类型是text/css js的mime类型是text/javascript。

Mime类型，客户端和服务器之间的暗号，根据拓展名而定。

 

Title中的小图标就出来了，href这里不能写成 ./

2，Meta 元信息标签

分析里面的属性

,3，矢量图标 http://www.iconfont.cn/

阿里云矢量图库。

 

转义字符

空格的字符  

4.项目的完整目录

 

5.

textarea{

resize: none;

}

这个属性不让文本域被人为拉伸

6.

table{

 border-collapse: collapse;

}

这个属性让表格的边框变细

7.

Font的简写

 

8.

清除浮动的兼容性

清除浮动在低版本浏览器不行，需要处理兼容性

加一个.clearfix{*zoom:1;}

9.光标的形状

cursor 光标属性值有 pointer 抓手，指针 wait help

1. rgb 和rgba和opacity

Rgb()颜色的表示方法值是0-255如background:rgb(12,15,16);

Opacity表示透明度 值是0-1；

 

Rgba() r是red 0-255 g是green 值是0-255 b是blue值是0-255 a是opacity值是0-1；

但是ie低版本不支持。

 

Rgb和opacity  与rgba的区别？

前者的内容也跟着透明，后者的内容不跟着透明。内容包含图片和文字。

9.28

1.transparent  透明的

2.placeholder  提示语

写页面

1. 搞清结构层次，
2. 保证模块化，让他们之间不能受到影响

(1) 元素性质

(2) 标准流

浮动带来的脱离文档流撑不起父级的高度的问题可以采用清除浮动的方式消除影响，absolute和fixed带来的脱离文档流撑不起父级的高度，使用子元素设置高强制撑起父级。

9.29

1. css可以继承的属性有哪些？

Font 系列 text系列 color line-height

1. border-radius的值的问题

 

四个值的顺序是 左上 右上 右下 左下。

1. white-space 规定段落中的文本换不换行 往往值是nowrap 不换行
2. Word-wrap 属性允许长的内容可以自动换行  属性值是 break-word 允许 默认是不允许
3. 写三角形

 

宽高必须是0

1. margin对布局的影响  双飞翼布局 圣杯布局 （）

 

Margin是 外边距，属性值是数字 数字又分正负。

正数：margin：20px；

负数：在static元素中（标准流下）margin-left为负数当前元素向左走 margin-top为负当前元素向上走

Margin-bottom为负数后当前元素不动后面的元素向上走，margin-right为负数当前元素不动后面的元素向左走

注意的，margin为负会增大当前元素的宽（前提是当前元素没有设置width）

场景

 

 给ul一个margin-right 就无形之中给ul加了20px宽度。

 

 

在float下

Margin为负 也是我们常用的双飞翼，圣杯布局

中间自适应 两端固定

给元素margin-left为负当前元素向左走，margin-right为负后一个元素向左走会覆盖当前元素。

在absolute下

Margin为负

让元素居中，前提是知道元素的宽高。

div{

Position：absolute；

Left：50%；

Top：50%；

Margin-left:-width/2;

Margin-top:-height/2

}

Margin为负无论在什么条件下都是释放自己的空间，如果自己的margin不够，就把自己的宽高贡献出去。

转载于:https://www.cnblogs.com/aaaaap/p/9764776.html