css中几个重要概念

piapia 发布于2019-08-26 12:00 / 2116人阅读

摘要：包含块是一个相对的概念，比如子元素的初始化布局总是在父元素的左上角，这就是一个相对的概念。每个元素都会生成一个包含块，但这个包含块是虚无的，你看不到也摸不着，只是一个概念。这个属性在新的版本中已经移除了，可以不用关注该属性了。

替换元素与非替换元素

替换元素：是指浏览器根据元素的标签和属性来决定元素的具体内容。

 例如"浏览器会根据标签的src属性的值来读取图片信息并显示，浏览器会根据input标签的type属性来决定是显示输入框还是单选按钮

非替换元素:其内容直接显示在客户端的元素叫非替换元素

 shizai
 shashi

包含块

在css中，有时一个元素的位置和尺寸的计算都相对于一个矩形，这个矩形被称作包含块。包含块是一个相对的概念，比如子元素的初始化布局总是在父元素的左上角，这就是一个相对的概念。每个元素都会生成一个包含块，但这个包含块是虚无的，你看不到也摸不着，只是一个概念。包含块吧并不会限制它里面元素的大小，如果里面的元素比包含块大，那么超出的部分就会被溢出。一个元素的位置和尺寸与它的包含块息息相关，而元素会为它的子孙元素创建包含块，但这并不代表这个包含块就是它的父元素（不过这个父元素确实和包含块有着一些联系）。在某些情况下，我们可以将包含块理解为父元素。

包含块的创建

在HTMl中，根元素的包含块叫作初始包含块，具体创建由客户端决定

当定位置为fixed，则包含块由视口创建

当定位值为relative，static或没有设置定位属性，则包含块由最近的父元素或祖先元素创建

当定位值为absolute，则包含块由最近的定位值relative、absolute、fixed创建。如果没有定位的祖先元素，则包含块为初始包含块（具体由客户端决定）

当祖先元素时行内元素时，那么包含块取决于父元素或祖先元素的direction属性

当定位值为absolute，父元素没有设置定位时，包含块为初始包含块。而如果指定了其定位值，则包含块由其定位了的父元素或祖先元素创建

 
    父元素或祖先元素没有定位时

    父元素或祖先元素定位值为relative


    父元素或祖先元素定位值为absolute


    父元素或祖先元素定位值为fixed

当祖先元素时行内元素时，若direction值为ltr则右边补空白，若direction值为rtl则左边补空白

 
  
      direction:ltr
  

    direction:rtl

控制框

控制框主要指display的属性所形成的框，包括块框，匿名块框，行内框，匿名行内框，插入框(run-in).

display的一些属性：

block生成一个块框

inline-block生成一个块框，元素内部按照块框格式化，但元素本身按照一个行内元素的形式来格式化（初始化）

inline生成一个或多个行内框

list-item生成一个块框和一个列表行内框

none将不在结构中显示，不产生任何框，并且子孙元素也不产生任何框

run-in将根据后一个元素来选择要生成的框

1.块级元素与块框

其中可以产生块元素的值为block，list-item，run-in，table。块级元素除了table外都会形成一个主块框，并且这个主块框只包含一个类型的框，就是说里面要么是块框，要么是行内框。主块框会为子孙元素建立包含块，生成内容。主块框参与块级格式化上下文。某些块级元素还会在主块框之外生成额外的框，比如当某个元素的display值为list-item时，它会生成一个额外的框用来放置那些标志，比如li元素前面的标志

2.匿名块框


  这是一段内容

div包括了一段文本和一个块框(p),此时div似乎既包括了行内框，又包括了一个块框，那么它会将所有的行内框都包含在一个匿名块框之中

3.行内框

可以产生行内元素的值为inline，inline-table，run-in

4.匿名行内框


  这是一段内容

div包括了一段文本和一个em元素，此时div似乎包含的都是一个行内框，那么它会为这段文本生成一个匿名行内框。在格式化table时，会形成更多的匿名行内框。

5.插入框(run-in)

如果一个元素的display值为run-in，那么它会根据后面的元素来确定它的类型应该是什么。这个属性在新的Chrome版本中已经移除了，可以不用关注该属性了。

云服务器服务器托管重要重要数据非常重要重要途径

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108013.html

css中几个重要概念

摘要：包含块是一个相对的概念，比如子元素的初始化布局总是在父元素的左上角，这就是一个相对的概念。每个元素都会生成一个包含块，但这个包含块是虚无的，你看不到也摸不着，只是一个概念。这个属性在新的版本中已经移除了，可以不用关注该属性了。替换元素与非替换元素替换元素：是指浏览器根据元素的标签和属性来决定元素的具体内容。例如浏览器会根据标签的src属性的值来读取图片信息并显示，浏览器会根据i...

darkbug 2019-08-29 15:37 评论0 收藏0
JavaScript中几个重要的知识点（3） ---- Ajax

摘要：与响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。 JavaScript中几个最重要的大知识点面向对象 DOM事件异步交互ajax AJAX AJAX是异步的javascript和xml（Asynchronous Javascript And XML）的缩写，用于网页局部刷新，提升用户浏览体验通常前端程序员关于AJAX的掌握仅仅停留在会用AJAX发送...

starsfun 2019-08-20 17:36 评论0 收藏0
JavaScript中几个重要的知识点（1） ---- 面向对象

摘要：中几个最重要的大知识点面向对象事件异步交互面向对象在中可以把任意的引用和变量都看成是一个对象。我们可以写一个通用方法来模拟面向对象语言的多态 JavaScript中几个最重要的大知识点面向对象 DOM事件异步交互ajax 面向对象在JS中可以把任意的引用和变量都看成是一个对象。面向对象的主要三个表现形式：封装继承多态 1. 封装 1.1 单例模式 var obj={...

acrazing 2019-08-20 17:32 评论0 收藏0
JavaScript中几个重要的知识点（2） ---- DOM事件

摘要：使用来移除事件，参数必须与要移除的事件处理函数地址指针相同。在低版本浏览器中，绑定级事件的方法为中的级事件的事件处理程序都是在冒泡阶段执行的。 JavaScript中几个最重要的大知识点面向对象 DOM事件异步交互ajax 事件事件就是文档和浏览器的瞬间交互行为 1.事件类型点击: click 滚轮: scroll 滑动: move 进入: enter 加载: load ...

dantezhao 2019-08-20 17:33 评论0 收藏0
深入理解-CSS内联元素之font-size

摘要：给一个内联元素设置背景，这背景所占的区域就可以看成内容区域。看了很多文章最后总结和整理了这些，下一篇介绍说说在内联元素中的作用。在前端开发中，似乎控制不同大小文字之间，或者文字与图标之间对齐总是不那么得心应手，总觉得少了点什么，这其中其实跟CSS中几种跟内联元素相关的属性有很大的关系，从我的感觉看，平时遇到的30%的css问题都是由于搞不清这几种属性的关系有关。这里第一篇文章先介绍字...

宠来也 2019-08-05 13:34 评论0 收藏0