css写法，css选择器，css几种常见样式，盒模型定位，浮动，元素塌陷问题，雪碧图
css的写法
1.内联样式:样式直接写在标签里面。
2.内部样式：样式写在<style>中。
3.外部样式：样式写在另一个文件中，使用<link rel="stylesheeet" href="style.css">
当属性设置有冲突时，就近原则 ，内联>内部>外部，同样的内部样式，顺序是从上到下。
selector()选择器
1.标签选择器 权重值1
2.类选择器 权重值10
<style>
.cc{
color: red;
}
.dd{
color: blue;
}
</style>
<body>
<h1 class="cc dd">哈哈</h1>
</body>
哈哈是蓝色
<style>
.cc{
color: red;
}
.dd{
color: blue;
}
</style>
<body>
<h1 class="dd cc">哈哈</h1>
</body>
交换类选择器的顺序，哈哈还是蓝色
<style>
.dd{
color: blue;
}
.cc{
color: red;
}
</style>
<body>
<h1 class="dd cc">哈哈</h1>style>
</body>
交换类选择器定义的顺序，哈哈变成了红色
<style>
.dd{
color: blue;
}
.ee{
background: green;
}
</style>
<body>
<h1 class="dd">哈哈</h1>
<div class="dd ee">嘎嘎</div>
</body>嘎嘎的样式会重叠，蓝色字体，绿色背景，这样实现多样化，没有多id选择器，尽量使用类选择器。
<style>
.ff{
color: aqua;
}</style>
<body>
<h1 class="ff">h1</h1> <p class="ff">p</p>
</body>
h1，p全是浅蓝色
<style>
h1.ff{
color: aqua;
}</style>
<body>
<h1 class="ff">h1</h1> <p class="ff">p</p>
</body>
h1是浅蓝色,选中了同时满足既是h1标签又是ff类的。
3.id选择器 权重值100
css选择器在选择的时候是从后往前选择的，不是从前往后。比如
<style>
div#div1{
background: blue;
</style>
<body>
<div id="div1">DIV</div>
</body>
他是先找id是div的，再看他是不是div标签，css中id是唯一的，这里多判断了一次，多此一举。4.分组选择器（用，分隔 表示同时选中不同的选择器）
5.后代选择器（用空格表示 谁的后代）
6.子代选择器（用>表示 ）
#div h1{
background: blue;
}
<div id="div1">
<h1>h1</h1>
<div>
<h1>h11</h1>
</div>
</div>
h1,h11全是蓝色。
只想让儿子h1是蓝色
#div1 > h1{
background: blue;
}
<div id="div1">
<h1>h1</h1>
<div>
<h1>h11</h1>
</div>
</div>
h1是蓝色。7.伪类选择器
#div2:hover{
background: red;
}
<div id="div2">div2</div>
鼠标划到div2上背景变成红色，IE6只支持给<a>加hover
#ul1 li:first-child{
background: red;
}
<ul id="ul1">
<li>item1</li>
<li>item2</li>
</ul>
item1背景是红色。
#ul1 li:nth-child(2)
}
表示第二个列表项是红色
#ul1 li:nth-child(2n)
}
表示偶数项列表项是红色
#ul1 li:nth-child(2n+1)
}
表示奇数项列表项是红色
#div3 h1:nth-child(1){
color: red;
}
<div id="div3">
<h1>h1</h1>
<p>pppppp</p>
<h1>h1h1h1h1</h1>
</div>
h1是红色
#div3 p:nth-child(1){
color: red;
}
<div id="div3">
<h1>h1</h1>
<p>pppppp</p>
<h1>h1h1h1h1</h1>
</div>都没有变化，nth-child（1）和前面什么标签没有关系，就表示第一个孩子。想要和标签类型与关要使用nth-of-type(1)
#div3 p:nth-of-type(1){
color: red;
}
<div id="div3">
<h1>h1</h1>
<p>pppppp</p>
<h1>h1h1h1h1</h1>
</div>
pppppp是红色8.伪对象选择器
#p1{
height: 200px;
width: 100px;
background: #ccc;
}
#p1；first-line{
color: red;
}
<p id="p1">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</p>
显示出来的每一行不一点就是代码中写的字数，加了伪对象选择器，第一行哈哈哈。。。是红色。伪类 伪对象区别？
伪类的对象是真实存在的，想给她设置样式的时候直接选中。 伪对象的对象是不存在的，相当于浏览器选中的一行哈哈哈，给它加了一个隐式的元素，对这个元素设置样式。
内联权重值 1000
常用的几个css样式
*表示通配符，所有标签都使用。
rgba( , , , )最后一个值是透明度 0-1 值越小越透明
opacity的值是会继承的，解决办法1：把两个div设置成兄弟，不是父子。
解决方法2：使用rgba()。
把background的属性写在一行 background： url（"1.jpg") no-repeat rgba(80,80,80,0.5);
#div1{
width: 200px;
height: 200px;
background: #ccc;
text-align: center;
line-height: 200px;
}
<div id="div1">哈哈</div>
哈哈会水平垂直居中在灰色框中，但是line-height=height只能设置单行文本。
#div1{
height: 150px;
width: 150px;
background: #ccc;
display: table;
}
#div2{
display: table-cell;
vertical-align: middle;
}
<div id="div1">
<div id="div2">
哈哈哈哈哈哈哈哈哈
或或或或或或或或或或或或或或
或或或或或或或或或或或或或或或或或或或</div>
</div>
</div>
实现多行文本垂直居中
text-decoration: none;可以去掉<a>下划线。
text-indent :20px; 首行缩进20像素。盒模型
网页中所有的元素都是框
行框：由内容大小撑起来的。
display: block转化成块级元素。
块框：垂直分布。
宽是自适应的，意思是占据父元素的剩余空间，高是内容的高度。 可以设置宽高。 display: inline转化成行级元素。 display: inline-block 元素水平排列并且可以设置宽高。
margin设置一个值：上 下 左 右
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左外边距合并问题
#a, #b{
height: 100px;
width: 100px;
background: #f00;
}
#a{
margin-bottom: 50px;
}
#b{
margin-top: 30p取了较大值x;
}
<div id="a">a</div>
<div id="b">b</div>
兄弟关系，两个红框垂直分布，取了较大值，间距是50px。
#a, #b{
height: 100px;
width: 100px;
background: #f00;
}
#a{
width :200px;
height: 200px;
}
#b{
margin-top: 30px;
background: #0f0;
}
<div id="a">
<div id="b"></div>
</div>
父子关系，父子会一起向下移动30px。
解决方法： 1.给父元素加边框，设置边框透明也会有阴影。
2.给父元素加下内边距，但是父元素会变宽，设置狂傲是给内容设置。
3.给子元素加浮动 float: left;
4.给子元素加绝对定位：poosition: absolute;
5.给父元素加 overflow: hidden;
去掉<!DOCTYPE html>在IE6下会生成怪异盒模型，设置的宽高包括内容，padding,border.
box-sizing: content-box; 标准浏览器下
box-sizing: border-box; IE6浏览器下 宽高包括三部分。定位
相对定位：相对于自己之前的位置
不释放空间，后面的元素不会挤上来。
绝对定位：相对于最近已定位的祖先元素，不一定是父元素
会释放空间，后面的元素会挤上来。
固定定位：相对于浏览器定位
释放空间
块级元素加了这个属性之后，宽度不再是自适应，而是由内容撑开。浮动
#a，#b, #c{
width： 100px；
height： 100px；
}
#a{
background: red;
float: left:
}
#b{
background: green;
}
#
background: blue;
}
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
红色会把绿色盖住
如果全都向左浮动，三个快排列在左侧，从左向右 红 绿 蓝
如果全都向右浮动，三个快排列在右侧，从右向左 红 绿 蓝
float可以让块级元素横过来，display：block也可以让元素横过来，两者的区别？
display：block 块之间会有间隙，float是紧贴着的。这个间隙是代码中不同的div换行导致的。
inLine-block不会导致元素释放空间。浮动会导致元素空间释放，后面的挤上来。
不想让某个元素浮动： clear: both;元素塌陷问题
浮动导致元素塌陷问题
list-style: decimal数字
#ul1{
background: #ccc;
list-style: none;
}
#ul1 li{
background: #f00;
float: left;
}
<ul id="ul1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
ul的高度变成0，因为子元素浮动，空间释放了，没有子元素撑着父元素，父元素没有高了。
解决方法1：已知父元素高度直接加高度。
2： 在列表项最后再加一个li，设置样式 float: none clear:both, 相当于新加一个空列表项，他不浮动，自己撑着空间。
3：父元素加 overflow: hidden
overflow:hidden是解决溢出问题的，这场来说不能解决其他问题，但是他在这就是好使，这叫做css hack ,用特殊手段解决浏览器兼容性问题。雪碧图
#div1{
width: 136px;
height: 63px;
background: url("1.jpg") no-repeat -152px -402px #ccc; 数字是小块图片的左、上外边距
}
<div id="div1"></div>
性能优化的一种方式 相关推荐
jiedinghui 2020-10-25
葉無聞 2020-09-01
buttonChan 2020-08-02
Ladyseven 2020-10-22
zuncle 2020-09-28
xiaohuli 2020-09-02
nicepainkiller 2020-08-20
AlisaClass 2020-08-09
myloveqiqi 2020-08-09
drdrsky 2020-07-29
Ladyseven 2020-07-25
nicepainkiller 2020-07-24
AlisaClass 2020-07-19
hellowzm 2020-07-19
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT
昔人已老 2020-07-19
骆驼的自白 2020-07-18
lanzhusiyu 2020-07-19
hellowzm 2020-07-19
CSSEIKOCS 2020-07-18