【1012 | Day 43】前端之CSS(下)

目录

1. display属性

用于控制HTML元素的显示效果

意义
none HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
block 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
inline 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
inline-block 使元素同时具有行内元素和块级元素的特点。

1.1 display:"none"与visibility:hidden的区别

  • visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
  • display:none: 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

1.2 演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*消失设成none*/
            /*display: none;*/
            display: inline;
        }

        span{
            width: 200px;
            height: 100px;
            background-color: blue;
            display: inline-block;
            /*display: block;*/
        }
        .a{
            width: 400px;
            height: 300px;
            background-color: green;
            visibility:hidden

        }

        .b{
            width: 400px;
            height: 300px;
            background-color: pink;
            display:none;

        }

        .c{
            width: 400px;
            height: 300px;
            background-color: red;
             display: block;

        }
        /*.a,.b{*/
            /*display: inline-block;*/
        /*}*/


    </style>
</head>
<body>
<div>按行内元素显示</div>
<span>同时具有行内元素和块级元素的特点</span>
<span>同时具有行内元素和块级元素的特点</span>
<div class="a">元素虽然被隐藏,但仍然会影响布局</div>
<div class="b">元素被隐藏,且不会占用任何空间</div>
<div class="c">默认占满整个页面宽度,如果设置了指定宽度,margin填充剩下的部分</div>

</body>
</html>

2. label属性

点击文本,指针同样可以自动跳到文本框

2.1 演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <label for="a"> 姓名:</label>
    <input type="text" id="a">
    <label for="b">男</label>
    <input type="radio" id="b" name="sex">
    <label for="c">女</label>
    <input type="radio" id="c"  name="sex">
</form>
<label for="c">点我</label>

</body>
</html>

3. overflow溢出属性

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
  • overflow(水平和垂直均设置)
  • overflow-x(设置水平方向)
  • overflow-y(设置垂直方向)

3.1 max-width最大宽度与min-width最小宽度

  • 我们设置两个盒子,一个“divcss5-min-width”设置对象里,img图片最小宽度为200px。而实际图片只有165px,所以图片被拉伸到200px

  • 一个“divcss5-max-width”设置对象里,img图片最大宽度为200px限制。而实际对象里图片宽度是375px,这个时候我们设置了此图片最大宽度为200px,所以图片被CSS max-height缩小到200px

3.2 演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div {
            width: 200px;
            height: 200px;
            border: white solid 2px;
            overflow: hidden;
            border-radius: 50%;
        }
        img{
            max-width: 200px;
            min-height: 200px;
        }
    </style>

</head>
<body>
<div>
    <img src="1.jpeg" alt="">
</div>

</body>
</html>

4. 定位(position)

4.1 无定位(static)

static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。

4.2 相对定位(relative)

4.2.1 定义

  • 相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。
  • 有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。
  • 对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。
  • 而其层叠通过z-index属性定义。

4.2.2 注意

  • position:relative的一个主要用法:方便绝对定位元素找到参照物。

4.2.3 演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
       *{
           margin: 0;
           padding: 0;

       }
       div{
           width: 200px;
           height: 200px;
           background-color: gold;
           position: relative;
           top:20px;
           left: 40px;
       }

   </style>
</head>
<body>
<div></div>

</body>
</html>

4.3 绝对定位(absolute)

4.3.1 定义

  • 设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位。
  • 如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。
  • 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。
  • 元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

4.3.2 重点

  • 如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。
  • 这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的。
  • 那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left用百分比宽度表示。

4.3.3 另外

  • 对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。
  • 其层叠通过z-index属性定义。

4.3.4 演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .a{
            width: 400px;
            height: 400px;
            background-color: yellow;
            position: relative;
            float: right;
        }
        .b{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top:400px;
            left: 30px;
        }

        .c{
            width: 400px;
            height: 400px;
            background-color: black;
            float: left;

        }
    </style>

</head>
<body>

<div class="a">
    <div class="b"></div>
</div>
<div class="c"></div>

</body>
</html>

4.4 固定定位(fixed)

4.4.1 定义

  • 对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位。
  • 当出现滚动条时,对象不会随着滚动。
  • 而其层叠通过z-index属性定义。

4.4.2 注意

  • 一个元素若设置了position:absolute;fixed; ,则该元素就不能设置float。
  • 因为这是两个不同的流,一个是浮动流,另一个是“定位流”。
  • 但是 relative 却可以,因为它原本所占的空间仍然占据文档流。

4.4.3 理论

  • 被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。

4.4.4 演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            height: 1800px;
            background-color: pink;
        }
        .b{
            height: 50px;
            width: 50px;
            background-color: green;
            position: fixed;
            bottom: 10px;
            right: 10px;
        }

    </style>
</head>
<body>
<div class="a">我是背景</div>
<div class="b">随便你滚动,我雷打不动</div>

</body>
</html>

4.5 是否脱离文档流

4.5.1 脱离文档流

  绝对定位

  固定定位

4.5.2 不脱离文档流

  相对定位

4.5.3 演示

相对定位:发现仍占空间,不脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div {
            height: 100px;
            width: 200px;
            background-color: black
        }
        .c1 {
             height: 50px;
             width: 100px;
             background-color: blue;
        }
        .c2 {
             height: 100px;
             width: 50px;
             background-color: orange;
             position: relative;
             left: 100px;
        }
    </style>
</head>
<body>

<div class="c1"></div>
<div class="c2"></div>

</body>
</html>

绝对定位:不占据空间,脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        div {
            height: 50px;
            width: 100px;
            background-color: black;
        }

        .c1 {
            height: 50px;
            width: 100px;
            background-color: red;
            position: relative;
        }

        .c2 {
            height: 50px;
            width: 100px;
            background-color: green;
            position: absolute;
            left: 50px;
        }
    </style>
</head>
<body>
<div class="c1">购物车
    <div class="c2">空空如也</div>

</div>

</body>
</html>

固定定位:不占据空间,脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1{
            height: 50px;
            width: 500px;
            background-color: black;

        }

        .c2{
            height: 50px;
            width: 100px;
            background-color: pink;
            position: fixed;
            right: 10px;
            bottom: 20px;

        }

        .c3{
            height: 10px;
            width: 100px;
            background-color: green;

        }

    </style>
</head>

<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>

</body>
</html>

5. 文字属性

5.1 文字对齐(text-align)

text-align 属性规定元素中的文本的水平对齐方式。

描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐

5.2 文字装饰(text-decoration)

text-decoration 属性用来给文字添加特殊效果。

描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线:

a { text-decoration: none; }

5.3 首行缩进(text-indent)

将段落的第一行缩进 32像素

p { text-indent: 32px; }

去除li标签的样式

list-style: none;

5.4 字间距(letter-spacing)

将文字的间距调整为5像素

p {letter-spacing: 5px;}

5.5 演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*文字对齐方式*/
        div{
            width: 100px;
            background: yellow;
            text-align: center;
        }
        
        /*文字装饰*/
        div{
            width: 100px;
            background: yellow;
           text-decoration: underline;
           /* text-decoration: overline;*/
            /*text-decoration: line-through*/
        }
        
        a{
            text-decoration: none;
        }
        
        li{
            list-style: none;
        }
        
        /*缩进与字间距*/
        p,div{
            /*缩进*/
            text-indent: 32px;
            /*字间距*/
            letter-spacing: 10px;
        }
        
        /*行高*/
        /*div{*/
        /*    width: 400px;*/
        /*    height: 200px;*/
        /*    background: yellow;*/
        /*    text-align: center;*/
        /*    line-height: 200px;*/
        /*}*/


    </style>
</head>
<body>
<div> 王嘉尔</div>
<a href="">看看我吧</a>
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<p>随便写</p>
<div>出新歌啦</div>


</body>
</html>

6. 背景属性

  • 背景颜色
    background-color: red;
  • 背景图片
    background-image: url('1.jpg');
  • 背景重复
    repeat(默认):背景图片平铺排满整个网页
    repeat-x:背景图片只在水平方向上平铺
    repeat-y:背景图片只在垂直方向上平铺
    no-repeat:背景图片不平铺
    background-repeat: no-repeat;
  • 背景位置
    background-position: left top;
    background-position: 200px 200px;

6.1 演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 1000px;
            background-color: green;
            background-image: url("1.jpeg");
            background-repeat: repeat;

        }
        /*div{*/
        /*    height: 100px;*/
        /*    width: 100px;*/
        /*    background-image: url("1.jpeg");*/
        /*    background-position: 100px 400px*/
        /*}*/

    </style>

</head>
<body>
<div>
发拼多多的都被我拉黑

</div>


</body>
</html>

7. 边框

7.1 边框属性

  • border-width
  • border-style
  • border-color

标准:#i1 {

border-width: 2px;

border-style: solid;

border-color: red;

}

简写:#i1 { border: 2px solid red; }

7.2 边框样式

描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。

除了可以统一设置边框外还可以单独为某一个边框设置样式,如下所示:

#i1 {

border-top-style:dotted;

border-top-color: red;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:none;

}

7.3 演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            /*border: green solid 3px;*/
            border:orange solid 3px;
            /*这个属性能实现圆角边框的效果*/
            border-radius:50%;  
        }
    </style>
    
</head>
<body>
<div></div>

</body>
</html>

8. CSS盒子模型

8.1 盒子模型属性

描述
margin 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
padding 用于控制内容与边框之间的距离。
Border 围绕在内边距和内容外的边框。
Content 盒子的内容,显示文本和图像。

8.2 盒子模型图示

【1012 | Day 43】前端之CSS(下)

8.3 常用简写方式(margin|padding)

  • 提供一个,用于四边;
  • 提供两个,第一个用于上-下,第二个用于左-右
  • 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
  • 提供四个参数值,将按上-右-下-左的顺序作用于四边;

8.4 演示

margin:外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .a{
            width: 400px;
            height: 400px;
            border: black 1px solid;
            /*margin-bottom:20px ;*/
            /*margin-left: 40px;*/
            margin:20px 30px 40px 50px ;

        }
        .b{
            width: 300px;
             height: 400px;
            border: red 1px solid;
            /*margin-top: 35px;*/

        }
        .c{
            width: 20px;
            height: 20px;
            background-color: orange;
            margin:10px auto;
        }
    </style>

</head>
<body>
<div class ="a">
    <div class="c"></div>
    <div>!!!</div>
</div>

<div class="b">456</div>

</body>
</html>

padding:内填充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            border: orange solid 2px;
            padding-left: 30px;
            padding-top:300px;

        }
    </style>
</head>
<body>
<div>123</div>

</body>
</html>

9. 浮动(float)

9.1 定义

  • 在 CSS 中,任何元素都可以浮动。
  • 浮动元素会生成一个块级框,而不论它本身是何种元素。

9.2 特点

  • 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

9.3 属性

描述
left 向左浮动
right 向右浮动
none 默认值,不浮动

9.4 演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a,.b,.c{
            width: 250px;
            height: 250px;
        }
        
        .a{
            background-color: red;
            float: left;
        }
        
        .b{
            background-color: black;
            float: right;

        }
        
        .c{
            background-color: gold;
            float: right;
        }


    </style>
</head>
<body>
<div class="p clear">
    <div class="a">红色</div>
    <div class="b">黑色</div>
    <div class="c">金色</div>
    <!--<div class="clear"></div>-->

</div>

</body>
</html>

10. 清除(clear)

10.1 定义

clear属性规定元素的哪一侧不允许其他浮动元素。

10.2 属性

描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

10.3 注意

clear属性只会对自身起作用,而不会影响其他元素。

10.4 清除浮动

10.4.1 清除浮动的副作用

  • 父标签塌陷问题

10.4.2 主要有三种方式

  • 固定高度

  • 伪元素清除法(使用较多)

    .clearfix:after {
    content: "";
    display: block;
    clear: both;
    }

  • overflow:hidden

10.4 演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .a,.b,.c{
            width: 250px;
            height: 250px;
        }

        .a{
            background-color: red;
            float: left;
        }

        .b{
            background-color: black;
            float: left;
        }

        .c{
            background-color: gold;
            float: left;
        }

        .p{
            border: blue solid 3px;
            height: 100px;
        }

        .clear {
            clear: both;
        }

        /*.clear:after{*/
        /*    content: "";*/
        /*    display: block;*/
        /*    clear: right;*/
        /*}*/


    </style>
</head>
<body>
<div class="p clear">
    <div class="a">红色</div>
    <div class="b">黑色</div>
    <div class="c">金色</div>


</div>

</body>
</html>

11. 层叠顺序(z-index)

11.1 定义

  • z-index 值表示谁压着谁,数值大的压盖住数值小的

  • 只有定位了的元素,才能有z-index。也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index

  • z-index值没有单位,就是一个正整数,默认的z-index值为0。如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。

  • 从父现象:父亲怂了,儿子再牛逼也没用

11.2 演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            position: fixed;
            /*opacity:用来定义透明效果。取值范围是0~1,0是完全透明,1是完全不透明*/
            opacity:0.4;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(255,192,203,0.4);
            z-index:200;
        }
        
        .b{
            position: fixed;
            width: 200px;
            height: 200px;
            background-color: white;
            z-index:201;
            top:50%;
            left: 50%;
            margin: -100px 0 0 -100px;
        }

    </style>

</head>
<body>
<div class="a">asdasd</div>
<div class="b"></div>

</body>
</html>

注意:opacity:用来定义透明效果。取值范围是0~1,0是完全透明,1是完全不透明

上一篇:DP3 1012


下一篇:1012 数字分类 (20 分)