<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>
雪碧图使用步骤
- 先确定要使用的图标
- 测量图标的大小
- 根据测量结果创建一个元素
- 将雪碧图设置为元素的背景
- 设置一个偏移量以显示正确的图片
css圆角
border-radius
: 100px(左上和右下) 100px(右上和左下);
border-radius
:1px 2px 3px 4px(左上 右上 左下 右下);