蓝旭工作室2023春季培训第三周预习博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <style>
      #border1{
        border-style: solid dotted dashed double;
        border-width: medium 5px thick 10px;
        border-color: green #f00 rgb(0,0,255) hsl(0,60%,30%);
        border-radius: 10px;
        padding: 30px 30px 30px 30px;
        margin: 30px 20px 30px 20px;
        background-color: aquamarine;
        background-position: 50% 50%;
        background-repeat: repeat-y;
        box-shadow: 5px 5px 10px 1px yellow;
      }

    </style>
</head>
<body>
  <P id="border1">border example</P>
</body>
</html>

浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

选择器{float:属性值;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>title</title>
    <style>
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="left">左</div>
    <div class="right">右</div>
</body>

</html>

浮动特性

1.浮动元素会脱离标准流（脱标）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>title</title>
    <style>
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .right {
            width: 300px;
            height: 300px;
            background-color: paleturquoise;
        }
    </style>
</head>

<body>
    <div class="left">左</div>
    <div class="right">右</div>
</body>

</html>

2.浮动的元素会一行内显示并且元素内部对齐

3.浮动的元素会具有行内块元素的特性，即默认宽度由内容决定，同时支持指定高宽，盒子之间无空隙

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <style>
        * {
            margin: 0px;
        }
        span,div {
            float: left;
            width: 200px;
            height: 100px;
            background-color: pink;
        }
        p {
            float: right;
            height: 200px;
            background-color: paleturquoise;
        }
    </style>
</head>
<body>
    <span>span1</span>
    <span>span2</span>
    <div>div</div>
    <p>pppppppppp</p>
</body>
</html>

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。符合网页布局第一准侧。

定位

静态定位position:static

默认定位方式

相对定位position:relative

相对于自己原来位置，脱离标准流，移动之后，移动之前的位置仍然占有

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <style>
        .o {
                /*position: relative;
                left: 50px;
                top: 50px;*/
                width: 100px;
                height: 100px;
                background-color: aqua;
        }
</style>
 
<body>
        <div class="o">a </div>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <style>
        .o {
                position: relative;
                left: 50px;
                top: 50px;
                width: 100px;
                height: 100px;
                background-color: aqua;
        }
</style>
 
<body>
        <div class="o">a </div>
</body>
</html>

绝对定位position:absolute

他的参照物是先寻找自己父级除了static之外的有定位的，如果父级无其他定位，以浏览器为参照物。可以通过top，bottom，left，right移动位置也可以通过z-index设置层级。脱离标准流，移动之后，移动之前的位置不存在。

子绝父相，我们在使用绝对定位时一般都给父亲设置一个相对定位。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <style>
        .box1 {
                position: relative;
                width: 200px;
                height: 200px;
                background-color: pink;
        }
        .box2 {
                position: absolute;
                left: 50px;
                top: 50px;
                width: 100px;
                height: 100px;
                background-color: paleturquoise;
        }
</style>
<body>
        <div class="box1">
            <div class="box2"></div>
        </div>
</body>
</html>

蓝色以粉色为定位偏移，假如改变父级的位置

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <style>
        .box1 {
                position: relative;
                left: 50px;
                top: 50px;
                width: 200px;
                height: 200px;
                background-color: pink;
        }
        .box2 {
                position: absolute;
                left: 50px;
                top: 50px;
                width: 100px;
                height: 100px;
                background-color: paleturquoise;
        }
</style>
<body>
        <div class="box1">
            <div class="box2"></div>
        </div>
</body>
</html>

可以看出box2以父级box1为参照定位

固定定位position:fixed

可以通过top，bottom，left，right移动位置也可以通过z-index设置层级。脱离标准流。相对于浏览器设置，一般用于导航栏，浏览器拖动，fixed定位不动。如果遇到定位层级关系，可以通过z-index设置层级高低。不设置默认为0。

伪类

动态伪类

:link 链接没有被访问前的样式效果
:visited 链接被访问后的样式效果
:hover 鼠标悬停在元素上的样式效果
:active 点击元素时的样式效果
:focus 元素成为焦点时的样式效果

结构伪类

:first-child 选择某个元素下的第一个子元素
:last-child 选择某个元素下的最后一个子元素
:nth-child() 选择某个元素下的一个或多个特定的子元素
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从后往前数
:nth-of-type() 选择指定的元素
:nth-last-of-type() 选择指定的元素，从后往前数
:first-of-type 选择一个父级元素下的第一个同类型子元素
:last-of-type 选择一个父级元素下的第一个同类型子元素，从后往前数
:only-child 选择的元素是它父元素的唯一一个子元素
:only-of-type 选择一个元素是上级元素下唯一相同类型的子元素
:empty 选择的元素里面没有任何内容（空标签）

否定伪类

:not( ) 排查或过滤掉特定元素

状态伪类

:enabled 选择匹配指定范围内所有可用UI(用户界面)元素
:disabled 选择匹配指定范围内所有不可用UI(用户界面)元素
:checked 选择匹配指定范围内所有可用UI(用户界面)元素

目标伪类

:target 选择匹配父元素的所有元素，且匹配元素被相关URL指向

伪元素

CSS 伪元素用于设置元素指定部分的样式

它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

伪元素列表

::after p::after 在每个 <p> 元素之后插入内容。
::before p::before 在每个 <p> 元素之前插入内容。
::first-letter p::first-letter 选择每个 <p> 元素的首字母。
::first-line p::first-line 选择每个 <p> 元素的首行。
::selection p::selection 选择用户选择的元素部分。

::before ::after

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <head>
        <style>
            p::before{content:"【"}
            P::after{content: "】";}
        </style>
    </head>
    <body>
        <p>阿巴阿巴</p>
    </body>
</html>

注：::before和::after来添加的内容是不可以被鼠标选中的

::first-letter

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <head>
        <meta charset="UTF-8">
        <title>伪元素</title>
        <style>
            p::first-letter{color: rgb(233, 55, 55);font-size: 25px;}
        </style>
    </head>
    <body>
        <p>----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
    </body>
</html>

::first-line

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <head>
        <meta charset="UTF-8">
        <title>伪元素</title>
        <style>
            p::first-line{color: aqua;font-size: 20px;}
        </style>
    </head>
    <body>
        <p>----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
    </body>
</html>