HTML第三课——css盒子【2】

  • display

lesson3.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Css</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
    <div>这是div标签</div>
    <span>这是span标签</span>
    <p>这是p标签</p>
</body>
</html>

index.css

/*
    px:意为像素;
*/

div, span, p{
    color:red;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;
}

通过上面代码,大家可以看到display意为展示的样式。

我们看到span的样式和另外两个不一样,这是因为span标签的display属性默认是inlinedivp标签默认属性是block

我们修改样式:

/*
    px:意为像素;
*/

div, span, p{
    color:red;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;    
    display: block;
}

可以看到

而如果我们把display属性改为inline,再看效果:

/*
    px:意为像素;
*/

div, span, p{
    color:red;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;    
    display: inline;
}

我们发现不仅格子变小了,而且都跑到一行去了

这就涉及到了元素的分类,所有元素可分为两类:

  • 块级元素 即display的值默认为block的元素:div、p等。特点是占用一行
  • 行内元素 即display的值默认为inline的元素:span等。特点是只占自己需要的长度,设置宽和高都不起作用。

我们来看一段代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Css</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
    <div>这是div标签1</div>
    <div>这是div标签2</div>
    <span>这是span标签1</span>
    <span>这是span标签2</span>
</body>
</html>

index.css

/*
    px:意为像素;
*/

div, span, p{
    width: 100px;    
    height: 50px;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;    
    display: inline;
}

我们发现我们设置的宽和高都失效了。所以我们现在遇到的问题就是:div可以设置宽高但是要换行,span不换行但不能设置宽和高,那要怎么办呢?我们只需要将display属性值设置为inline-block即可:

/*
    px:意为像素;
*/

div{
    width: 100px;    
    height: 50px;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;    
    display: inline-block;
}

span{
    width: 100px;    
    height: 50px;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;    
    display: inline-block;
}

原文发布于微信公众号 - 自动化测试实战(gh_839e78b6ba28)

原文发表时间:2018-05-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

css层叠样式表

CSS概述 CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表 主要作用 为了让网页元素的样式更加...

422110
来自专栏青玉伏案

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1、<html>和</html> 标签限定了文档的开始和结束点。 属性: (1)  dir: 文本的显示方向...

25950
来自专栏每日一篇技术文章

weex-21-animation模块

我们在开发应用的时候,常常需要增加一些动画效果,来提高用户体验,经常用到的一些动画效果如下

24210
来自专栏Google Dart

AngularDart Material Design 菜单 顶

材质菜单基于MenuModel对象呈现菜单。 此菜单包含material-popup中的material-list和material-button,其文本或图标...

9620
来自专栏青玉伏案

Web前端上万字的知识总结

下面是自己学HTML+DIV+CSS+JS时的学习笔记,给大家分享以下,相互学习。大二时候寒假在家无聊的时候想做点事,总结了一下web前端基础的东西,下面的每...

301100
来自专栏用户画像

一个简单的卡动车排队系统

7320
来自专栏yang0range

html常用标签

title也是有助于SEO搜索引擎优化的 HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。 HTML中所有的文字之间,如果有空格、换行、tab都将被...

52920
来自专栏Java帮帮-微信公众号-技术文章全总结

03.HTML头部/CSS/图像/表格/列表

03.HTML头部/CSS/图像/表格/列表 HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题 使用 <title> 标签定义...

1.2K90
来自专栏编程

前端学习自学笔记:day01

在这里要跟大家说声抱歉,本人拖更太久啦.现在在自学前端,我每天会把自己的总结笔记发上来分享给大家,希望对大家有帮助. 在此之前先为大家显示下前端工程师的路线图:...

21750
来自专栏前端儿

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:aut...

15510

扫码关注云+社区

领取腾讯云代金券