CSS随笔

写在前面

浏览器会给我们设置默认的内外边距，所以我们可以在布局之前进行消除：* {padding: 0; margin: 0;}
另外：box-sizing: content-box，盒子大小为width + padding + border；
box-sizing: border-box，盒子大小为width（不会被padding撑开盒子）。
我们可以通过box-sizing属性来指定盒模型，属性值可为content-box或border-box ,计算盒子大小的方式就发生了改变。一般使用border-box更多。

一、选择器类型与优先级

!important>行内样式>id选择器>类选择器/伪类选择器/属性选择器（css3新增）>标签选择器>通配选择符>继承。(其实!important与优先级无关，但它与最终的结果直接相关。使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则。)
详细可见：CSS优先级—MDN
注：给元素添加样式时，有时添加的样式的类别是一样的，此时需要根据权重大小来判断优先级。
例如以下情况，则最终类nav中的li元素采用下面的样式（因为下面的权重大）。

.nav li {……}
.nav {……}

另外：css3添加的结构伪类选择器：nth-child选择器和nth-of-type选择器[E:nth-child(n)和E:nth-of-type(n)]的区别是：
nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配，若不匹配则不显示。
nth-of-type对父元素里面指定的子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子。

属性选择器

1、[attribute] 选择器用于选取带有指定属性的元素。
2、[attribute=“value”] 选择器用于选取带有指定属性和值的元素。
3、[attribute~=“value”] 选择器选取属性值包含指定词的元素。
注意以下4和5的区别：
4、[attribute|=“value”] 选择器用于选取指定属性以指定值开头的元素。注：值必须是完整或单独的单词。eg:若class属性的value为nav，则只会选取class属性值为"nav"的元素（完整的单词）或属性值为"nav-xxx"的元素（单独的单词）。
5、[attribute^=“value”] 选择器用于选取指定属性以指定值开头的元素。注：值不必是完整单词！即只要是以value开头的皆可。
6、[attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素。注：值不必是完整单词！
7、[attribute*=“value”] 选择器选取属性值包含指定词的元素。注：值不必是完整单词！

伪元素

before和after创建一个元素，但是属于行内元素。新创建的这个元素在DOM中找不到，所以我们称为伪元素语法: element::before {}。其中使用时before和after必须写content属性，且before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。伪元素选择器和标签选择器一样,权重为1。

二、、外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。浮动的盒子不会发生外边距的情况（即两个盒子中只要有一个浮动就不会发生外边距合并）。
外边距合并有两种情况：
①当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并:
       如:上下相邻外边距合并图示
       解决办法：尽量只给一个盒子加margin值。
②当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并：
       如：嵌套元素(父子元素)外边距合并图示
       解决办法：1、为父元素定义边框；2、为父元素定义内边距；3、为父元素添加overflow:hidden。

三、浮动

三种布局方式：标准流、浮动、定位。其中，多个块级盒子纵向排列用标准流，横向排列用浮动。
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动后都具有行内块元素的特性。
浮动只会影响浮动盒子后面的标准流，不会影响前面的标准流。
浮动和定位的区别：
浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)。但是绝对定位(固定定位)会压住下面标准流所有的内容。

清除浮动

作用：清除浮动元素的影响。如果父盒子本身有高度，则不需要清除浮动。清除浮动以后父级就会根据浮动的子盒子自动检测高度。父级有了高度就不会影响之后的标准流了。
清除浮动的方法：
①额外标签法：在浮动元素末尾添加一个空标签（注：添加的空标签必须是块级元素)。比如<div style=“clear:both"></div>或者<br />等。
②给父级添加overflow属性：overflow:auto；优缺点：代码简洁但无法显示溢出的部分。
③给父级添加after伪元素：方法与第一种类似，即也是在后面添加一个块级元素；

.clearfix::after {
	content: "";
	display: block;   // 插入的必须是块级元素
	height: 0;  // 插入的元素不可见
	clear: both;  // 清除浮动
	visibility: hidden;  // 插入的元素不可见
}

④给父级添加双伪元素：在前面以及之后各添加一个块级元素。

.clearfix::before,.clearfix::after {
	content: "";
	display: table;  // 转换成块级元素并在一行显示
}
.clearfix:after {
	clear: both;  // 清除浮动
}

四、属性书写顺序（建议）

1、布局定位属性：display/position/float/clear/visibility/overflow;
2、自身属性：weight/height/margin/padding/border/background;
3、文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word;
4、其他属性(CSS3)：content/cursor/border-radius/box-shadow/text-shadow……

五、定位

5.1 定位 = 定位模式 + 边偏移。

定位模式用于指定一个元素在文档的定位方式。通过css的position属性设置，值可以为：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和sticky（粘性定位）。
1、static：默认定位方式，按照标准流特性摆放位置且没有边偏移，使用不多。
2、relative：相对元素自己原来的位置来移动。而原本在标准流中的位置仍继续占有，后面的盒子 不会抢占它的位置。
3、absolute：相对元素它自己的祖先元素（包括父元素）来移动。
①如果没有祖先元素或者祖先元素没有定位，则会以浏览器为准。
②如果祖先有定位（相对、绝对、固定），则会相对该元素最近一级有定位的祖先元素来移动。比如上一级元素和上上一级元素都有定位，则会相对上一级元素来移动位置。
③绝对定位不会占有原来在标准流中的位置。
④加了绝对定位的盒子不能通过margin: 0 auto水平居中。
可以通过以下方法来实现：
第一步：left: 50%;让盒子的左侧移动到父级元素的水平中心位置；
第二步：通过左外边距让盒子向左移动自身宽度的一半。
4、fixed：以浏览器的可视窗口为参照点移动元素。与父元素没有任何关系且不随滚动条滚动而滚动。注：固定定位也不占有原来在标准流的位置。
固定版心右侧tips:
第一步：让固定定位的盒子通过left: 50%走到浏览器可视区（也可以看做版心）的一半位置；
第二步：让固定定位的盒子margin-left:[版心宽度的一半距离]，多走版心宽度的一半位置。
注意：固定定位的盒子要写在前面，否则显现不出来。
5、sticky：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
粘性定位会占有原来在标准流中的位置。另外必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。
小知识：
1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2、块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
边偏移决定了该元素最终的位置。有top、left、right、bottom四个属性。

5.2 定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)。语法：选择器 { z-index: [数值] }
数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越在上方。如果属性值相同，则按照书写顺序，后来者居上。另外数字后面不能加单位且只有定位的盒子才有z-index属性。

六、字体图标与精灵图

字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显。
1、图片文件还是比较大的。
2、图片本身放大和缩小会失真。
3、一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
字体图标的优点：
1、轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
2、灵活性:本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
3、兼容性:几乎支持所有的浏览器，请放心使用。
总结：如果遇到一些结构和样式比较简单的小图标，就用字体图标。如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

小技巧

css3其它新增可查字典     w3school   菜鸟教程
1、使用css做三角形：只要不给盒子宽高并让其他三个边框的颜色为透明即可。

css:
div {
    width: 0;
    height: 0;
}
.box1 {
    /* 兼容一些浏览器 */
    /* line-height: 0;
    font-size: 0; */

    /* 绘制尖向上的三角形 */
    border: 50px solid transparent;
    border-bottom-color: skyblue;
}
.box2 {
    margin: 10px 0;
    border: 50px solid wheat;
    border-top-color: aqua;
    border-bottom-color: red;
    border-left-color: gray;
    border-right-color: green;
}
html:
<div class="box1"></div>
<div class="box2"></div>

2、更改鼠标样式：{cursor: [属性值]}
属性值可以为default（默认）、pointer（小手）、move（移动）、text（文本）、not-allowed（禁止）。
3、表单轮廓：在文本框输入时周围会有默认的边框线。
给表单添加outline:0;或者 outline: none;样式之后，就可以去掉默认的边框。
4、文本域防拖拽：{resize:none}
比如用户在编辑个人资料写自我介绍时，我们不希望用户可以拖拽文本域大小，所以通过resize来限制。（另：文本域最好写在一行，中间不要空格，不然在文本域输入时会发现有了设置了内边距的效果！）
5、CSS的vertical-align属性使用场景∶经常用于设置图片或者表单(行内块元素)双字垂直对齐。用来设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
属性值为baseline、top、middle、bottom。
问题：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。主要解决方法有两种:
1、给图片添加vertical-align:middle | top] bottom等（推荐）；
2、把图片转换为块级元素 display: block;
6、溢出的文字省略号显示：
1、单行文本溢出显示省略号——必须满足三个条件：
①先强制一行内显示文本：white-space: nowrap;(默认normal自动换行)
②超出的部分隐藏：overflow: hidden;
③文字用省略号替代超出的部分：text-overflow: ellipsis;
2、2.多行文本溢出显示省略号：
有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核)。
2.多行文本溢出显示省略号

overflow : hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数,2即代表2行*/
-webkit-line-clamp : 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;