（1）当然块级元素是可以直接设置高度和宽度的

　　　块级元素：块级大多为结构性标记

　　　　div、h1~h6、ul、ol、dl、form、table、p、hr、pre、address、center、blockquote、marquee

　　　行内元素：行内大多为描述性标记

　　　　span、a、b、strong、i、em、img 、input、textarea、select、u、br、、、sup、sub、del

　　块级元素

　　  1.总是从新的一行开始

　　  2.高度、宽度都是可控的

　　  3.宽度没有设置时，默认为100%

　　  4.块级元素中可以包含块级元素和行内元素

　　行内元素

　　  1.和其他元素都在一行

　　  2.高度、宽度都是不可控的

　　  3.宽高就是内容的宽高，不可以改变

　　  4.行内元素只能包含行内元素，不能包含块级元素

（2）行内元素转换为行内块元素（display: inline-block;）或者块元素（display: block;）

行内元素增加了左内边距，但是没有改变为行内块元素之前：

转换为display: inline-block;行内块元素之后：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .parent {

            position: relative;

            background-color: pink;

            height: 100px;

        }

        .parent span {

            background-color: yellow;

            width: 100px;

            height: 50px;

            padding-left: 100px;

            display: inline-block;

        }

        .parent i {

            background-color:skyblue;

            width: 100px;

            height: 50px;

            padding-left:100px;

            display: inline-block;

        }

        .parent a{

            background-color:rgb(49, 231, 49);

            width: 100px;

            height: 50px;

            padding-left:100px;

            display: inline-block;

        }

    </style>

</head>

<body>

    <div class="parent">

        <span>span</span>

        <i>iiiiiii</i>

        <a ref="#">aaaaaa</a>

    </div>

</body>

</html>

（3）将元素设置为“ position: absolute;”或者“position: fixed;”之后，就可以直接设置高度和宽度

加绝对定位之前显示效果：

加了绝对定位之后显示效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .parent {

            position: relative;

            background-color: pink;

            width: 500px;

            height: 100px;

        }

        /* 给span没有设置绝对定位之前，设置宽度和高度是不起作用的  */

        .parent span {

            background-color: yellow;

            width: 100px;

            height: 50px;

        }

        /* 第一个span靠左绝对定位  */

        .parent span:nth-child(1) {

            position: absolute;

            top:10px;

        }

        /* 第二个span靠右绝对定位  */

        .parent span:nth-child(2) {

            position: absolute;

            right: 10px;

            top:10px;

        }

    </style>

</head>

<body>

    <div class="parent">

        <span>测试1</span>

        <span>测试2</span>

    </div>

</body>

</html>

（4）将元素设置为浮动之后，也可以设置宽高，元素设置为浮动之后，就可以当做行内块元素来看

加入浮动之前

加入浮动之后

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .parent {

            position: relative;

            background-color: pink;

            height: 100px;

        }

        .parent span {

            float:left;

            background-color: yellow;

            width: 100px;

            height: 50px;

        }

    </style>

</head>

<body>

    <div class="parent">

        <span>span</span>

    </div>

</body>

</html>

html小总结（哪些可以直接设置高度和宽度）的更多相关文章

  1. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  2. tableZen maxHeight 解决方案 如果数据条数小于N，不进行高度设置，超过N条，直接设置高度，解决原生iview Table 对于右侧固定列，不能计算出正确数值的解决方案

    tableZen maxHeight 解决方案 如果数据条数小于N,不进行高度设置,超过N条,直接设置高度,解决原生iview Table 对于右侧固定列,不能计算出正确数值的解决方案 if (thi ...

  3. 获取不同机型微信小程序状态栏+导航栏高度

    获取不同机型微信小程序状态栏+导航栏高度 一. 前言 很多时候我们开发微信小程序,都需要先知道状态栏和导航栏的高度,才能去做其他功能 二. 获取微信小程序状态栏高度 用wx.getSystemInfo ...

  4. ## GridView 布局：item设置的高度和宽度不起作用、自动适配列数、添加Header和Footer ##

    一.item设置的高度和宽度不起作用 转自:http://www.cnblogs.com/0616--ataozhijia/p/6031875.html [Android Pro] listView和 ...

  5. css 高度随宽度比例变化

    [方案一:padding实现] 原理: 一个元素的 padding,如果值是一个百分比,那这个百分比是相对于其父元素的宽度而言的,padding-bottom 也是如此. 使用 padding-bot ...

  6. [Android Pro] listView和GridView的item设置的高度和宽度不起作用

    referece to : http://blog.csdn.net/beibeixiao/article/details/9032569 1.     在Android开发中会发现,有时listVi ...

  7. [JS]jQuery,javascript获得网页的高度和宽度

    [JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...

  8. CSS实现高度和宽度自适应

    其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="tr ...

  9. iOS之UILabel自适应高度、宽度

    下列两条自适应高度和宽度的自定义方法:

随机推荐

  1. xray+awvs的联动

    前言:xray是一款强大的漏扫工具,配合awvs的爬站功能可以十分轻松实现全自动挖洞,这里awvs我是使用的是12版本 1.启动xray,监听本地指定端口,这里我监听的是2222端口 命令:xray_ ...

  2. CF1204E Natasha, Sasha and the Prefix Sums （卡塔兰数推理）

    题面 题解 把题意变换一下,从(0,0)走到(n,m),每次只能网右或往上走,所以假设最大前缀和为f(n),那么走的时候就要到达但不超过 y = x-f(n) 这条线, 我们可以枚举答案,然后乘上方案 ...

  3. 快速搭建 SpringCloud Alibaba Nacos 配置中心！

    Spring Cloud Alibaba 是阿里巴巴提供的一站式微服务开发解决方案,目前已被 Spring Cloud 官方收录.而 Nacos 作为 Spring Cloud Alibaba 的核心 ...

  4. Java代码自动计算机

    答案(这里面包括main方法不要写重了),copy即可使用: public static void main(String[] args) { while (true){ System.out.pri ...

  5. Spire.Cloud 私有化部署教程（三） - Windows 系统

    本教程主要介绍如何在 Windows 系统上实现 Spire.Cloud 私有化部署. 详细步骤如下: 一.安装依赖 我们的私有部署的依赖有 Nodejs.MySQL.Redis 和 RabbitMQ ...

  6. KingbaseES的SQL语句-CTE递归

    背景 从上下级关系表中,任意一个节点数据出发,可以获得该节点的上级或下级.CTE的递归语法,或者 connect by 与 start with的 查询语法,能够实现这个需求. 当我们需要制作上下级关 ...

  7. KingbaseES 行列转换函数

    关键字:    行专列,列转行, pivot, unpivot 行列转换是在数据分析中经常用到的一项功能,KingbaseES从V8R6C3B0071版本开始通过扩展插件(kdb_utils_func ...

  8. Windows 10 20H1 2004新功能

    Windows 10的年度更新版本20H1即将问世.目前可以从insider preview渠道中获得.这个版本中看上去对搜索功能做了不小的改进.包括搜索的磁盘占用率以及搜索的一些展示方式. 其它的一 ...

  9. Windows 10中蓝牙鼠标连接

    最近遇到了一个问题,Windows 10中的蓝牙鼠标无法连接. 在添加蓝牙鼠标的时候系统提示输入PIN码.通常在蓝牙连接两个系统的时候会需要双方输入PIN码来确认身份,但是鼠标这种设备是没有地方显示P ...

  10. 视频结构化 AI 推理流程

    「视频结构化」是一种 AI 落地的工程化实现,目的是把 AI 模型推理流程能够一般化.它输入视频,输出结构化数据,将结果给到业务系统去形成某些行业的解决方案. 换个角度,如果你想用摄像头来实现某些智能 ...