• CSS学习小结

    css的两种使用方式：

    ①内嵌样式表

    ②导入外部样式表（实际开发常用）

    选择器：

    ①标签选择器：通过标签种类决定

    ②类选择器：class="..."

    ③id选择器：id="..."

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<style>
    7. 			div {
    8. 				font-family: serif;
    9. 				/*字体*/
    10. 				font-style: italic;
    11. 				/*斜体*/
    12. 				text-decoration: lightblue line-through;
    13. 				/*字体装饰*/
    14. 				line-height: 10px;
    15. 				/*行高*/
    16. 				letter-spacing: normal;
    17. 				/*字符之间的距离*/
    18. 				text-indent: 2em;
    19. 				/* 缩进 */
    20. 				text-align: center;
    21. 				/* 居中 */
    22. 			}
    23. 		style>
    24. 	head>
    25. 	<body>
    26. 		<div>
    27. 			据介绍，ChatGPT 新增的语音功能由一个新文本到语音模型提供支持，能够仅通过文本和几秒钟的语音样本生成“类似人类的音频”，OpenAI 也请了专业配音演员合作创作了 5 种声音。与此同时，OpenAI
    28. 			还用了其开源语音识别系统 Whisper 将语音转录为文本。
    29. 		div>
    30. 	body>
    31. html>
    伪类：

    表示标签一种特殊状态。

    语法：

    选择器:hover 鼠标悬停状态

    选择器:active 鼠标点击后状态

    选择器:focus 向拥有键盘输入状态

    CSS列表修饰：
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<style>
    7. 			li {
    8. 				list-style-type: square;
    9. 				/* 列表图标样式square/none *//
    10. 				list-style-image: url();
    11. 				/* 列表图标图片样式 */
    12. 				list-style-position: inside;
    13. 				/* 图标位置 */
    14. 				list-style: ;
    15. 				/* 简写 */
    16. 			}
    17. 		style>
    18. 	head>
    19. 	<body>
    20. 		<li>1li>
    21. 		<li>2li>
    22. 		<li>3li>
    23. 		<li>4li>
    24. 		<li>5li>
    25. 	body>
    26. html>
    盒子模型（box-model）

    CSS处理网页时，他认为每个标签都存在盒子里。

    盒子结构组成：内容区，外边距，内边距，边框

    标签实际大小：内容区大小+内边距大小+边框

     内边距padding：l r t b

    外边距margin：

    标签居中方式margin：auto

    边框：标签最外层，也计算在标签大小之内。

    border-radius:边框弧度

    border: 0px 线条 颜色；

    outline:none

    浮动

    float：none/left/right

    浮动后的标签会脱离原来的文档流，不占用原来的空间。

    因为不再占用原来的空间，那么当有文档流占用时，浮动的标签可能会遮挡文档流，该如何解决呢？

    解决办法：

    ①为浮动的标签的父标签添加宽高，撑开父标签。

    ②clear清除浮动clear:left/right/both

    CSS定位（position）

    ①相对定位relative：

    相对于起点定位（文档流）

    不设置偏移量，标签不会移动，不脱离文档流

    ②绝对定位absolute：

    脱离文档流浮动。

    相对于离他最近的开启了定位的父级标签（position：relative）进行定位，否则相对于浏览器窗口进行定位。

  • 相关阅读:
    常用的Java日志框架：Log4j、SLF4J和Logback
    JUC源码学习笔记4——原子类，CAS，Volatile内存屏障，缓存伪共享与UnSafe相关方法
    vue中插槽slot
    Java8新特性
    大数据管理系统架构Hadoop
    Oracle/PLSQL: To_Lob Function
    驱动基石之_tasklet中断下半部_工作队列_中断线程化处理
    280 基于matlab的摇号系统GUI界面仿真MATLAB程序
    点云入门知识
    redis字典
  • 原文地址：https://blog.csdn.net/m0_71385141/article/details/133527081