热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

第7章css3盒模型

diasplay:none;与visibility:hidden;的区别diasplay:none;在浏览时保留位置,(为隐藏对象保留物理空间)visibility:hidden;视为不存在,且不加

diasplay:none;与visibility:hidden;的区别

diasplay:none;在浏览时保留位置,(为隐藏对象保留物理空间)
visibility:hidden; 视为不存在,且不加载(不为隐藏对象保留物理空间)

outline与border的对比
  1. outline创建的轮廓线不影响文档流,也不破坏网页布局;border影响元素盒子的大小;
  2. outline创建的轮廓线在元素各边都一样,无outline-top之类的
  3. border创建的元素边框可以单边设置,outline创建的轮廓线始终闭合
  4. outline创建的外轮廓线可以是非矩形的;若元素多行,外轮廓线能包含该元素所有框的外轮廓,border能使用一个边框包括整个元素
  5. border只能向外拓展,outline可以通过outline-offset的值向内向外创建轮廓

block,inline和inline-block概念和区别
  1. block元素通常被现实为独立的一块,会单独换一行;
  2. inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
  3. block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。

block,inline和inlinke-block细节对比

    1. display:block block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
      block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
      block元素可以设置margin和padding属性。
    2. display:inline inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。 inline元素设置width,height属性无效。 inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
    3. display:inline-block 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

推荐阅读
author-avatar
mobiledu2502876193
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有