zoukankan      html  css  js  c++  java
  • css盒子类型

     1 1.了解块级元素和行内级元素
     2     块级元素:从新的一行开始内容,并且能包含其他块级box和行内级box。像div、p这样的标签
     3     行内级元素:不能形成新的内容块的元素。它不会从新行开始,但能够包含其他行内级box与数据
     4     1.1块级元素与行内级元素的不同
     5         (1)从内容模型上看
     6             一般而言,块级元素可以包含行内级元素和其他块级元素,而行内级元素仅能包含数据
     7             和其他行内级元素。一般情况下,块级元素用于创建较大的结构。
     8         (2)格式化问题
     9             默认情况下,块级元素以新行开始,而行内级元素保持与周围元素位于同一行
    10         (3)文本方向问题
    11             块级元素可以自定义dir属性,而行内级元素不能定义dir属性,他必须继承最近父级元
    12             素的文本方向的设置
    13     
    14     1.2关于div元素和span元素
    15         相对于其他html元素,div和span元素仅是一种语法结构,没有任何语义上的呈现。
    16         div和span元素的区别在于,div是一个块级元素,它可以将网页分成几个区块。
    17         span元素有一个重要特性,即它什么也不会做,它的唯一目的就是围绕html代码中的其他元素,这
    18         样就可以为它们指定样式了。
    19 
    20 2.box类型和display属性
    21     定义box类型也可以使用css的display属性来改变一个元素默认的box的类型。如,可以使元素b变成块级box:
    22                     b{display:block;}
    23     
    24     尽管display属性的初始值是inline,客户端浏览器的默认样式可以覆盖它。
    25 
    26     2.1了解视点和box容器
    27         我们称单个页面连续显示的介质为连续介质,而分页显示的介质为分页介质
    28         连续介质的客户端浏览器通常提供给用户一个视点(屏幕上的一个窗口或者是一个可视区域),通过它,
    29         用户可以浏览文档。如果视点尺寸改变,浏览器可能改变文档的布局,如果视点比文档小,客户端可能
    30         提供滚动机制。    
    31         (1)包含块
    32             在css中,很多box的位置和尺寸的计算都是基于一个被称为包含块的长方形盒子的四边.每一个
    33             box都有一个定位,该定位基于box的包含块,不过它不被包含块所限制.
    34         (2)初始包含块
    35             文档树的根生成一个box,这个box作为随后布局box的初始包含块.
    36             初始包含块不可以被定位或浮动,也就是说,客户端浏览器忽视根元素的position和float属性.
    37         (3)插入式box
    38             一个插入式的box是display属性设置为run-in的box,其行为如下:
    39                 (1)如果插入式box包含一个块级box,那么该box变成一个块级box.
    40                 (2)如果一个块级box(不是浮动,也不是绝对定位)跟随在一个插入式box之后,则该插入式
    41                    box成为该块级box的第一个行内级box.
    42                 (3)否则,该插入式box成为一个块级box.
    43                 
    44         
    45 3.可视性
    46     visibility属性指定一个元素生成的box是否被呈现出来。不管元素生成的box是否可见,box仍然影响布局。
    47     除非将display属性设置为none
    48     visibility属性的属性值及其功能描述:visible(可见),hidden(完全透明)、collapse(如果使用不是在行等),与hidden相同
  • 相关阅读:
    算法分析(3)——冒泡排序真的慢吗?
    算法分析(2)——大O和大Θ
    算法分析(1)——数据的影响和函数的增长
    递归的逻辑(5)——米诺斯的迷宫
    递归的逻辑(4)——递归与分形
    李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
    iOS应用管理(优化)
    iOS开发-应用管理
    iOS开发-Tom猫
    iOS 10.3.3 更新背后的故事
  • 原文地址:https://www.cnblogs.com/huzi007/p/2945653.html
Copyright © 2011-2022 走看看