html与css的那些杂事儿

css属性

1. outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
2. font: font-style | font-variant | font-weight | font-size | font-family
3. cursor 属性规定要显示的光标的类型（形状）
   光标w3c
4. background
   • background-color | background-image | background-repeat | background-attachment | background-position
   • background-size
   • background-origin 背景图片起始位置 默认从内边距开始 padding-box content-box border-box
   • background-clip 背景起始位置
   • 可以设置多张背景图片，以逗号隔开
5. box-sizing
   • 属性允许您以特定的方式定义匹配某个区域的特定元素
   • content-box（默认）
   • border-box
     • 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
     • 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

flex布局

1. 要沿主轴对齐弹性项目，有一个属性：justify-content
2. 要沿十字轴对齐弹性项目，需要三个属性：align-content、align-items、align-self

2d转换模块

1.transform
- 旋转 rotate（45deg）
- rotateX/Y/Z
- 平移 translate:（100px，50px）
- 缩放 scale（1.5，1.5）
- 空格隔开

• transform-origin:0px（10％ left）,0px
• 透视 prospective: 100px
  • 距离多远观察元素
  • 添加到父元素上
• 阴影
  • box-shadow
  • 元素阴影（顺序）
    • 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色（默认和内容颜色color一样） 内外阴影
    • 1px 1px 1px 1px red inside
  • 文字阴影
    • 水平 垂直 模糊度 颜色

动画模块

• animate： 动画名称 动画时长 动画运动速度 延迟 几次 往返
• animate-name：名字
• animate-duration：
• @keyframes 名字{ from{ } to{ }} / {0%{} 100%{} }
• animate-delay
• animate-time-function
• animate-direction 是否做往返 normal alternate
• animate-iteration-count 做几次动画 infinite
• animate-play-state： 动画状态 running paused
• animate-fill-mode：开始状态和等待状态的样式 none forwards backwards both

过渡模块

1. transition:width 5s linear 5s
   不同属性逗号隔开
   可以简写两个
2. transition-property:width，color
   哪个属性执行过渡模块
3. transition-duration:5s，5s
   持续时长
4. transition-timing-function
   • linear
   • ease
   • ease-in
   • ease-out
   • ease-in-out
5. transition-delay:2s
   延迟

定位

1. absolute
   • 在相同位置，同样定位，哪个元素dom位置靠后，哪个元素在上面
   • 如果top和bottom一同存在的话，那么只有top生效。 如果left和right一同存在的话，那么只有left生效。
   • 忽略父元素的padding，从内边框开始定位
   • 不区分行级块级元素
   • 会找离元素 最近的 也是定位流（相对定位 绝对定位……）祖先元素作为参考点
   • 水平居中:
     left:50％
     margin—left:（负的宽度一半）
     2.relative
   • 上下方向只能用一个，左右方向只能用一个
   • 区分行级块级元素
2. fixed
   • 脱离文档流
3. 子绝父相
4. z—index
   • 子元素听父元素，父元素设置子元素失效
   • 只对定位流有效（position）
   • z-index:0 的会创建一个新的层叠上下文，auto不会
   • z-index:auto所在的div元素是一个普通定位元素，于是他们的子级层叠比较就不受父级影响
   • z-index一旦变成数值，哪怕是0，就会创建一个层叠上下文，此时层叠规则就发生了变化，层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中

影响层叠上下文的除了定位还有：

• 元素为flex布局元素（父元素display:flex|inline-flex），同时z-index值不为auto
• 元素的opacity值不是1
• 元素transform值不是none
• 元素的filter值不是none

stacking context 层叠上下文

css选择器

1. 行内样式>内嵌样式
2. style标签>id>class

伪类、伪元素

• 加上display: block;将伪元素变成块级元素才能设置宽高
• 单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素

1. 伪元素
   • 是对元素中的特定内容进行操作，而不是描述状态
     • :first-letter 选择元素文本的第一个字（母）。
     • :first-line 选择元素文本的第一行。
     • :before 在元素内容的最前面添加新内容。
     • :after在元素内容的最后面添加新内容。
   • 伪类包含两种：状态伪类和结构性伪类
   • 状态伪类
     • a标签的伪类选择器（有顺序）
       • :link
       • :visited
       • :hover
       • :active
       • :focus 应用于拥有键盘输入焦点的元素。
   • 结构性伪类
     • :first-child 选择某个元素的第一个子元素；
     • :last-child 选择某个元素的最后一个子元素；
     • :nth-child() 选择某个元素的一个或多个特定的子元素；
     • :nth-child(n)选择器匹配属于其父元素的第 N 个子元素，不论元素的类型
     • :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
     • :nth-of-type()选择指定的元素；
     • :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
     • :first-of-type选择一个上级元素下的第一个同类子元素；
     • :last-of-type 选择一个上级元素的最后一个同类子元素；
     • :only-child 选择的元素是它的父元素的唯一一个子元素；
     • :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
     • :empty 选择的元素里面没有任何内容。

html标签

1. • target
     规定在何处打开 action URL。
     值：_blank _self _parent _top framename
   • accept-charset
     规定服务器可处理的表单数据字符集。
   • enctype
     规定在发送表单数据之前如何对其进行编码。
     可能的值：
     • application/x-www-form-urlencoded
     • multipart/form-data
     • text/plain
   • method
     规定用于发送 form-data 的 HTTP 方法。
   • novalidate
     如果使用该属性，则提交表单时不进行验证。
     值： novalidate
2. • 组合表单中的相关元素：
     
     标签为 fieldset 元素定义标题。
3. • 标签为 input 元素定义标注（标记）。
   • label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
   • 如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
   • 标签的 for 属性应当与相关元素的 id 属性相同。

块级和行级元素

1. 块级元素:

   • ul li form p pre section
   • 能宽高
   • margin padding上下左右都有效
   • 自动换行
   • 多个块级，默认从上到下排列

2. 行内元素

   • a span
   • 宽高无效
   • 不自动换行
   • margin左右有效，上下无效，padding上下左右都有效
   • 不会自动换行

3. 行内块级元素 （inline—block）

   • img input button textarea

4. 兼容性:*zoom＝1 （ie6）

5. position: absolute /float 行内元素可以设置宽高

name、class和id

1. name：指定标签的名称。
   • 作用
   • name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
   • 作为转递给服务器表单列表的变量名；如上面的传到服务器的名称为：username=‘text的值’
   • input type='radio’单选标签：把几个单选标签的 name设为一个相同值时，将会进行单选操作。
   • js中快速获取一组name相同的标签：获取拥有相同name的标签，一起进行操作，如:更改属性、注册事件等
   • 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
2. id：指定标签的唯一标识
   • 根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)
   • 用于充当label标签for属性的值：示例：用户名：，表示单击此label标签时，id为userid的标签获得焦点
3. class：指定标签的类名。
   • CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类

处理断句和空白

1. white-space 属性设置如何处理元素内的空白
   white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;

   • normal默认。空白会被浏览器忽略。
   • pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
   • nowrap文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
   • pre-wrap 保留空白符序列，但是正常地进行换行。
   • pre-line 合并空白符序列，但是保留换行符。
   • inherit 规定应该从父元素继承 white-space 属性的值。

2. word-wrap 属性用来标明是否允许浏览器在单词内进行断句
   word-wrap: normal|break-word;

   • normal: 只在允许的断字点换行(浏览器保持默认处理)
   • break-word:在长单词或URL地址内部进行换行，/内容将在边界内换行。如果需要，单词内部允许断行。/

3. word-break 属性用来标明怎么样进行单词内的断句
   word-break: normal|break-all|keep-all;

   • normal：使用浏览器默认的换行规则。
   • break-all:允许在单词内换行 ， 允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。
   • keep-all:只能在半角空格或连字符处换行，不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。

opacity、visibility、display:none的区别

1. opacity、visibility 将元素隐藏，但是在网页中该占的位置还是占着
2. visibility、display 不能触发事件

inline-block不能margin 0 auto

auto是基于总宽度-已知固定宽度获得取值的，

inline-block元素水平方向的7大属性没有总宽度的限制，

所以margin设置为auto时，不知道如何取值，所以默认为0，于是便没有起到我们想要的居中的效果。

这7大属性的值加起来必须是元素包含块的宽度，这里我们假设其他属性均为0，那也就是margin-left + width + margin-right = 包含块的宽度。
所以：

对于块级元素，当width固定后，margin就能通过margin = (包含块的宽度 - width )/2获得取值

而对于inline-block元素（包含行内替换元素比如img等），内容的宽度就是最终的宽度，没有margin-left + width + margin-right = 包含块的宽度这一限制，所以当margin被设置为auto时，它并不知道要取什么值，就默认为0了，这和为什么垂直方向上不能设置auto是一样的道理。

两行 省略号

为了autoprefixer不会删除过时的样式

{
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  /* autoprefixer: off */
  -webkit-box-orient: vertical; /* 垂直排列 */
  /* autoprefixer: on */
  word-break: break-all;  /* 内容自动换行 */
}

一行 省略号

{
	display:block;//inline-block
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

清除浮动

• 添加clear:both
• 触发BFC

1. 使用邻接元素处理
   给浮动元素后面的元素添加clear属性。
2. 使用带clear属性的空元素

.clear {
  clear: both;
}

3. 使用CSS的overflow属性
   浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动
4. 使用CSS的:after伪元素

.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
}

6. 浮动会尽可能呈现元素而不是叠加覆盖

其他

• button、input、select、textarea这些标签内部的字体不会继承父级的字体
• calc() 函数用于动态计算长度值。
  需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；