【3月3日没上传笔记+3月4日笔记】

【github上传出错了，先发了笔记，然后再调git】

今日完成：静态页面一张，Github客户端跪了，改日再补(ife-css-task7)

明日计划：你以为我又要日夜不停coding?NONONO~明天周末，我要去看望奶奶~

          那就顺手带本书书看吧，最近CODE有点多，越来越觉得基础不够不够的

          很多情况曾经都见过，但是给忘了，需要巩固一下啦~

今日不足：学习时间打折了，没有达到目标要求。。

          git没了客户端还真不会用了-。-我得去学学怎么用命令玩儿git...

          页面内容多的时候最后面的class命名会乱=。=而且偶尔偷下懒少些几个字导致局部样式变成全局样式，调的时间又得华好久=。=

今日收获：【笔记部分】

先说三句话：

1.遇到问题先度娘；（中文页面多=、=实际上初级部分不需要找国外大神的资料哦~）

2.某些神奇的博客里面或许能解决好多奇奇怪怪的问题=。=（如张鑫旭博客里的CSS部分）

3.HangOn，coding这种事儿，唯手熟尔~

【1.input内文字设置为只读不可编辑】

方法1: onfocus=this.blur() 当鼠标放不上就离开焦点

<input type="text" name="input1" value="中国" onfocus=this.blur()> 

方法2:readonly 

<input type="text" name="input1" value="中国" readonly> 

<input type="text" name="input1" value="中国" readonly="true"> 

方法3: disabled 

<input type="text" name="input1" value="中国" disabled="true">

注意：

disabled="true" 此果文字会变成灰色，不可编辑。 

readOnly="true" 文字不会变色，也是不可编辑的

css屏蔽输入：<input style="ime-mode: disabled"> 

有两种方法第一：disabled="disabled"这样定义之后被禁用的 input 元素既不可用，也不可点击。第二：readonly="readonly" 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本； 

【2.背景色透明度(a取值0~1)】

.box{

background-color: rgba(123，,132,123,0.5);

}

【3.上中下划线，闪烁（没见过=。=）】

h1 {text-decoration:overline}

h2 {text-decoration:line-through}

h3 {text-decoration:underline}

h4 {text-decoration:blink}

【4.斜体OR倾斜，卧槽 一直以来只知道斜体=。=】

italic 浏览器会显示一个斜体的字体样式。

oblique 浏览器会显示一个倾斜的字体样式。

inherit 规定应该从父元素继承字体样式。

.text{

font-style:normal;

font-style: italic;

font-style:oblique;

font-style:inherit;

}

【5.字符间距】

letter-spacing定义了字与字之间的距离. 

word-spacing是控制字与字之间空格的宽度. 

.text{

word-spacing:10px;

letter-spacing:10px;

}

【6.背景图片定位三种方法(background: x,y)】

.bg{

background-position: left top;

background-position: 10px 20px;

background-position: 10% 20%;

}

【7.光标变换手指,cursor属性的值类型很多】

.box{ ursor: pointer;}

【8.关于z-index】

只对position定位生效，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

【9.select中不能使用占位符placeholder，模拟占位符小技巧：】

把需要占位的option设置为 [不可选][默认选中][展开隐藏]：

<option value="" disabled selected hidden>Please Choose</option> 

【10.绝对定位层遮挡无法点击下层对象解决办法】

pointer-events:none;

如果层内元素需要点击，需要给层内元素添加

pointer-events:auto;

【11.<textarea>使用placeholder时不显示的情况】

原因：<textarea placeholder="AAABBB"> </textarea>标签中间多了个空格或者换行；

解决办法：去掉空格跟换行即可；

【12.CSS绘制三角形，通过border的边框折角+透明色绘制：】

.triangle {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid green;

}