简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Web 前端 - CSS - 基础知识
Blogger Information
Blog 33
fans 0
comment 0
visits 27670
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Web 前端 - CSS - 基础知识
郴
Original
622 people have browsed it

Web 前端 - CSS - 基础知识

[toc]

一、文档流

序号 内容 描述
1 文档流的结构 把页面分为一行一行的，其中块元素单独占一行，而相邻的行内元素则从左到右排成一行直到该行排满
2 脱离文档流 将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位
3 如何脱离文档流 1）float 浮动：浮动会脱离文档流而不会脱离文本流，其他盒模型中的文字还是会为其让出位置，> 环绕在其周围；<br> 2）absolute/fixed 绝对定位：绝对定位会使元素脱离文档流同时脱离文本流，其他盒模型元素和其中的文字的排列都会忽略它
4 文本流 文本流和文档流的定义本质是相同的，文档流是相对于盒子模型讲的，而文本流是相对于 HTML 中的文字段落来讲的。概括的说就是文档对一系列字符的读取和输出的顺序，和文档流一样自上而下，从左至右排列

二、元素的分类

序号 类型 特点 例子
1 块级元素 1.形状：以块的形式显示为一个矩形区域<br>2.空间：新起并独占一行<br>3.排列：自上而下<br>4.宽高设置：自定义<br>5.内外边距设置：自定义<br>6.囊括：可以包含行内元素和其他块级元素 <div>、<p>等
2 行内元素 1.形状：无形状<br>2.空间：和其他行内元素同处一行<br>3.排列：并排，从左至右<br>4.宽高设置：无法自定义，宽高由内容决定<br>5.内外边距设置：仅左右内外边距可以设置<br>6.囊括：只能嵌套内联元素，不能嵌套块元素 <a>、<input>等
3 行内块元素 1.形状：以块的形式显示为一个矩形区域<br>2.空间：和其他行内元素同处一行<br>3.排列：并排，从左至右<br>4.宽高设置：自定义内外边距设置：自定义 <img> 等
  • 行内块元素以块级显示但不会独占一行，而是和其他行内或行内块元素同处一行

三、display 属性

  • display 属性用来指定元素怎样生成盒模型
序号 值 描述
1 inline 行内元素
2 block 块级元素
3 inline-block 行内块元素
4 list-item 会当做列表显示的元素
5 table 块级表格显示
6 flex 弹性伸缩盒
7 grid 块级网格显示

四、一些选择器

序号 选择器 描述 格式
1 * 选择所有元素 *
2 element 选择指定元素名称的元素 element
3 > 选择所有父级是元素 1 的元素 2 元素 ele1 > ele2

五、css 样式的应用方式

序号 内容 描述 分类
1 <link> 使用 link 标签导入 外部导入
2 @import 使用 import 指令导入 外部导入
3 <style> 使用 style 标签编辑 当前页面编辑，只有当前页面有效
4 style 使用 style 属性编辑 当前元素编辑，只有当前元素有效

六、媒体查询

  • 媒体查询: 设置浏览器使用指定的样式表的媒体

1. 使用场景

序号 场景 描述
1 <link> <link media="screen,print">
1 <style> <style media="screen,print">
1 @import @import url(...) screen,print;
1 @media @media screen,print {...}

2. 媒体类型

媒体类型是不同媒体的标识符

序号 类型 描述
1 all 所有媒体类型,即不限制
2 print 打印机,预打印预览使用
3 screen 屏幕,如浏览器等用户代理
4 projection 幻灯片

多种媒体类型之间使用逗号分隔: @media screen, print

3. 媒体描述符

  • 媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等
  • 媒体描述符的语法与 css 样式声明非常类似,如min-width: 500px
  • 与 css 声明的不同之处在于,媒体描述符允许没有值,如print and (color)
  • 多个 “媒体描述符” 之间使用 “逻辑关键字” 连接, 如 and 和 not
  • and表示多个”媒体描述符”必须同时满足, not则是整个查询取反,且必须写在and前面

常用 “媒体描述符”(显示区域相关)

序号 媒体描述符 描述
1 width 显示区域宽度
2 min-width 显示区域最小宽度
3 max-width 显示区域最大宽度
4 device-width 设备显示区域宽度
5 min-device-width 设备显示区域最小宽度
6 max-device-width 设备显示区域最大宽度
7 height 显示区域高度
8 min-height 显示区域最小高度
9 max-height 显示区域最大高度
10 device-height 设备显示区域高度
11 min-device-height 设备显示区域最小高度
12 max-device-height 设备显示区域最大高度

max-width与max-device-width区别:

  • max-width: 浏览器显示区域宽度,与设备无关,通常用于 PC 端
  • max-device-width: 设备分辨率的最大宽度,通常用于移动端

七、实例

1. 行内、块级和行内块元素

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>行内、块级和行内块元素</title>
  7.     <style>
  8.       #box {
  9.         width: 700px;
  10.         height: 300px;
  11.         background-color: antiquewhite;
  12.         margin: 0 auto;
  13.       }
  14.       p {
  15.         background-color: aquamarine;
  16.       }
  17.       a {
  18.         background-color: cornflowerblue;
  19.       }
  20.       img {
  21.         width: 100px;
  22.         height: 60px;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div id="box">
  28.       <p>p标签：这是一个块级元素</p>
  29.       <a href="#">链接1</a>
  30.       <a href="#">链接1</a>
  31.       <a href="#">a标签是一个行内元素</a>
  32.       <a href="#">后面的img标签是一个行内块元素</a>
  33.       <img
  34.         src="https://img.php.cn/upload/image/633/168/482/1586144841178242.png"
  35.       />
  36.     </div>
  37.   </body>
  38. </html>

2. 媒体查询

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>媒体查询</title>
  7.     <style>
  8.       body {
  9.         background-color: cornsilk;
  10.       }
  11.       /*宽度大于或等于414px有效*/
  12.       @media screen and (min-width: 414px) {
  13.         body {
  14.           background-color: pink;
  15.         }
  16.         h1 {
  17.           color: rosybrown;
  18.         }
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <h1>你好，世界</h1>
  24.   </body>
  25. </html>


八、课程总结

  • 今天学习了 CSS 的基础知识，通过上课认真听讲和认真完成老师布置的作业，使得我对 CSS 的理解和运用更加深入和熟悉。最主要的知识点是明白了行内元素、块级元素以及行内块元素各自的特点和它们之间的区别，以及了解并熟悉了一些常见的 css 选择器和媒体查询是什么以及它的用法。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：完成的很好, 很认真
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！