伪元素选择器

未使用元素选择器的效果

第一行：伪元素选择器：选择部分内容

第二行：伪元素选择器：选择部分内容

伪元素选择器：选择部分内容

::selection：选择指定元素中被用户选中的内容

未使用该伪元素选择器时,我们用鼠标去选中元素内容时

使用该伪元素选择器后,我们用鼠标去选中元素内容时

        p::selection{

        	    background-color: purple;

        }

::before：可以在内容之前插入新内容

你好吗？第一行：伪元素选择器：选择部分内容

第二行：伪元素选择器：选择部分内容

你好吗？伪元素选择器：选择部分内容

	p::before{

		content:"你好吗？"

	}

::after：可以在内容之后插入新内容

第一行：伪元素选择器：选择部分内容

第二行：伪元素选择器：选择部分内容再见吧！

伪元素选择器：选择部分内容再见吧！

	p::after{

		content: "再见吧！"

	}

::first-line：选择指定选择器的首行

        p::first-line{

        	background-color: red;

        }

::first-letter：选择文本的第一个字符

        p::first-letter{

        	background-color: yellow;

        }

选择器优先级

    内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

        内联样式 优先级 1000

        id 选择器 优先级 100

        类选择器 优先级 10

        元素选择器 优先级 1

        通配符选择器 优先级 0

    如果是两种相同优先级 为同一个元素 同一个属性设置 的话，是哪个写在代码靠后 最终就按那个的样式

CSS修改文字属性

文字

字体

文字

font-family: "Microsoft Yahei"

字体粗细

lighter

文字

bolder

文字

font-weight: lighter\bolder

字体颜色

文字

  方式1:

    	color: red;

  方式2:

    	color: rgb(128, 128, 128);

  方式3:

    	color: #4f4f4f;

  方式4：

        color: rgba(250,100,100,0.4);

        a 表示的是透明度，其默认值为0，取值范围为0~1之间，可以为小数。

文字对齐

text-align:center/left/right (居中，左对齐，右对齐)

文字装饰(重点)

text-decoration: none;  主要就是用于去除a标签的下划线

text-decoration: line-through;  删除线

text-decoration: overline;	上边线

text-decoration: underline;	下划线

首行缩进

text-indent: 20px 首行缩进20px

背景属性

背景颜色

background-color: red;

背景图片

background-image: url(); ()内放入图片地址

如果我们的图片没有图片所在标签大，那么默认自动填充满，整个标签的区域。

  background-repeat:no-repeat\repeat-x\repeat-y  是否平铺(不平铺，水平平铺，垂直平铺)

  background-position:left top;  图片位置

  background-attachment: fixed;  背景附着

"""

如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)

	background:#336699 url('1.png') no-repeat left top;

"""

边框

自定义调整每个边的边框

  border-left/top/right/bottom-color: black;

  border-left/top/right/bottom-width: 5px;

  border-left/top/right/bottom-style: solid;

  边框样式有8种：

  solid： 实线边框，经典边框。

  double： 双线边框，含有两条线。

  groove： 槽线边框，看起来就像页面中的一个槽。

  outset： 外凸边框，看起来就像从页面凸出来一样。

  dotted： 虚线（点线）边框。

  dashed： 破折线边框。

  inset： 内凹边框，看起来像页面凹进去一样。

  ridge： 脊线边框，看起来像页面上一个凸起来的山脊。

简写：border: 5px solid black;  顺序无所谓 只要给了三个就行

display属性

    display: none; ---------------让标签消失(隐藏元素并脱离文档流)，即此元素不会被显示。

    display: inline; ---------------内联元素(内联表签)，此元素前后没有换行符。

    display: block; ---------------块级元素(块级标签)，此元素前后会带有换行符。

    display: inline-block; -------既有inline的属性也有block属性，即行内块元素。

    display：inherit；-----------规定应该从父元素继承 display 属性的值。

    1、none： 元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden， 是保留元素的空间的。

    2、inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是

无法设置宽高的，所以一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时

影响它的高度一般是内部元素的高度（font-size）和padding。

    3、block： 将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width

和height了。元素独占一行。

    4、inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，

又可以设置width和height。

盒子模型

    CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容

    Margin(外边距) - 清除边框外的区域，外边距是透明的

    Border(边框) - 围绕在内边距和内容外的边框。

    Padding(内边距) - 清除内容周围的区域，内边距是透明的。

    Content(内容) - 盒子的内容，显示文本和图像。

浮动

通过浮动可使一个元素向其父元素的左侧或右侧移动

float	设置元素的浮动
none	默认值，元素不浮动
left	向左浮动
right	向右浮动

注意：

  元素设置浮动后，水平布局的等式不需要强制成立

  元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置 所以元素下边的还在文档流中的元素会自动向上移动。

浮动的特点：

  1.浮动元素会完全脱离文档流，不再占据文档流中的位置

  2.设置浮动以后元素会向父元素的左侧或右侧移动

  3.浮动元素默认不会从父元素中移出

  4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素（水平方向）

  5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

  6.浮动元素不会超过它上边浮动的兄弟元素，顶多就是一样高（垂直方向）

脱离文档流的特点（元素设置浮动从文档流中脱离以后，元素的一些特点也会发生改变）

    块元素

      1.块元素不再独占页面一行

      2.脱离文档流以后，块元素的宽度和高度默认都被内容撑开

    行内元素

      行内元素脱离文档流后会变成块元素，特点与块元素相同（脱离文档流后，不需要再区分块和行内了）

浮动的影响

浮动会造成父标签塌陷

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>浮动</title>

    <style>

        #main1{

            width: 400px;

            height: 300px;

            background:rgb(182, 182, 182) ;

        }

        #child1{

            width: 100px;

            height: 100px;

            background: pink;

        }

        #child2{

            width: 100px;

            height: 100px;

            background: yellow;

        }

    </style>

</head>

<body>

    <div id="main1">

        <div id="child1"></div>

        <div id="child2"></div>

    </div>

</body>

</html>

没设置浮动时,2个色块并列显示

给child1添加浮动后

  #child1{

            width: 100px;

            height: 100px;

            background: pink;

            float:left;

        }

浮动
#main1 { width: 400px; height: 300px; background: rgba(182, 182, 182, 1) }
#child1 { width: 100px; height: 100px; background: rgba(255, 192, 203, 1); float: left }
#child2 { width: 100px; height: 100px; background: rgba(255, 255, 0, 1) }

黄色盒子“消失”不显示。（其实黄色盒子并没有消失，它只是被粉色盒子挡住。）

给child1、child2都设置浮动

 #child1{

            width: 100px;

            height: 100px;

            background: pink;

            float:left;

        }

        #child2{

            width: 100px;

            height: 100px;

            background: yellow;

            float:left;

        }

2个色块并排显示。

在不清除浮动的情况下添加p标签：

 <div id="main1">

        <div id="child1"></div>

        <div id="child2"></div>

        <p>P标签</p>

    </div>

此时的p标签显示在右上角而不是紧挨着2个色块下方，（正常情况下P标签应该在2个色块的下面）那么这时就需要用到清除浮动以保证页面的正常显示。

P标签

清除浮动

1.添加clear属性：(给不需要浮动的元素添加)

p{

	background:rgb(182, 255, 182);

	clear: both;

 }

2.使用after伪元素选择器：(最常用的)

.clearfix::after {

            content: '';

            clear: both;

            display: block;

        }

哪个标签塌陷了就给谁添加上clearfix类名即可

<div id="main" class='clearfix'>

        <div id="child1"></div>

        <div id="child2"></div>

        <p class="p1">P标签</p>

    </div>

定义父级元素的高度：

当父级元素有固定高度时，浮动元素会跟随父级元素显示宽高。