一、css基础选择器Cascading style sheet
html负责结构、css负责样式、js负责行为
css写在head标签里面，容器style标签
1、标签选择器
1）、所有的标签都能够当做选择器，比如body、h1、dl、ul、span
2）、不管这个标签藏得多深，都能被选上
3）、选择的是所有的，而不是某一个
2、id选择器
1）、任何标签都可以有id，id的命名以字母开头，可以有数字下划线，大小写严格区别
2）、同一个页面id不能重复
3、类选择器
1）.就是类的符号
2）、任何标签都可以携带class属性，class属性可以重复，可以有多个
3）、类的使用决定一个人的css水平
问题:到底用id还是class属性?
除非极特殊情况用id,
原因：id是js用的，也就是说js要通过id属性得到标签
类上样式，id上行为
二、css高级选择器
1、后代选择器
例：<style type="text/css">
.div1 p{
color:red;
}
</style>
1)空格就是表示后代，.div1 p就是.div1的后代所有的p
2)强调下一代，不一定是儿子
例：<style type="text/css">
.div1 p{
color:red;
}
</style>
<div class="div1">
<ul>
<li>
<p></p>
<p></p>
<p></p>
</li>
</ul>
</div>
2、交集选择器
h3.special{
color:red;
}
必须是h3标签，必须是special属性
3、并集选择器
h3,li{
color:red;
}
用逗号就表示并集
4、通配符*
*就表示所有元素
*{
color:red;
}
三、css3选择器
1、儿子选择器(IE7开始兼容，IE6不兼容)
div>p{
color:red;
}
2、序选择器(IE8开始兼容，IE6、IE7都不兼容)
<style type="text/css">
ul li:first-child{
color:red;
}
</style>
3、下一个兄弟选择器（IE7开始兼容，IE6不兼容）
+表示选择下一个兄弟
<style type="text/css">
h3+P{
color:red;
}
<style>
选择上的是h3元素紧挨着的第一个兄弟
四、CSS的继承性和层叠性
1、继承性
有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
哪些属性能继承？
color、text-开头的、line-开头的、font-开头的
这些关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承
所以，如果我们的页面的文字，都是灰色，都是14px。那么就可以利用继承性，继承性是从自己开始，知道最小的元素
2、层叠性
层叠性：就是css处理冲突的能力。所有权重计算，没有任何兼容问题！
根据什么统计权重呢？
id的数量，类的数量，标签的数量
如果权重一样，以后出现的为准
3、权重问题深入
1、同一个标签，携带了了多个类名，有冲突？
<p class="spec1 spec2">我是什么颜色？</p>
<p class="spec2 spec1">我是什么颜色？</p>
和在标签中的挂类名的书序无关，只和css的顺序有关；
<style type="text/css" media="screen">
.spec2{
color:red;
}
.spec1{
color:green;
}
</style>
绿色的因为css的green写在后面
2、！important标记
来给一个属性提高权重，这个属性的权重就是无穷大
注意写法
正确的
font-size:6px !important;
错误的
font-size:6px;!important; 不能写在外面
font-size:6px important; 不能忘记感叹号
三点注意事项
1）、！important提升的是一个属性，而不是一个选择器
2）、！important无法提升继承的权重、该0还是0
<div>
<p>哈哈哈哈</p>
</div>
div{
color:red !important;
}
p{
color:blue;
}
3）、！important不影响就近原则
问题？如果大家都是继承来的，按理说应该按照就近原则，那么！important能否影响就近原则呢？
答案：不影响，不能给远的写一个！important，干掉近的
<style type="text/css" media="screen">
div{
color:red !important;
}
ul{
color:blue;
}
</style>
<div>
<ul>
<li>我是什么颜色？</li>
</ul>
</div>
权重问题的总结？
五、盒模型
1、盒子中的区域
width
height
padding
善于使用父亲的padding,而不是儿子的margin
错误写法：padding-left:30px;
padding:20px;
发生覆盖：后面的padding大属性层叠掉了他们
小练习
1、问题：求实际占有宽度？
div{
width:200px;
height:200px;
padding:10px 20px 30px;
padding-right:40px
border:1px solid red;
}
2、说出下面盒子真实占有宽高？
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding: 40px 50px 60px;
padding-bottom: 30px;
border: 1px solid red;
}
background-color将填充所有border以内的区域
border:
border-style: dotted(圆点虚线) dashed(方形虚线) solid(实线) double(双实线) groove ridge inset outset
组成：border-width | border-style | border-color
往下拆分：border-top-width border-top-style border-top-color
实际中到底怎么用？什么简单用什么
margin：盒子居中：margin:0 auto
<style type="text/css">
width:200px;
height:200px;
border:1px solid red;
padding:50px;
</style>
这个盒子width:200px;height:200px;但是真实占有高度是302px*302px,这是因为还要加上padding、border
六、标准文档流
1、什么是标准文档流
就是一个默认的状态,元素在排列过程中，自动从左至右，从上到下的排列,最终窗体形成从上到下一行行元素，并且每行从左到右排列；。
2、标准文档流的微观现象？
（1）、空白折叠现象 <img>中间没缝 挨着
（2）、高矮不齐底边对齐
（3）、自动换行
3、标准文档流等级
（1）块级元素
1.霸占一行
2.能接受宽高
3.如果不能接受宽高，那么宽度将设置为父亲的100%
（2）行级元素
1.排列在一行
2.不能设置宽高
4、小提示：
(1).容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。
(2).p标签是一个文本级标签。p里面只能放文字、图片、表单元素。其他的一律不能放。
(3).定义列表是一个组标签，不过比较复杂，出现了三个标签：
5、元素分类
HTML分类
容器级
div h li dt dd
文本级
p a em span b u i
CSS分类
块级元素
div h li dt dd p
行内元素
a em span b u i
块级元素转行内元素 display:inline;
div{
display:inline;
background-color:pink;
width:500px;
height:500px;
}
inline就是行内、一旦，给一个标签设置，那么这个标签立即变为行内元素，此时他和一个span无异
此时div不能设置宽度、高度；这个div可以和别人并排了
行级元素转块级元素 display:block;
span能够设置宽度、高度
span必须霸占一行，别人无法和他并排
如果不设置宽度，将撑满父亲
6、css中一共有三种手段，使一个元素脱离标准文档流
1、浮动
2、固定定位
3、绝对定位
七、浮动
1、浮动的性质
1、浮动元素脱标
2、浮动元素互相贴靠
3、浮动的元素有“自围”效果
性质：脱标、贴边、自围、收缩
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）
<style type="text/css" media="screen">
div{
float: left;
background-color: gold;
}
</style>
<div>我是文字</div>
原则：永远不是一个东西单独浮动，浮动都是一起浮动，要浮动大家都浮动
2、浮动的清除
<style type="text/css" media="screen">
/* div{
height: 100px;
} */
li{
float: left;
margin-left: 30px;
background-color: gold;
}
</style>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div>
<div>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
方法1：给浮动的元素的祖先元素增加高度
如果一个元素要浮动，那么它的祖先元素一定要有高度，有高度的盒子，才能关注浮动
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素，所以就是清除浮动带来的影响了
方法2：clear:both(致命缺陷margin失效)
网页制作中,高度height很少写，为什么？因为能被内容撑高！
方法3：隔墙法
.box1{
height: 15px;
}
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div>
<div class="box1"></div>
<div>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
或衍生出了内墙法
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<div class="box1"></div>
</div>
<div>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
方法4：overflow:hidden;
一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden;那么，父亲就能被儿子撑出高度了，这是一个偏方。
<style type="text/css" media="screen">
.box{
overflow: hidden;
}
li{
float: left;
margin-left: 30px;
background-color: gold;
}
</style>
<div class="box">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div>
<div>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
3、浮动清除总结
1）、加高法
浮动的元素，只能被有高度的盒子关住。也就是说，如果盒子内部有浮动，这个盒子又高，那么妥妥的浮动不会相互影响，但是工作中，我们绝不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化
2）、clear:both
最简单的清除浮动的方法，就是给盒子增加clear:both;表示自己内部的元素，不受其他盒子的影响，
浮动确实被清除了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙
3)、隔墙法
在两部分之间，建立一个墙。隔开两部分浮动，让后面的浮动元素，不再去追前面的浮动元素。
4)、overflow:hidden;
这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
八、margin
1、塌陷现象
（1）、标准文档流中，竖直方向的margin不叠加，以较大的为准
（2）、如果不在标准文档流，比如盒子都浮动，那么两个盒子之间是没有塌陷现象的
2、盒子居中
margin:0 auto;
注意：
1）、使用margin:0 auto;的盒子，必须有width，有明确的的width
2) 、只有标准流的盒子，才能使用margin:0 auto;居中。
也就是说，当一个盒子浮动了、绝对定位、固定定位，都不能使用margin:0 auto;
3)、margin:0 auto;是在居中盒子，不是居中文本。
文本居中要使用text-align:center;
3、善于使用父亲的padding，而不是儿子的margin
如果父亲没有border，那么儿子的margin实际踹的是“流”，踹的是这“行”。所以父亲整体也掉下来
margin这个属性，本质上描述的是兄弟兄弟之间的距离；最好不要用这个margin表达父子之间的距离
所以，我们一定要善于使用父亲的padding,而不是儿子的margin
九、行高和字号
1、行高
CSS中，所有的行，都有行高。盒模型的padding,绝对不是直接作用在文字上的，而是作用在行上的
line-height:40px;
文字，是在自己的行里面居中的。比如，现在文字字号14px,行高是24px。那么 line-height:24px; font-size:14px;
为了保证字在行里面居中，工程师有一个约定：行高、字号，一般都是偶数。这样，他们的差就是偶数，就能够被2整除。
2、单行文本垂直居中
P{
height:60px;
line-height:60px;
}
行高等于盒子高，所以这行文本就在盒子里面垂直居中
注意：只适用于单行文本垂直居中！！不适用于多行。
如果想让多行文本垂直居中，需要设置盒子的padding
公式：padding-top:(盒子高-行高*行数)/2
3、font属性
1、使用font属性，能够将字号、行高、字体，能够一起设置
font: 14px/24px "宋体";
等价于三行语句
font-size:14px; line-height:24px;font-family（字体）:"宋体"；
注意：
1、网页中不是所有的字体都能用，要看用户的电脑里装没装。
页面中，中文只使用：微软雅黑、宋体、黑体。如果页面中需要其他的字体，那么需要切图。
英语：Arial、Times New Roman
2、为了防止用户电脑里面，没有微软雅黑这个字体，就要用逗号隔开备选字体。font-family:"微软雅黑"，"宋体"
3、我们要将英语字体，放在最前面，这样的中文，就不能匹配英语字体，就自动变为后面的中文字体。
font-family: "Times New Roman","微软雅黑","宋体"
4、所有的中文字体，都有英语别名，我们也要知道
5、行高可以用百分比，表示字号的百分之多少
font:12px/200% "宋体"
十、超级链接的美化
1、伪类
1）、定义：同一个标签，根据用户的某种状态不同，有不同的样式，这就叫做伪类。
2）、a标签有4中伪类，要求背诵：
a:link{
表示用户没有点击过这个链接的样式，是英语“链接”的意思
}
a:visited{
表示用户访问过这个链接的样式，是英语访问过的意思
}
a:hover{
表示用户鼠标悬停链接的样式，是英语“悬停”的意思
}
a:active{
表示用户鼠标点击这个链接，但是不松手，此刻的样式是英语激活的意思
}
注意：记住这四种状态，在css中，必须按照固定的顺序写：a:link、a:visited、a:hover、a:active如果不按顺序将失效
2、超级链接的美化
a标签在使用的时候，非常的难。因为不仅仅要控制a这个盒子，也要控制它的伪类
简化写法
a{
display: block;
width: 120px;
height: 50px;
text-decoration: none;
background-color: purple;
color: white;
}
a:hover{
background-color: orange;
}
十一、background系列属性
background-color属性
用英语单词来表示
background-color: red;
用rgb方法来表示
绿色：
background-color: rgb(0,255,0);
蓝色：
background-color: rgb(0,0,255);
黑色：
background-color: rgb(0,0,0);
光学显示器，每个元件都不发光，黑色的。
白色：
background-color: rgb(255,255,255);
十六进制表示法
红色：
background-color: #ff0000;
f:15
ff
15*16
十二、相对定位和绝对定位
相对定位
position:relative;
相对定位脱离标准文档流
形影分离
相对定位用途
微调元素：例如一个文本框和一个按钮，文本框fontsize; 微调按钮位置
绝对定位、固定定位、浮动脱标
绝对定位
1）、绝对定位脱标
绝对定位的盒子是脱离标准文档流的，绝对定位以后，标签就不区分所谓的行内元素、块级元素了，不需要设置display:block就可以设置宽高了
2）、参考点
1）、如果用top描述，那么定位参考点就是页面的左上角，而不是屏幕的左上角
2）、如果用bottom描述，那么就是浏览器首屏窗口尺寸对应的页面的左下角
3）、经典面试题（爱立信面试题）
3）、以盒子为参考点
1)、一个绝对定位的元素，如果父辈元素中也出现了定位了的元素，那么将以父辈这个元素为参考点
2)、要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷
3)、不一定是相对定位，任何定位都可以作为参考点
4)、子绝父绝、子绝父相、子绝父固都可以给儿子定位
子绝父绝没有意义，都脱离标准文档流，页面不稳定
子绝父相有意义，都没有脱离标准文档流，儿子脱标在父亲的范里移动
!5）、绝对定位的儿子，无视参考的那个盒子的padding
!6)、绝对定位的盒子居中
绝对定位以后、所有标准文档流规则失效，margin: 0 auto 失效
怎么办呢？盒子居中？left:50%;margin-left:-盒子宽度的一半
固定定位
固定定位，就是相对浏览器窗口定位，页面如何滚动，这个盒子显示的位置不变。
扫一扫
3176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
