html选择器与文档流

【任务一】什么是html,它有哪些部分组成,每个部分之间的关系是什么?

【任务二】选择器有哪些?选择的权重?

【任务三】文档流:块元素与行内元素

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页, HTML 文档也被称为网页

​ HTML中由> 和标签组成头和身体

学习技巧:
在网页中 html 是专门用来负责网页结构的,所以在学习html使用的时候,
应该关注标签的语义,而不是样式

中的meta标签:

​ meta标签主要用于设置网页中一些元数据,这些元数据是用来给网页解析时使用的。

css选择器

  1. 元素选择器

  2. id选择器

  3. 类选择器

  4. 通配选择器

  5. 复合选择器

  6. 并集选择器

  7. 关系选择器

  8. 伪类选择器

    ​ —伪类是用来描述一个元素的转态,如:第一个元素,被点击的元素…

选择器的权重

​ 内联样式>id选择器>类和伪类选择器>元素选择器>通配选择器>继承样式

文档流

  1. 网页是一个多层的结构

  2. 通过css可以分别为每一层来设置样式

  3. 作为用户来说,他只能看到最上面的那一层

  4. 在这些层中,最底下的称为文档流,文档流逝网页的基础,我们创建 的元素,默认都是在文档流中进行排序的

  5. 元素有两个状态:

    ​ ①在文档流中

    块元素

    ​ ①块元素在网页中独占一行(自上向下,垂直排列)

    ​ ②默认宽度是父元素的全部

    ​ ③默认高度是被内容撑开

    行内元素

    ​ ①行内元素不会独占一行,只会占据自身大小

    ​ ②行内元素在页面中自作向右排列

    ​ ③行内元素默认宽度和高度都是被内容撑开

    ​ ②脱离文档流

    块元素

    ​ ①块元素在网页中不再独占一行

    ​ ②默认高度和宽度是被内容撑开

    行内元素

    ​ 杭磊元素脱离文档流会与块元素脱离文档流一样

  6. 脱离文档流之后,不需要再区分块元素和行内元素

html选择器与文档流基本介绍相关推荐

  1. 选择器、像素和百分比、颜色单位、文档流-css基础

    网页分成三部分: 结构(HTML) 表现(CSS) 行为(JavaScript) CSS: css是层叠样式表 网页实际上是一个多层的结构,通过css可以分别为网页的每一层来设置样式.(是一种3D效果 ...

  2. 脱离文档流的方法CSS浮动产生的负面影响及解决办法

    https://blog.csdn.net/theLostLamb/article/details/79581984 一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素, ...

  3. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)...

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active属性选择器: [属性~='属性值'] 伪类选择器 a ...

  4. CSS标准文档流,在线面试指南

    前言 过完年了,准备实习的你是已经在实习了,还是已经辞职回家过年,准备年后重新找工作呢,又或者是准备2021年春招? 那么还没没踏出校门或者是刚出校门没多久的同学们该如何准备前端校招的面试呢? 面试知 ...

  5. web前端开发自学课程,CSS标准文档流,超详细

    前言 又逢金三银四,拿到大厂的offer一直是程序员朋友的一个目标,我是如何拿到大厂offer的呢,今天给大家分享我拿到大厂offer的利器,前端核心知识面试宝典,内容囊括Html.CSS.Javas ...

  6. 什么是脱离文档流?什么是文档流?

    浏览器默认的排版方式就是文档流(或者叫标准流)排版方式.脱离文档流就是不按照文档流的排版方式. 文档流的排版方式是:块级元素垂直排布,行内元素和行内块级水平排布.不脱离就是按照这种方式排版,从左到右, ...

  7. 一天搞定CSS: 浮动(float)及文档流--10

    浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...

  8. php处理文档流,html的文档流是什么?html文档流简介

    本篇文章给大家带来的内容是关于html的文档流是什么?html文档流简介,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.文档流简介 1.什么是"正常文档流"? ...

  9. 继承性和层叠性 权重 盒模型 padding(内边距) border(边框) margin 标准文档流 块级元素和行内元素...

    内容总结: 1.继承性和层叠性继承性: 像 一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...

最新文章

  1. java 周易解梦接口_周公解梦
  2. 大数据时代 如何让用户上网更放心
  3. 数字孪生技术从概念走向实际应用
  4. leetcode 200. Number of Islands | 200. 岛屿数量(Java)
  5. java获取表主外键_通过 jdbc 分析数据库中的表结构和主键外键
  6. LeetCode 523. 连续的子数组和(求余 哈希)
  7. 结构体内部申请空间_墙体的重要承重结构以及作用方向分类
  8. mysql自主增长键_mysql中关于自增长主键的获取
  9. android自定义悬浮控件
  10. hdoj1242(bfs+priority_queue)
  11. Python Pycharm创建虚拟环境
  12. Html5用户注册页面
  13. MODIS数据介绍及下载
  14. 【高等数学】二重积分交换积分次序,反三角函数主值区间选择
  15. HTML+CSS模仿百度首页(gird+flex布局)
  16. Day45. 数据分析实战(1):超市运营数据分析
  17. 如何判断网站SSL证书是否安装成功?
  18. css3 flex 省略号,142.关于flex布局与省略号不显示的问题
  19. win7 计算机无法搜索,Win7笔记本电脑无法搜索无线网络_计算机的基本知识_IT /计算机_信息...
  20. 2023-04-03 Linux中杀死进程kill和killall命令的区别,着重介绍killall

热门文章

  1. 【 Linux 】图形化界面打开指定目录
  2. virtualbox ubuntu20.04 配置共享文件夹
  3. 中文在unicode中的编码范围
  4. 2022年湖南省一级注册建筑师设计前期与场地设计练习题及答案
  5. 概率密度函数、概率分布函数、常见概率分布
  6. 索智SC8600介绍
  7. cmi码型变换matlab程序_CMI码形变换实验完整实验报告.doc
  8. 【u122】迎接仪式
  9. Http- Post/Get请求参数值最大限制问题
  10. 银泰百货打造商场文化高地,推动“商业+文化”水乳交融