html+css-CSDN博客

本文链接：https://blog.csdn.net/m0_74033027/article/details/128511512

文章详细介绍了CSS中的文本缩进、字间距、行内元素与块元素、定位属性如absolute和fixed，以及伪类如:checked和:focus的效果。还讨论了HTML标签的用法，包括<form>、<input>、<audio>、<video>和一些特殊标签如<ruby>、<bdo>等，以及如何实现下拉菜单和雪碧图的使用方法。

摘要由CSDN通过智能技术生成

<text-indent>：文本缩进

首行缩进
em单位：相对单位

<letter-spacing>：字之间的间距

<word-spacing>：词之间的间距（针对英文）

强行折行：针对英文和数字
<word-break：break-all>（非常强烈的折行）
<work-warp：break-word>（没有那么强烈的折行，会产生一些空白区域）

：after、：before

通过伪类的方式可以给元素添加一段文字，使用content属性

<style>
     div:after{content: "world"; color: rgb(164, 112, 227);}
</style>

：checked

对表单标签进行操作，使得表单标签可以被选中的时候才有样式变化

：disabled

固定表单标签，不可被选择

也可以直接将checked属性和disabled属性加在元素后面，会自动选择带有该属性的标签进行操作

<style>
        :checked{width: 50px; height: 50px;}
</style>
/*或者*/
        <input type="checkbox" checked>3
        <input type="checkbox" disabled>4

:focus

是的光标滑动到表单内部时候改变颜色

<style>
      :focus{background-color: rgb(244, 161, 161);}
</style>

<form action="#">
      <input type="text">
</form>

inline（内联）:span、a、em、strong、img……

内联标签之间会有空隙是由于换行产生

替换元素：浏览器根据元素的标签和属性，来决定元素的具体内容显示

非替换元素：将内容直接告诉浏览器，将其显示出来

display:none是不粘空间的隐藏（相当于消失）

visibility：hidden是占空间的隐藏

块不一定能嵌套块

块不一定能嵌套块

内联标签不能嵌套块标签

a标签不能再嵌套a，但是可以嵌套block和span

溢出隐藏
overflow

visible：默认

hidden：隐藏溢出部分

scroll：会出现滚动条

auto：会根据文本内容多少来出现滚动条

对应特定x轴和y轴：overflow-x overflow-y

手势

当鼠标移入指定区域，会展示不同的鼠标效果

cursor：default（默认箭头）、move、help

要实现自定义手势：准备图片，图片格式必须为 .cur/.ico ，再在后面加上auto

div{cursor:url(./img/cursor.ico),auto}

图片本身属于内联，内联元素的默认对齐方式是按照文字基线对齐vertical-baseline（默认），可以用vertical-bottom使得和底线对齐

white-space：nowrap 不让内容折行white-space：nowrap 不让内容折行

overflow：hidden 隐藏溢出内容

text-overflow：ellipsis 添加省略号

blockquote：引用大段的段落解释
q：引用小段的段落解释
abbr：缩写或首字母缩略词
address：引用文档地址信息
cite：引用著作的标题

iframe元素会创建包含另一个文档的内联框架（即内框架）
就是在一个页面内再打开另一个页面

<pre>和<code>标签引入代码

<map>与<area>标签

定义一个客户端图像映射，图像映射（image-map）指带有可点击区域的另一幅图像。area元素永远嵌套在map元素内部。area元素可以定义图像映射中的区域
shape（形状）：rect–矩形，circ–圆形，poly–多边形
coords（坐标）
href（点击对应区域所跳转的链接）
usemap：（锁定对应热区）

<img src="./五角星.png" alt="" usemap="#star">
<map name="star">
      <area shape="poly" coords="286 286 106 281 195 224" href="https://uland.taobao.com" alt="">
</map>

//当第一个格式不起作用的时候可以采用第二个格式

<audio>标签表示嵌入音频文件，<video>表示嵌入视频文件//默认控件是不显示的，可通过<contorls>属性来显示控件为了能够支持多个备选文件的兼容支持，可以配合<source>标签–用作备选方案

control属性：显示控件
loop属性：循环播放
autoplay属性：自动播放

ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音
bdo标签可以覆盖默认的文本方向，rtl（从右向左）ltr（从左向右）

datalist：选项列表details/summary：文档细节、文档标题
progress/meter：定义进度条/定义度量范围
time：定义日期或时间
mark：带有记号的文本

 <input type="text" list="elems">
 <datalist id="elems">
        <option value="a"></option>
        <option value="abc"></option>
        <option value="abcdhhe"></option>
        <option value="ajdxbjx"></option>
        <option value="shixnskaa"></option>
 </datails>

在这里插入图片描述
position特性：css position属性用于指定一个元素在文档中的定位方式。

top、right、bottom、left属性决定了该元素的最终位置

position取值：static（默认值）、relative(相对)、absolute（绝对）、fixed（固定）、sticky

relative：如果没有定位偏移，对元素本身没有影响

不使元素脱离文档流

不影响其他元素布局

left/top/right/bottom是相对于当前元素自身进行偏移的

<style>
        div{width: 50px;height: 50px;}
        .text1{background: red;position: relative;}
        .text2{background: greenyellow;position: relative;left: 50px;}
        .text3{background: blue;position: relative;bottom: 50px;}
        .text4{background: rgb(249, 40, 190);}
</style>

absolute

使得元素完全脱离文档流

使得内联元素支持宽高（让内联具备块的特性）

使得块元素默认宽高根据内容决定（让块具备内联的特性）

如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

 /*使得元素完全脱离文档流，类似于浮动*/
<style>
.text1{background: red;position: absolute;width: 100px;height: 100px;}
 .text2{background: greenyellow;width: 200px;height: 200px;}
</style>
/*使得内联元素支持宽高（让内联具备块的特性）*/
 span{width: 100px;height: 100px;background: red;position: absolute;}
 /*使得块元素默认宽高根据内容决定（让块具备内联的特性）*/  
div{background: red;position: absolute;}
 /*如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）*/  
/*text1无变化*/  
.text1{width: 100px;height: 100px;border: 1px black solid;margin: 200px;}
.text2{background: rgb(228, 54, 72);width: 20px;height: 20px;position: absolute;left: 0;}

fixed固定定位
使元素完全脱离文档流

使得内联元素支持宽高（让内联具备块的特性）

使得块元素默认宽高根据内容决定（让块具备内联的特性）

相对于元素默认浏览器窗口进行偏移，不受浏览器滚动条的影响

stiky黏性定位

在指定的位置，进行黏性操作

定位实现下拉菜单

<!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>Document</title>
    <style>
        *{margin: 0%;padding: 0%;}
        ul{list-style: none;}
        p{text-align: center;}
        .menu{width: 100px;height: 28px;background: rgb(159, 159, 230);
            margin: 20px auto;border: 1px solid black;position: relative;}/*absolute如果父容器没有定位，会导致下面的以body来偏移*/
        .menu ul{width: 100px;margin-top: 8px;background: white;
            border: 1px solid black;position: absolute;left: -1px;top: 20px;display: none;}/*display:none;使ul消失*/
        .menu:hover ul{display:block;}/*当鼠标移入menu，ul会恢复块的形式*/
        .menu ul li:hover{background: grey;}/*当鼠标移入li，会显示灰色背景*/
    </style>
</head>
<body>
    <div class="menu">
        卖家中心
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
    </div>
    <p>测试文本测试文本测试文本测试文本</p>
</body>
</html>