css小知识点

1、选择器查找顺序是自右向左的顺序查找

2、色值: #xxxxxx，六位，每两位代表一个颜色的饱和度，rgb分别代表红绿蓝，每一位是一个十六进制，如果每个的两位都重复，那么可以只写一个

3、 行内元素不能设置宽高、块级元素可以、行内块级元素

4、图片只需设置一个宽或者高，另一个会自动改变

5、凡是inline和inline-block都是带有文字特性的，比如两个img标签，由于存在换行，他们之间会存在一个空白符，相当于两个文字，中间会出现文字分隔符(空格)

6、开发流程: 先定义css功能，再使用css的功能组合

7、body默认是margin: 8px;

8、块级元素宽度自适应, 如设置了margin-right那么块级元素的宽度会填满剩下的空间

9、margin塌陷: 子级与父级同时设置margin-top的时候，子级无法相对于父级设置margin-top的情景，使用bfc来解决这种情况，下面是触发bfc的方法，根据情况对父元素使用相应的方式

• position: absolute
• display: inline-block
• float: left/right
• overflow:hidden

10、margin合并: 两个元素水平方向设置margin实际表现出来的是两个margin相加,两个非行内元素垂直方向设置margin，不管是否嵌套，margin为两者当中最大的那一个，垂直方向的可以通过触发bfc来解决，将其中之一通过容器包裹，并将容器触发bfc, 如果非嵌套，一般这个问题不解决，应为会破坏html结构。

11、浮动float: 浮动元素会产生浮动流，有以下规则

• 对于块级元素不可见，所以也不会撑开父级块级元素，而后面的块级元素也会占据这个浮动元素原本的位置
• 对产生了bfc的元素可见，后面产生了bfc的元素会紧接着这个元素，不会占据这个浮动元素原本的位置
• 对于文本类元素(inline-block、inline)和文本可见，后面的元素会紧接着这个元素，不会占据这个浮动元素原本的位置

12、清楚浮动: clear:both, 由于浮动元素对块级元素不可见，所以不会撑开父级块级元素，但是可以通过下面的方式解决

• 方式一

    <div class="one">
        <div class="two"></div>
        <p></p> //清楚浮动，然后就可以紧接着前面的div元素并撑开父元素
    </div>
-------------------------------------------
        .two {
            height: 50px;
            width: 50px;
            float: left;    
        }
        p {
            clear: both;
        }

• 方式二:利用伪类(伪类的元素是行内元素)

    <div class="one">
        <div class="two"></div>
    </div>
    .one::after{
		content: "";
		display: block;
		clear:both;
	}

13、position设置为absolute、fixed 会脱离文档流，不会撑开父元素

14、设置了position:absolute|fixed和float:left/right的元素会变成inline-block

15、设置文字的大小是设置的是文字的高度

16、单行文本溢出

white-space: nowrap; //是文本失去换行功能
overflow: hidden;
text-overflow:ellipsis;

17、多行文本溢出css3出现了解决方案，但是由于pc端的兼容性不是特别好，所以一般只实现移动端。

• pc端: 后端传来的数据中自动加上省略号，根据前端传过来的容器宽度和字体大小进行估算，在文本指定的地方加上涉略号。
• pc端: 进行截断，方式是根据容器的高度和行高来计算可以显示多少行，然后直接设置overflow:hidden。

18、当网速不好的时候，无法加载css的时候，对于图片加载不了，显示文字的情况，可以像下面这样。

• 方式一

<a href="http://www.taobao.com">淘宝网</a>
a {
	background-img:url();
	text-indent: 9999px;
	overflow:hidden;
	white-space:nowrap;
}
// 这样当加载了css就会显示背景图片而不会显示文字

• 方式二:利用padding里面可以设置背景图片的特性

a {
	height:0px;
	padding-top: 100px;
	overflow:hidden;
	background-img: url();
}

19、html元素镶嵌规定

• 行内元素只能嵌套行内元素或者文本
• 块级元素可以嵌套任何元素，除了以下
  • p标签不能嵌套div(会出问题)
  • a标签不能嵌套a标签

20、inline-block设置后面的文本类，会与其内部的文本底部对齐

21、当父元素的高为固定值的时候height才能设置百分比

22、img 的对其方式是字体的底部，所以有一种情况是如果字体过大，图片相对小，那么图片对其字体的底部。