`
xufei0110
  • 浏览: 110919 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

css display 属性的实验

阅读更多

关于display inline的实验

 

实验开始

首先建一个table

<table style='border:1px solid;width:300px'>  
  <tr>
    <td><div>div1</div><div>div2</div></td>
    <td>3</td>
  </tr> 
</table>
 

 效果



 两个div没有设宽度,所以他们默认的上下排列了

 

实验1

div1的display:inline

<table style='border:1px solid;width:300px'>  
  <tr>
    <td><div style='display:inline'>div1</div><div>div2</div></td>
    <td>3</td>
  </tr> 
</table>

 

效果


div1变短了,因为他要与他后面的元素放在一行了,但div2没有任何设定所以它还是默认的宽度,也就在div1的下面了

如果把div2的display也设上inline的话,他也会变短,然后就会和div1一行了,

如图:


 

事实上是如果在div1后面的元素是固定长的那么他们也会在一行的

<table style='border:1px solid;width:300px'>  
  <tr>
    <td><div style='display:inline'>div1</div><span style='outline:1px solid'>span2</span></td>
    <td>3</td>
  </tr> 
</table>

 span的宽度和内容一致

 

但是如果 span在前面 div在前面会怎么样呢

<table style='border:1px solid;width:300px'>  
  <tr>
    <td><span style='outline:1px solid; display:inline'>span1</span><div style='width: 50px'>div2</div></td>
    <td>3</td>
  </tr> 
</table>

 

 即使div2的宽度很小,他还是在下面,想让div2上去的话,只要也给他设定display:inline就好了,所以要注意这里。

 

实验2

之前的div都变短了,那么如果想要div还是自动变宽的话怎么办呢

<table style='border:1px solid;width:300px'>  
  <tr>
    <td><span style='outline:1px solid; display:inline; float:right;margin-top:6px'>span1</span><div>div2</div></td>
    <td><div style='display:inline; '>div2</div><span style='outline:1px solid; display:inline; '>span1</span></td>
  </tr> 
</table>

 效果


 请注意一下代码,第一个td里的span是写在div前面的,然后他用float:right飘到右边了,这样第一个td里的div就是自动宽度的

 

实验3

display的block, inline, inline-block的区别

block:是带有换行的区域,不管容器多宽都换行,div默认是这个

 

inline-block:容器够宽就排在一行,不够宽还是要换行, 这个换行是 整个line在换行

 

inline:容器够宽就排一行 像inline,不够宽就换行 像 block,
注意ie8以后的版本才有这个

 

 

 

 

 

 

 

  • 大小: 1.3 KB
  • 大小: 1.3 KB
  • 大小: 1.2 KB
  • 大小: 1.2 KB
  • 大小: 1.3 KB
  • 大小: 1.3 KB
  • 大小: 1.4 KB
  • 大小: 1.3 KB
  • 大小: 1.6 KB
1
1
分享到:
评论

相关推荐

    一文掌握CSS 属性display:flow-root声明

    【CSS属性`display:flow-root`详解】 在CSS布局中,`display:flow-root`是一个相对新的属性声明,它的引入为网页设计者提供了更精细的布局控制能力。这个属性最初可能由于兼容性问题而不被广泛使用,但随着浏览器对...

    css属性值.rar

    在网页制作领域,CSS(Cascading Style Sheets)是一种至关重要的技术,用于定义HTML或XML(包括SVG、XHTML等)文档的呈现样式。本资料包"css属性值.rar"显然是一个关于...记住,不断实践和实验是掌握CSS的最好方法。

    CSS基础-实验楼.md

    #### 高级框操作 当你使用绝对的值设置了一个框的大小(如,固定像素的宽/高),允许的大小可能不...display 属性有很多的属性值。这里着重讲三个常见的 :block, inline, 和 inline-block。 - 块级元素的特点:

    CSS+DIV实例

    1. 浮动布局:早期的`CSS+DIV`布局常使用`float`属性,让元素在容器中浮动,实现左右排列或自适应布局。 2. 盒模型:理解盒模型是布局的关键,它包括元素的内容、内边距、边框和外边距,影响元素的总尺寸。 3. 定位...

    《CSS设计彻底研究》光盘源码

     4.4 盒子的display属性   4.5 本章小结  第5章 文字与图像  …… 第 6章 链接与导航  第7章 竖直排列的导航菜单  第8章 水平导航菜单  第9章 下拉菜单  第10章 表格也精彩  第 11章 圆角设计  ...

    HTML+CSS访实验楼网站模板

    样式属性包括颜色、字体、边距、填充、背景、布局等,如`color`、`font-family`、`margin`、`padding`、`background-color`、`display`等。CSS布局技术,如盒模型、浮动(`float`)、定位(`position`)、Flexbox...

    实验二_css_源码

    在描述中提到这适用于“新手小白”,意味着这个实验可能包含了一些基本的CSS概念和语法,例如选择器、属性和值。选择器是用来匹配HTML元素的,如`p`代表段落,`#id`代表ID为特定值的元素,`.class`代表具有特定类名...

    css设计彻底研究 源代码

    4.2.4 fixed(固定定位) 4.3 z-index空间位置 4.4 盒子的display属性 4.5 本章小结 第5章 文字与图像  …… 第6章 链接与导航 第7章 竖直排列的导航菜单 第8章 水平导航菜单 第9章 下拉菜单 第10...

    最全面的css样式学习文件

    5. **布局技术**:从传统的display属性布局,到flexbox(弹性盒布局)和grid(网格布局),掌握现代布局方法对于创建响应式设计至关重要。 6. **响应式设计**:随着移动设备的普及,响应式设计成为必需。通过媒体...

    《CSS设计彻底研究》【中文PDF+源代码】

    4.4 盒子的display属性 4.5 本章小结 第5章 文字与图像 …… 第6章 链接与导航 第7章 竖直排列的导航菜单 第8章 水平导航菜单 第9章 下拉菜单 第10章 表格也精彩 第11章 圆角设计 第12章 应用...

    实验一 心情日记(DIV+CSS)

    在实验中,我们可能会涉及以下CSS概念和属性: 1. `div`:一个通用的容器元素,常用于布局。 2. `class`和`id`选择器:通过类名或ID来精准定位元素。 3. `display`属性:控制元素的显示方式,如`block`(块级元素)...

    css3学习与例子

    Flexbox解决了传统布局方式在处理动态内容和多列布局时的困难,通过`display: flex`和相关属性,可以轻松调整元素的顺序、大小和位置。而Grid布局则提供了一种二维网格系统,使得页面布局更加灵活,适应各种屏幕尺寸...

    css 的 float 与clear

    在CSS世界中,`float`和`clear`是两个非常重要的布局属性,它们在网页设计中扮演着不可或缺的角色。这两个属性对于理解盒模型以及创建复杂的网页布局至关重要。在这篇文章中,我们将深入探讨`float`和`clear`的概念...

    前端开发技术实验报告:内含4四实验&实验报告

    float 与 display 是较为常见的用于网页布局的属性,而动画也是网页中不可缺少的元素,根据具体的需求,灵活运用 HTML5中的各种布局技术,学习如何在网页中添加动画。 1.深入学习CSS3布局 2.掌握CSS3中transform的...

    实验6 CSS3布局与动画(4学时).zip

    在本实验"实验6 CSS3布局与动画(4学时)"中,我们将深入探讨CSS3的两大核心特性:布局和动画。这是一项至关重要的学习任务,因为CSS3是现代网页设计的基础,它极大地丰富了网页的表现力和交互性。 首先,让我们...

    HTML实验小米商城首页

    例如,可以使用`background-color`属性改变背景色,`font-family`调整字体,`margin`和`padding`设置元素间的距离,`display`属性决定元素的显示方式,如是否为块级或行内元素,`position`属性则可以实现绝对或相对...

    html5web实验

    7. overflow属性实验: 理解overflow属性的作用,设置p元素的样式,实现内容溢出的隐藏效果,区分display:none和visibility:hidden的区别。 8. 显示与可见性实验: 通过display:none和visibility:hidden设置,...

    HTML+CSS+JS构建的电商网站页面(源码)

    - 布局管理:使用`display`属性(如`flex`或`grid`)创建响应式布局,使网站在不同设备上都能正常显示。 - 元素美化:通过设置`background-color`、`border-radius`、`box-shadow`等属性,提升用户体验,增加交互...

    8个实用且不俗气的CSS效果

    在网页设计领域,CSS(Cascading Style Sheets)是一种至关重要的技术,用于定义HTML或XML(包括SVG、MathML等各种XML方言)文档的...通过不断探索和实验,你可以创造出更多独特而实用的CSS效果,让网页设计更加出彩。

Global site tag (gtag.js) - Google Analytics