<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*宽度允许百分比，高度不允许*/
        .c1 {
            background-color: bisque;
        }
        .c2{
            width: 50%;
            height: 100px;
        }
        /*inline由块级标签变成行内标签*/
        .dis-inline{
            display: inline;
        }
        /*block由行内标签变成块级标签*/
        .dis-block{
            display: block;
        }
        /*即使行内也是块级标签*/
        .dis-inline-block{
            display: inline-block;
        }
        /*内外边距*/
        .c3{
            /*1像素边框是绿色的*/
            border: 1px solid green;
            width: 100%;
            height: 100px;
        }
        .c4{
            background-color: red;
            width: 100%;
            height: 48px;
            /*外边距 可调整*/
            margin-top: 0px;
            /*内边距 可调整*/
            padding-top: 0px;
        }
    </style>
</head>
<body>
    <div class="c1 c2 dis-inline">块级变行内</div>
    <span class="c1 c2 dis-block">行内变块级</span>
<!--    行内标签必须自己有内容否则无法应用宽，高，内外边距(无法展示)-->
    <span style="height: 100px;width: 100px;background-color: yellow">内容</span>
    <br>
    <span class="dis-inline-block c1 c2">即时行内也是块级</span>
<!--    内外边距-->
    <div class="c3">
        <div class="c4"></div>
    </div>
</body>
</html>

web前端_css02的更多相关文章

  1. Web前端需要熟悉大学里【高大上】的计算机专业课吗？

    作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...

  2. web前端开发分享-目录

    1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...

  3. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  4. web前端的春天 or 噩梦

    「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...

  5. Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  6. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  7. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  8. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  9. [转载]Web前端开发工程师编程能力飞升之路

    [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

随机推荐

  1. Jenkins 启动不来的排查方法

    1.通过 ps -ef | grep tomcat找到jenkins的路径,下有logs,可以查看日志 2.装插件报错时,报错信息里会提示依赖的插件版本号,到jenkins官网下载对应版本的插件即可, ...

  2. 【C】命令行参数解析——getopt、getopt_long及getopt_long_only

    前言 在linux下学习开源代码Webbench,遇到get_long等函数的用法,一时有点懵,故想深入了解这类命令行解析函数,并记此博文. 1.getopt getopt主要用来处理短命令行选项,例 ...

  3. 【转】.NET Core + Ocelot + IdentityServer4 + Consul 基础架构实现

    作者:Zhang_Xiang 原文地址:.NET Core + Ocelot + IdentityServer4 + Consul 基础架构实现 先决条件 关于 Ocelot 针对使用 .NET 开发 ...

  4. git clone 含有子模块的项目

    当一个 git 项目包含子模块(submodule) 时,直接克隆下来的子模块目录里面是空的. 有两种方法解决: 方法一 如果项目已经克隆到了本地,执行下面的步骤: 初始化本地子模块配置文件 git ...

  5. php 如何生成path及其日常维护

    php 如何生成path及其日常维护 path字段重要性不言而喻,在查询的时候,如果只用pid,查询效率会很低,增加path,查询效率大大提高,最起码不用递归查库了,重点是维护推荐关系的时候要维护pa ...

  6. Windows下使用SVN版本控制工具

    一.SVN工作原理 SVN(SubVersion)的基本工作思路是这样的:在一台服务器上建立一个源代码库,库里可以存放许多不同项目的源程序,由源代码库管理员统一管理这些源程序. 每个用户在使用源代码库 ...

  7. Codeforces 1216F. Wi-Fi

    传送门 这个题一眼 $dp$ 就是设 $f[i][0/1]$ 表示我们只考虑前 $i$ 个位置,并且保证覆盖了前 $i$ 个位置,当前位置 选/不选 的最小代价 考虑转移,设题目给出的字符串为 $s$ ...

  8. Oracle sqlplus prelim 参数介绍

    SQL>conn / as sysdba ORA-00020: maximum number of processes (xxxx) exceeded 报错解决方法 解决 ORA-00020 错 ...

  9. git bash中不能显示中文

    git bash中不能显示中文 问题描述:当使用git log查看提交日志时,中文字符不能正常显示问题 1.首先把git的配置改一下 git config --global core.quotepat ...

  10. nodejs---crypto模块MD5签名

    1.MD5是一种常用的哈希算法,用于给任意数据一个“签名”.这个签名通常用一个十六进制的字符串表示: /*md5签名*/ /*引入crypto模块*/ const crypto = require(' ...