11.19笔记+作业

最新推荐文章于 2024-09-15 21:53:51 发布

scd0208

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量37

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/scd0208/article/details/134507150

版权

1.权重

标签选择器：0001

class选择器： 0010

id选择器：0100

伪类选择器：0010

包含选择器：权重之和

属性选择器：0010

伪元素选择器：0001

内联样式：1000

2.字体相关样式

font：weight。style，size，family

3.文本相关样式

line-height 行高

text-indent:首行缩进 em一个字符

ext-align：文本位置

4.文本修饰

text-decoration：none去下划线

opacity：透明度 0~1

5.列表相关样式

list-style type定义列表的标记类型

position 对列表项进行定位

image 定义图像为标记

6.背景

body{

background-image: url（）

background-attachment: fixed锁定背景

background-size: cover全覆盖

}

7.文本方向

direction: rtl 从右边开始

8.隐藏元素

display: none

opacity: 0

visibility: hidden;

9.元素的类型

块元素	默认独占一行，设置宽高、设置内外边距 div、h1~h6、p、li
行内元素	无法直接设置宽高、内外间距 a、span
行内快元素	可以直接设置宽高、不会独占一行 img、input

display：inline-block行内块元素

block;块元素

10，边框

border=（x）px 类型颜色

11.表格

table {

border-collapse: collapse;

}

12.文本域

textarea {

resize: none;

}不可更改文本域大小

13.决对定位

position: absolute

position: relative

14.固定定位

position: fixed

15.粘性定位

position: sticky

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 711px;
            height: 400px;
            margin: 0 auto;
        }
        .box{
            position: relative;
            border: 3px solid orange;
        }
        .box1{
            position: absolute;
            top:0;
            left: 0;
            }
        .box:hover{
            opacity: 0.5;
         
        }
        .ct{
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>
</head>
<body>
  <div class="box"><img src="../images/sed.jpg" >
    <div class="box1">
        <img src="../images/arr.png" class="ct">
    </div>
</div>
  
</body>
</html>