（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. Luogu1063 能量项链 （区间DP）

    惊恐地发现自己连区间DP都会错2333 #include <iostream> #include <cstdio> #include <cstring> #incl ...

  2. Vmware 虚拟机连接外网和设置固定IP

    NAT 模式(地址转换模式) 在NAT模式中,主机网卡直接与虚拟NAT设备相连,然后虚拟NAT设备与虚拟DHCP服务器一起连接在虚拟交换机VMnet8上,虚拟机借助NAT功能,通过宿主机器所在的网络来 ...

  3. C++ 一键关闭屏幕

    Demo下载地址:http://pan.baidu.com/s/1vN4wF #include <windows.h> #include "resource.h" LR ...

  4. 痞子衡嵌入式：浅析IAR下调试信息输出机制之半主机(Semihosting)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是IAR下调试信息输出机制之半主机(Semihosting). 在嵌入式世界里,输出打印信息是一种非常常用的辅助调试手段,借助打印信息,我 ...

  5. 哔哩哔哩b站提取Cookie方法，bilibili获取Cookie教程

    大家可能对Cookie很陌生,甚至不知道是干嘛用,没关系,今天小编详细给大家讲解! Cookie是保存在客户端的纯文本文件,比如txt文件,所谓的客户端就是我们自己的本地电脑,当我们使用自己的电脑通过 ...

  6. 从零开始搭建react基础开发环境（基于webpack5）

    前言 最近利用闲暇时间把webpack系统的学习了下,搭建出一个react环境的脚手架,写篇文章总结一下,帮助正在学习webpack小伙伴们,如有写的不对的地方或还有可以优化的地方,望大佬们指出,及时 ...

  7. 分布式协同AI基准测试项目Ianvs：工业场景提升5倍研发效率

    摘要:全场景可扩展的分布式协同AI基准测试项目 Ianvs(雅努斯),能为算法及服务开发者提供全面开发套件支持,以研发.衡量和优化分布式协同AI系统. 本文分享自华为云社区<KubeEdge|分 ...

  8. Android序列化的几种实现方式

    一.Serializable序列化 Serializable是java提供的一种序列化方式,其使用方式非常简单,只需要实现Serializable接口就可以实现序列化. public interfac ...

  9. maven-scope属性

    Maven 中的 scope 属性解释 <dependency> <groupId>org.glassfish.web</groupId> <artifact ...

  10. 对表白墙wxml文件解释

    一.index.wxml 1.代码 1 <view class="Beijingse" style="height: 100%;"> 2 <v ...