（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. Luogu4427 [BJOI2018]求和 （树上差分）

    预处理,树上差分.注意深度减一 #include <cstdio> #include <iostream> #include <cstring> #include ...

  2. Redis 09 基数

    参考源 https://www.bilibili.com/video/BV1S54y1R7SB?spm_id_from=333.999.0.0 版本 本文章基于 Redis 6.2.6 概述 Redi ...

  3. Linux操作系统学习（运维必会）

    Linux一切皆文件,最高权限的账户root. 1.开机登录 开机会启动很多进程,在Windows上叫"服务"(service),在Linux上叫做"守护进程" ...

  4. html + css 实现无需 js 的打字效果

    以前要达到类似在电脑上打字的效果,需要 js+html.今天我将介绍一种新方法.本文主要介绍纯 html+css 实现打字效果,有一定的参考价值,大家可以学习一下.提供所有代码,可以直接使用. 一.原 ...

  5. 【JDBC】学习路径2-编写第一个JDBC程序

    第一章:导入jar包 在未安装MySQL数据库的请务必安装,安装教程:[MySQL]从入门到掌握2-下载安装 connector/J下载地址:https://dev.mysql.com/downloa ...

  6. Rsync数据备份工具

    Rsync数据备份工具 1.Rsync基本概述 rsync是一款开源的备份工具,可以在不同主机之间进行同步(windows和Linux之间 Mac和 Linux Linux和Linux),可实现全量备 ...

  7. Spark 读取HDFS csv文件并写入hive

    package com.grady import org.apache.spark.SparkConf import org.apache.spark.sql.{Row, SaveMode, Spar ...

  8. WinUI 3 踩坑记：第一个窗口

    本文是 WinUI 3 踩坑记 的一部分,该系列发布于 GitHub@Scighost/WinUI3Keng,文中的代码也在此仓库中,若内容出现冲突以 GitHub 上的为准. WinUI 3 应用的 ...

  9. 在UniApp的H5项目中，生成二维码和扫描二维码的操作处理

    在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作.二维码的生成,使用了JS文件wea ...

  10. Kubernetes ConfigMap热更新

    ConfigMap是用来存储配置文件的kubernetes资源对象,所有的配置内容都存储在etcd中. 总结 更新 ConfigMap 后: 使用该 ConfigMap 挂载的 Env 不会同步更新 ...