本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素.块级元素的布局. 3. CSS display属性:介绍此属性对布局的影响. 1. HTML元素分类 HTML元素大题可分为内联(inline)元素和块(block)元素. 1.1 内联元素(inline) ①元素显示方式:"文本方式",1个挨着1个,不独自占有1行: ②内嵌的元素也必须是…

四.inline-block 此类元素是inline + block的合体 1) margin和padding都有效:width和height都有效: .inline{ display: inline-block; width: 200px; background: red; margin: 10px; padding: 10px; } <div class="inline"><a>inline01</a></div> <div c…

CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给span设置如下样式: span:display:block; 那么span元素就会表现的和DIV一样,每个DIV占据一行,而且支持设置宽高: 具体CSS中的display有如下属性: one    此元素不会被显示.    block    此元素将显示为块级元素,此元素前后会带有换行符.    in…

display 属性在网页布局中很常见,但是之前一直不了解他的各个属性的区别,只是简单的使用block.none属性,对于其他属性都不清楚,今天详细的学习和实践display属性的各个方面 定义 display 属性用于规定元素生成的框类型,影响显示方式 值:none | inline | block | inline-block | list-item 默认值:inline ie7- 浏览器不知其table类属性值 1.block 特征:a.不设置宽度时,宽度撑满一行   b.独占一行   c…

display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-block 行内块元素.(CSS2.1 新增的值) list-item 此元素会作为列表显示. run-in 此元素会根据上下文作为块级元素或内联元素显示. compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除. marker CSS 中有值 marker,…

理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面,我将按照顺序将上述几种属性做一个完整的讲解. 第一部分:display:none none这个值表示此元素将不被显示.比如,当我们在浏览网页时,如果看到了某个烦人的广告遮挡了我们的实现,更为可气的是,它还没有关闭的选项,这时(以chrome为例),我们就可以按下F12,打开开发者工具,点击eleme…

实例 使段落生出行内框: p.inline { display:inline; } 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"."run-in"."table"."table-caption"."table-cell"."table-column".…

先来概要一下学习思路: 本系列内容,将针对微信小程序中的WXSS学习,所以在学习CSS时每一个知识点都在小程序IDE中进行实践,达到最好的学习效果. 由于wxss与CSS有些许不同,在学习CSS过程中我们因尽力避免,在wxss中没有的属性花费太多时间. 接触display属性: 它是CSS中最重要的属性 每个元素都有默认的display值 对于大多数元素它们的默认值是block与inline. block被叫做块级元素,inline被叫做行内元素. block块级元素:它会尽可能撑满容器的左右边…

在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法来学习和了解DIV CSS display. 首先,所有主流浏览器都支持 display 属性.其次,我们都知道display 属性规定元素应该生成的框的类型.默认值:inline 我们常用的display属性值有: inlineblockinline-blocknone把 display 设置成…

所有主流浏览器都支持 visibility 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持 "inherit" 和 "collapse" 属性值. visibility 属性规定元素是否可见.即使不可见的元素也会占据页面上的空间. display 属性来创建不占据页面空间的不可见元素.即使不可见的元素也不会占据页面上的空间. 这个属性指定是否显示一个元素生成的元素框.这意味着元素仍占据其本来的空间,不过可以完全不可见.值 c…