前端CSS笔记(1)

1.css子绝父相：

因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

2.em(可用于自动缩进):

em是一个相对单位，就是当前元素(font-size) 1 个文字的大小，如果当前元素没有设置大小，则按照父元素的1个文字大小。可用于text-indent:2em，自动缩进

3.vertical-align

经常用于设置图片或者表单（行内块元素）和文字垂直对齐（对行内元素和行内块元素有效）
常用于盒子中图片和文字垂直对齐

4.链接伪类选择器注意事项：

按照LVHA 的顺序声明 :link , visited , hover , active。记忆法：lv包包hao

5.标签嵌套注意事项：

文字类的元素内不能使用块级元素，如 < p > 标签主要用于存放文字，因此< p > 里面不能放块级元素，特别是 < div >，会导致dom结构错乱

6.块级元素特点：

1. 独占一行；
2. 宽高，内外边距可以控制；
3. 宽度默认是容器（父级宽度）的100%；
4. 是一个容器及盒子，里面可以放行内或者块元素

7.行内元素特点：

1. 相邻行内元素在一行上，一行可以显示多个；
2. 高宽直接设置无效；
3. 默认宽度就是它本身内容的宽度；
4. 行内元素只能容纳文本或其他行内元素(特殊：链接里不能再放链接；a里面可以放块级元素，但是给a转换一下块级模式最安全)

8.行内块元素特点：

行内元素中有几个特殊的标签（称为行内块元素）- < img/ >、< input/ >、< td >，它们同时具有块元素和行内元素的特点：

1. 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙。一行可以显示多个（行内块元素特点）；
2. 默认宽度就是它本身内容的宽度（行内元素特点）；
3. 宽高，内外边距可以控制（块级元素特点）

9.设置了浮动（float）的元素最重要特性：

浮动元素经常和标准流父级搭配使用：
    先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流
    浮动的盒子不会有外边距合并的问题

浮动元素只会压住它下面标准流的盒子，但不会压住标准流盒子里面的文字（图片），而绝对定位或固定定位则与之相反（因为浮动最初是做文字环绕用的，类似于word中的文字环绕）

1. 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）；浮动的盒子不再保留原先的位置；
2. 如果多个盒子都设置了浮动，则他们会安装属性值一行内显示并且顶端对齐排列。注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐；
3. 浮动的元素会具有行内块元素特性（定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子）

10.清除浮动

10.1.为什么需要清除浮动？

1. 父级没有高度；
2. 子盒子浮动了；
3. 影响下面布局了，我就就应该清除浮动了

10.2.清除浮动的方式：

1. 额外标签法（隔墙法）；
2. 父级overflow:hidden；
3. 父级after伪元素；
4. 父级双伪元素（推荐）

11.定位（position）

相对定位relative：相对于自己本来的位置进行移动（不脱离标准流布局，继续保留原来位置，既原来的位置不会被其他元素占）

可用于给absolute（绝对定位）当爹

绝对定位相对于他的祖先元素（使用了相对定位的）移动，不再占有原先的位置（脱标）

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文档)

固定定位(fixed)是元素固定于浏览器可视区的位置。

主要使用场景：可以在浏览器页面滚动时元素位置不会改变
以浏览器的可视窗口为参照点移动元素（跟父元素没有任何关系，不随滚动条滚动）；固定定位不在占有原先的位置（脱标）

粘性定位sticky

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加top、left、right、bottom其中一个才有效

定位叠放次序 z-index

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性

绝对定位的盒子居中（加了绝对定位的盒子不能通过margin:0 auto 水平居中）

1.left：50%：让盒子的左侧移动到父级元素的水平居中位置
2.margin-left：-200px；让盒子向左移动自身宽度的一半

定位特殊特性（绝对定位和固定定位也和浮动类似）

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度；
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

脱标的盒子不会触发外边距塌陷

12.使用技巧：

12.1.美化单选框：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心标签的for属性应当与相关元素的id属性相同，可以实现点击相当于点击到了关联的input上，隐藏掉input，修改label样式来达到美化的效果

12.2.文字居中：

让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

12.3.背景图：

• backgroud-image 属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（利用background-position）（精灵图也是一种运用场景）
• 页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色
• background-position很重要，应用场景较多
• 背景半透明：background:rgba(0,0,0, $ ) 0<=$<=1

12.4.为什么需要精灵图：

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求与就可以了

如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂一点的小图标，就用精灵图。

12.5.border-radius设置圆角：

• 如果是正方形，想要设置为一个员，把数值修改为高度或者宽度的一半即可，或者直接写为50%
• 如果是个矩形，设置高度的一半可以做圆角按钮

12.6.嵌套块元素垂直外边距塌陷：

解决：

1. 为父元素定义上边框；
2. 为父元素定义上内边距；
3. 为父元素添加overflow:hidden

12.7.元素的显示与隐藏：

display：none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置 （搭配JS可以做很多的网页特效）

visibility：visible 元素可视
visibility：hidden 元素隐藏
visibility隐藏元素后，继续占有原来的位置

overflow溢出隐藏

12.8.css三角形

当div的宽高为0，border值为$时，div的每个border边会是一个高为 $ 的三角形（为了兼容性可以加行高，字号为0）

还可以通过clip-path: polygon()实现

12.9.图片底部默认空白缝隙问题

图片底侧有一个空白缝隙，原因是行内块元素会和文字的基线对齐
解决：1.给图片添加vertical-align:middle|top|bottom等（推荐）
	 2.把图片转换为块级元素 display:block

12.10.溢出的文字省略号显示

1. 单行文本溢出显示省略号–必须满足三个条件
   I.先强制一行内显示文本
   white-space:nowrap; (默认normal自动换行)
   II.超出的部分隐藏
   overflow:hidden;
   III.文字用省略号代替超出的部分
   text-overflow:ellipsis;
2. 多行文本溢出显示省略号（有较大的兼容性问题，适合webKit浏览器或移动端）(推荐后台人员控制显示多少字)
   overflow:hidden;
   text-overflow:ellipsis;
   弹性伸缩盒子模型显示
   display:-webkit-box;
   限制在一个块元素显示的文本的行数
   -webkit-line-clamp:2;
   设置或检索伸缩盒子对象的子元素的排列方式
   -webkit-box-orient:vertical;

12.11.常见的布局技巧

1. margin负值运用
   I.让每个盒子margin往左侧移动-1px正好压住相邻盒子边框
   II.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）
2. 文字围绕浮动元素
   巧妙运用浮动元素不会压住文字的特性（常见使用场景：盒子里左边图片右边文字）文字会围绕着浮动元素
3. 巧妙使用行内块元素（如用来做页面选择）

12.12.导航栏注意点：

实际开发中，我们不会直接用链接a，而是用li包含链接（li+a）的做法
    1.li+a语义更清晰，
    2.如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（网站会被降权，影响搜索排名）

12.13.css选择器权重：

继承或*(0.0.0.0)<元素选择器(0.0.0.1)<类选择器，伪类选择器(0.0.1.0)<ID选择器(0.1.0.0)<行内样式(1.0.0.0)<!important(无穷大)	（权重值用于算复合选择器的权重,按位相加，不进位）

12.14.字体图标下载推荐网站

http://icomoon.io
http://www.iconfont.cn

12.15.其他：

• 子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，以及color属性）
• border-collapse:collapse; 合并相邻的边框
• 设置内外边距会撑大盒子模型的大小（如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小）
• 块级元素指定宽度，左右外边距设置auto自动水平居中
• 行内元素或者行内块元素给其父元素添加text-align:center即可水平居中
• li{list-style:none;} 去掉li前面的小圆点
• 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
• font:12px/1.5 Microsoft YaHei; 设置行高为字体大小的1.5倍（可用于子元素继承父元素的该设置，子元素修改自己的字号来自动调整行高）
• 去掉表单轮廓线：outline：0 或者 outline：none；
• 防止文本域被拖拽：textarea{resize：none}