CSS2.0总结

学习了css2.0，做个自我总结，也希望对大家有所帮助，如有不足可提醒我。

1、什么是CSS

CSS（Cascading Style Sheet）：层叠样式表，简称样式表。

2、CSS主要的作用

主要作用就是为html标签添加各种各样的样式,及布局和美化。

3、引入css的三种方式

1）行内样式

<div style="color:pink;">我爱你哦，粉粉哒</div>

2）内部样式

<style>
	div{
		color:pink;
	}
</style>

3）外部样式

在网页的标签对中使用标记来引入外部样式表文件， (用得比较多) :

<link rel="stylesheet" href="./style.css">

4、选择器

选择器就是用于选择需要添加样式的元素，下面介绍css2.0里面的一些选择器。

1）id选择器

给元素添加一个id属性，然后在css，通过 #id名{}，就可以选择我们要添加id的那个元素了。

<div id="one">
        这是一个带id选择器的盒子
</div>

#one {
       color: red;
     }

2）class选择器

给元素添加class属性，在css文件中，通过.class{}方式选择。

<div class="two">
        这是一个带class选择器的盒子
</div>
 

.two {
       color: skyblue;
     }

3）标签选择器

div{} 这样是要是div标签就被选择出来了

<div>
        这是一个标签选择器的盒子
</div>

div {
      color: skyblue;
    }

4）通配符选择器

*{}所有的标签都会被选择出来

* {
      margin: 0;
      padding: 0;
  }

5）属性选择器

属性选择器： [id] {} 这样有id属性的标签就会被选择出来了。

<div id="one">
        这是一个id选择器的盒子
</div>
<div id="two">
        这是一个id选择器的盒子
</div>

[id] {
        color: red;
     }

6）后代选择器

div p {} 选择div下面的p标签,这是p的权重值是加和的结果

<div>
        <p>
            这里div标签是p标签父亲
        </p>
</div>

div p {
        color: red;
      }

7）交集选择器

使用div.one{}选出类名是one的div

<div>
        普通div
</div>
<div class="one">
        类名是one的div
 </div>

div.one {
          color: red;
        }

8）分组选择器

这样div,p{}可以把他们都选择出来

<div>
        div盒子
</div>
<p>
        p盒子
</p>

div,p {
         color: red;
      }

10）伪类选择器

hover伪类：可以让我们设置当鼠标移入这个元素的时候会改变元素的样式

<div>
	<a href="#">这是一个链接</a>
</div>

div a:hover {
            font-size : 20px;
            color : #333;
        }

各选择器的优先级：
! important > 行间样式 > id > (class、伪类、属性) > (标签、伪元素) > 通配符

5、文字设置

font-size:设置文字大小，默认16px。

font-style:设置文字是否倾斜，默认是normal不倾斜，italic是斜体。

font-weight：设置文字的粗细，默认是normal不加粗，bold加粗，100-900表示由细到粗。

font-family: 设置文字的样式,默认的是arial字体。

font:font-weight font-style font-size font-family; 上面四种的复合属性，font-weight font-style可省略。

color: 设置文字颜色，三种表达方式 ：1、英文单词：red，orange…… 2、三位十六进制：每个值都是00-ff 3、rgb(xx,xx,xx)：里面是0-255的十进制数

6、文本设置

text-align: 设置文字的位置属性 center居中 left左对齐 right右对齐。

text-indent: 设置文字首行缩进，值有两种px或em。

line-height: 设置一行文字所占高度的属性，默认和字体大小一样, 如果想让单行文字在容器内上下居中，只需让height的值line-height的值相等。

text-decoration: 文字装饰的意思，可以设置文字是否有下划线，上划线，中划线，值分别为 underline, overline, line-through。

7、盒子模型

width:设置盒子的宽度。

height：设置文字的高度

border：这是个复合属性，由border-width,border-style,border-color三个复合成的 设置盒子的边框 solid (实线) dotted (短虚线) dashed (长条虚线)。

padding: 用来设置内填充，也叫补白 ，表示内容区域和边框之间的距离 。

margin:表示外边距 ，盒子与盒子之间的距离 ，边框之外的间隔，是在border之外的 。

background-color:设置盒子的背景颜色 背景颜色可以填充padding 也可以填充border

注意点：
1）有此标签有默认的margin 清除可用 *{ margin:0; padding:0; }
2）对于行内元素来说，margin在垂直方向上是无效的
3）margin可以设置auto。 表示尽可以大 div{ margin:0 auto; }
4）margin可以设置负值
5）对于块级元素来说，margin有重叠问题（塌陷问题）：
1、兄弟元素之间的重叠问题
2、父子元素之间的重叠问题
在标题9中对怎么塌陷问题有详细说明

8、盒子模型之背景

background-color:设置盒子的背景颜色 背景颜色可以填充padding 也可以填充border

background-image:设置盒子的背景图片 img标签也是盒子 也可以给img这个盒子设置背景图片

一个盒子大小正好和背景图大小一样：正好装进去
一个盒子如果大于背景图：默认会在x和y轴都进行平铺
一个盒子如果小于背景图：只会显示背景图的一部分，背景图的左上角和盒子的左上角对齐 左上 角是指从pddding开始 但是border中也会填充图片图片

background-repeat: 控制是否平铺

repeat-x 只平铺x轴
repeat-y 只平铺y轴
repeat x和y轴都平铺
no-repeat x和y轴都不平铺

background-position:一个小盒子中放一个大的背景图，可以使用background-position定位。一个大盒子中放一个小的背景图，也可以使用background-position定位。

background-attachment: 没什么卵用

在css3中对于背景的设置有添加了很多属性。

9、浮动

1）浮动的初衷

为了实现新闻的字围效果。

浮动的元素半脱离标准文档流：相当于出国了，浮动刚开始就为了实现字围效果，文字并不会钻到浮动的元素后面，文字会环绕浮动的元素分布，就叫字围效果。

现在我们基本上利用浮动并不是为了实现字围效果，我们主要使用浮动来让块级元素并排显示。

---

2）浮动元素的特点

1）贴靠性  如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。
2）包裹性  如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小
3）一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，也就说父元素的高度塌陷了。
4）如果一个女盒子浮动了，就可以设置宽度和高度，说白了，女盒子就变成男盒子

---

3）元素浮动会造成什么影响

1）对父元素造成的影响
2）对后面的兄弟元素影响  

4）怎么清浮动造成的影响

我们需要清除浮动所造成的的影响，也叫清除浮动：
1）overflow:hidden
2）加高法

元素浮动也会对它后面的元素造成影响：
后面的元素会钻上去，但是文字不会，文字会形成字围效果。 对兄弟元素造成影响，我们需要清除这种影响，也叫清除浮动。
最最专业的：clear: left/right/both clear:both

记住了：clear:both只能写在第1个受影响的元素上，写在父元素上没有什么用。

clear属性应该写在什么地方？
答：写在第1个受影响的元素上的。

5）浮动为什么是半脱离？

浮动的初衷：为了实现字围效果，字肯定是钻不上去的，由于它是钻不上去的，所以我们说浮动是半脱离标准文档流。

---

6）浮动问与答

问：一个DIV中浮动元素，能不能脱离DIV。
答：浮动肯定脱离不了父元素了，可以影响父元素的高度，肯定跑到别的盒子中。

问：两个浮动的元素的能不能重叠到一起？
答：不能

问：什么时候，可以让两个盒子重叠到一起：
答：1）一个盒子浮动，另一个不浮动 2）定位，定位完全脱离标准文档流

问：浮动元素都是先向上浮动吗？
答：对的

问：浮动元素是先上向浮动，浮到什么地方？
答：浮动了父盒子的边界 如果是body，body没有设置高度，也会对body造成影响，body的高度也会塌陷，使用overflow:hidden; 不能清除浮动，所以说不要直接在body中裸奔。

问：body是一个盒子吗？
答：是

10、盒子塌陷问题解决

1）兄弟元素之间的塌陷问题：

<div class="box7">box7</div>
<div class="box8">box8</div>

.box7{ width: 200px;height: 200px;background-color: gold; margin-bottom: 150px;}
.box8{ width: 200px;height: 200px;background-color: skyblue; margin-top: 100px;}

按理说：两个盒子之间的margin应该是250px
实际上却是：150px 

这种现象叫：margin的塌陷  

margin塌陷的前提：1）男标签  2）垂直方向    

margin到底是多少：取大原则

首先需要知道 margin塌陷是不好的 也是不css的bug 如何避免？
答：说白了，只设置一个盒子的margin。

2）父子元素之间的重叠问题:

  <div class="box9">
      <p class="box10">我是一个段落</p>
  </div>   

 .box9{ 
      background-color: pink;
      margin-top: 50px;
  }
 .box10{
      background-color: gold;
      margin-top: 30px;
  }

按理说：p标签上面的应该有80px的margin 
实现是：只有50px margin 
这种现象叫：父子元素之间的margin重叠

解决：
    1）给父元素加border 
    2）给父元素加padding  只加一个0px不行  

如果感觉对你有帮助那么支持一下吧☺☺☺☺

本文地址：https://blog.csdn.net/weixin_45631722/article/details/107279488