CSS基础学习

css权重    256进制

!important     Infinity

行内样式      1000

ID选择器       100

类|属性|伪类   10

标签                1

通配符             *   

并列选择器：

div.demo  中间没有空格，选出div且类名是demo，  有标签选择器，标签选择器必须在前面 

如果放在后面系统会认为.demodiv是类名为demodiv

权重计算：

<div class="classDiv" id="idDiv"><p class="classP" id="idP">1</p></div>

#idDiv p{/*权重是101*/background-color: red;   }.classDiv .classP{/*权重是20*/background-color: yellow;}

不管有没有空格，只要在同一行权重相加即可

#idDiv p{/*101*/background-color: red;}.classDiv .classP#idP{/*10+10+100=120*/background-color: yellow;}

如果权重相，同后面的会覆盖前面的:

背景是黄色

#idDiv p.classP{background-color: red;}.classDiv .classP#idP{background-color: yellow;}

!important权重：

显示红色：

#idDiv p.classP{background-color: red!important;/*100+1+10+Infinity*/}.classDiv .classP#idP{background-color: yellow;}

黄色：

#idDiv p.classP{background-color: red!important;}.classDiv .classP#idP{background-color: yellow!important;}

红色：

div#idDiv p.classP{background-color: red!important;}p .classP#idP{background-color: yellow!important;}

文字：

<div>前端工程师</div>

div{font-size: 20px;border: 1px solid black;/*水平居中*/text-align: center;/*height==lineheight垂直居中*/height: 200px;line-height: 200px;}

div{font-size: 20px;border: 1px solid black;text-indent: 2em;/*em相对单位  1em=1*font-size */}

img之间有间隔：这是因为凡是带有inline的元素，都有文字特性

<img src="img/1.jpg"/><img src="img/2.jpg"/><img src="img/3.jpg"/><img src="img/4.jpg"/>

当去掉img之间的回车符：

<img src="img/1.jpg"/><img src="img/2.jpg"/><img src="img/3.jpg"/><img src="img/4.jpg"/>

<style>img{width: 200px;margin-left: -8px;}</style><img src="img/1.jpg"/><img src="img/2.jpg"/><img src="img/3.jpg"/><img src="img/4.jpg"/>

压缩代码放到服务器上会去回车，去空格符号，所以测试环境margin-left：-8px；线上不用处理，会自动去掉回车符。

CSS浮动：

浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们，产生了BFC的元素和文本类属性（带有inline属性）的元素以及文本都能看到浮动元素。

<div class="box"></div><div class="demo"></div>

1.块级元素看到不见浮动元素；

.box{width: 100px;height: 100px;background-color: yellow;float: left;}.demo{width: 200px;height: 200px;background-color: red;}

2.带有inline属性的元素看见浮动元素：

.box{width: 100px;height: 100px;background-color: yellow;float: left;}.demo{width: 200px;height: 200px;background-color: red;display: inline-block;}

<div class="box"></div><img src="img/1.jpg" style="height: 100px;"/>

.box{width: 100px;height: 100px;background-color: yellow;float: left;}

文本能看见浮动元素：

<div class="box"></div>123

.box{width: 100px;height: 100px;background-color: yellow;float: left;}

在父元素内浮动的情况：

<div class="wrap"><div class="left">left</div></div>

.wrap{background-color: red;width: 200px;height: 200px;}.left{width: 100px;height: 100px;float: left;background-color: yellow;}

当父元素添加20px的padding后：

.wrap{background-color: red;width: 200px;height: 200px;padding: 20px;}.left{width: 100px;height: 100px;float: left;background-color: yellow;}

当浮动元素在父级元素内浮动时，只在内容区域，子元素遇到父元素的内容区边界，停止移动。

清除浮动：

先了解伪元素：:first-line、:first-letter、:before、:after，

伪类：：hover、：focus等

CSS3为了区别伪类和伪元素，将伪元素的写法由单冒号改为双冒号::first-line、::first-letter、::before、::after

<span>css</span>

span::before{content: 'html';}span::after{        content: 'javaScript';        }

伪元素天生存在，是inline，如果设置宽高，必须改为块级元素。

<div class="wrap"><div class="box"></div><div class="box"></div><div class="box"></div></div>

.wrap{width: 300px;border: 1px solid red;}.box{width: 100px;height: 100px;background-color: yellow;float: left;}.wrap::after{content: "";clear: both;}

并没有清除浮动，因为clear属性只对块级元素起作用

在将伪元素的display属性设置为块级元素即可，display的值设置成block、table都行，但是不能设置为inline-block

.wrap{width: 300px;border: 1px solid red;}.box{width: 100px;height: 100px;background-color: yellow;float: left;}.wrap::after{content: "";display: block;clear: both;}

position:absolute和float:left/right会将元素转换成inline-block

<div class="demo">         position:absolute和float:left/right会将元素转换成inline-block</div>

.demo{float: left;border: 1px solid red;}

虽然样式表中仍是display：block，但是div的宽度不是全屏，而是由内容决定。

<span class="demo"></span>

.demo{float: left;background-color: yellow;width: 100px;height: 100px;}

设置浮动后，span元素可以设置宽高

文字溢出处理：

单行文字溢出处理：

<p>文字溢出单行处理，不换行，溢出隐藏，文本溢出ellipsis</p>

p{width: 300px;height: 20px;line-height: 20px;border: 1px solid black;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

多行文字溢出打点可以用css3，但是有兼容性问题，一般使用截断：

主要是两点：容器高度设置为行高的倍数，如果是两倍，则height:2em; overflow:hidden,这样就只显示两行。

文字代替图片：

<a href="http://taobao.com" target="_blank">淘宝网</a>

a{display: inline-block;text-decoration: none;color: #f40;width: 80px;height: 33px;background-image: url(img/taobao.png);background-size: 80px 33px;text-indent: 100px;white-space: nowrap;overflow: hidden;}

css加载失败时：

css加载成功时：

或者利用padding，将height设置为0。

a{display: inline-block;text-decoration: none;color: #f40;width: 80px;height: 0px;padding-top: 33px;background-image: url(img/taobao.png);background-size: 80px 33px;overflow: hidden;}

’常见布局：

一列布局：设置宽度，margin：0 auto；

二列布局：

侧列div放在前面；

侧列设置浮动，主列margin-left：侧列宽度+间距（间距自己设置）。

三列布局：main-wrap必须要设置左浮动。

<div class="main-wrap">     <div class="main">main</div></div><div class="left">left</div><div class="right">right</div>

*{margin: 0;padding: 0;}.left{width: 200px;height: 600px;float: left;margin-left: -100%;background-color: red;}.right{width: 200px;height: 600px;float: right;margin-left: -200px;background-color: red;}.main-wrap{width: 100%;height: 600px;float: left;background-color: yellow;}.main{margin: 0 200px;}