CSS简略

---
css



1.CSS如何将全页面的图片转换成灰色
img {
filter:gray;
}
2.CSS的三种选择器
(1)类选择器(class)
.类选择器的名称{
属性：属性值;
...
}
<元素 class=“class选择器的名称”>
(2)id选择器（id）
#id选择器名称{
属性：属性值;
...
}
<元素 id=“id选择器的名称”>
(3)HTML元素选择器
元素名称{
属性：属性值;
}
结论：当一个元素同时被类，id，html选择器修饰的时候，其优先级为id>类>html>通配符选择器
(4)通配符选择器
如果希望所有的元素都满足某一种样式，可以使用通配符选择器
* {
	属性：属性值；
    margin:0;
    padding:0;
}
一个元素最多有一个id选择器，但可以有多个类选择器。
在引用多个类选择器的时候中间用空格隔开，当class选择器发生冲突的时候，以在CSS文件中出现的最后的位置为准。
结论：当一个元素同时被类，id，html选择器修饰的时候，其优先级为id>类>html>通配符选择器
3.块元素与行内元素
(1)行内元素：又叫内联元素，内联元素只能容纳文本或者其他的内联元素，常见的内联元素<a><span>。IE8之后均可容纳其他的东西
(2)块元素：块元素会把整行占满，块元素可以容纳文本，内联元素和其他的块元素，常见的块元素有<div><p>
(3)行内元素与块元素的互换
display：inline;块元素转换成为行内元素。
display：block;行内元素转换成块元素。
4.标准流/非标准流
标准流：在网页布局中，写在前面的元素出现在前面，写在后面的元素出现在后面，这就是默认的布局方式，也称之为标准流。
非标准流：在实际的网页的布局中，我们可能要使用非标准流的方式来布局（使其某个元素脱离其原来的位置）。
5.盒子模型
(1)外边距(margin)：两个元素之间的边距。
(2)内边距(padding)：一个元素内部包含一个元素，这两个元素之间的距离称之为内边距passing。
总结：html元素都可以看成一个盒子，盒子模型的参照物不一样则css的属性不一样；尽量使用margin进行布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性），margin如果过大，盒子内容就会被挤到盒子外面去，但是盒子本身没有变化。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200314215221939.png)

  6.浮动
  左浮动，右浮动，清除浮动；
  clear:right;
  clear:left;
  clear:both;


  [1]: ./images/1584094528950.jpg "1584094528950.jpg"