前端笔记3

1.权重问题

标签选择器	0001
class选择器	0010
id选择器	0100
伪类选择器	0010
包含选择器	权重之和
属性选择器	0010
伪元素选择器	0001
内联样式	1000

2.字体相关样式

<style>
        div {
            /* 是否斜体文本 */
            /* font-style: italic;
            font-weight: 900;
            font-size: 10px;
            font-family: "微软雅黑"; */

            font: 600 italic 29px/200px "微软雅黑";
        }
    </style>

font-style	文本形式（斜体。。。）
font-weight	文本粗细
font-size	文本大小
font-family	字体
font	顺序：粗细 形式 大小/ 行距    字体

3.文本相关的样式

text-indent	首行缩进（2pm 2个文本距离）
line-height	行距

4.文本装饰

<style>
        a {
            /* 文本装饰：去除a链接默认样式 */
            text-decoration: line-through;
            /* 设置文字颜色 */
            /* color: rgb(255, 0, 208); */
            /* color: rgba(rgb(2rgb(63, 216, 63)9, 39), rgb(70, rgb(50, 50, 200), 70), rgb(26, 26, 191), .4) */

        }

        div {
            width: 120px;
            height: 120px;
            background-color: black;
            opacity: 0.2;
        }
    </style>

text-decoration	文本装饰
line-through	文本中间横线
opacity	透明度

5.列表相关样式

 <style>
        li {
            /* list-style-type: none; */
            /* list-style-image: url(https://t7.baidu.com/it/u=2582370511,530426427&fm=193&f=GIF); */
            list-style-position: inside;

            list-style: none;
        }
    </style>

list-style-type	列表样式
list-style-image	列表排序用图片
list-style-position	指定标记框在主体块框中的位置

6.背景

<style>
        body {
            height: 3000px;
            /* 背景颜色 */
            background-color: aqua;
            /* 背景图片 */
            background-image: url(../47558978173153.jpg);
            background-repeat: repeat-y;
            /* background-position: left top */
            /* background-attachment: fixed; */
            /* 强行铺满 */
            /* background-size: cover; */
        }

        div {
            width: 800px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>

background-repeat	背景重复
background-position	背景位置
background-attachment	决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
margin	为给定元素设置所有四个（上右下左）方向的外边距属性

7.文本方向

direction	用于设置文本、表格列和水平溢出的方向
rtl	从右向左
ltr	从左向右

8.隐藏元素

/* display: none; */
            /*  */
            /* visibility: hidden; */
            opacity: 1;

display	none隐藏
visibility	hidden隐藏
opacity	0-1 透明到深

9.元素类型

元素：块元素、行内元素、行内快元素

        块元素：默认独占一行，设置宽高、设置内外边距   div、h1~h6、p、li

        行内元素：无法直接设置宽高、内外间距   a、span

        行内块元素：可以直接设置宽高、不会独占一行   img、input

/* 将其他元素转换为块元素 */
            /* display: block; */
            display: inline-block;

       

block	块元素
inline-block	行内块元素

10.边框

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            /* border-width: 20px;
            border-style: double;
            border-color: black; */
            border: 1px solid red;
            border-radius: 50%;
        }
    </style>

border-style	边框样式
border-radius	设置元素的外边框圆角
border	宽 样式 颜色

11.表格

<style>
        table {
            border-collapse: collapse;
        }

        td {
            width: 100px;
            height: 50px;
            border: 1px solid black;
            text-align: center;
            color: pink;
            text-decoration: underline;

        }
    </style>

border-collapse

决定表格的边框是分开的还是合并的

12.

<style>
        textarea {
            width: 300px;
            height: 70px;
            resize: none;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            cursor: cell;
        }
    </style>

resize	文本域调整
cursor	鼠标指针悬停在元素上时显示相应样式

13.绝对定位

 <style>
        .father {
            position: relative;
            width: 900px;
            height: 400px;
            background-color: aqua;

        }

        .son1 {
            position: absolute;
            top: 200px;
            right: 0px;
            z-index: 1;
            background-color: blue;
        }

        .son2 {
            position: absolute;
            top: 150px;
            right: 0px;

            background-color: blueviolet;
        }

        .son {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son son1"></div>
        <div class="son son2"></div>
    </div>
</body>

position	定位
relative	该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置
absolute	元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置
top	距顶部
left	距左部
right	距右部
buttom	距底部
z-index	属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序（前后覆盖）

14.固定定位

 <style>
        body {
            height: 3000px;
            background-color: aqua;
        }

        div {
            position: fixed;
            bottom: 15px;
            right: 10px;
            width: 300px;
            height: 300px;
            background-color: black;

        }
    </style>
</head>

<body>
    <div></div>

</body>

fixed

固定

15.粘性定位

  <style>
        .posi {
            position: sticky;
            top: 20px;
            background-color: aqua;
        }
    </style>

sticky

粘性