（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. LuoguP2217 [HAOI2007]分割矩阵 (DP + memorized search)

    int n,m,tim; int mp[N][N], sum[N][N]; double ave,dp[N][N][N][N][N]; inline double DP(int a,int b,int ...

  2. ftp: connect: No route to host 解决方案

    实验环境: centos7 x2 server-vsftp:192.168.1.32 client:192.168.95 客户端测试访问 ftp服务器 报错:ftp: connect: No rout ...

  3. linux 3.10 一个扇区异常可能引发的hung

    最近遇到一例3.10内核的crash: [ 4109.682163] "echo 0 > /proc/sys/kernel/hung_task_timeout_secs" d ...

  4. Silk语言-中国人自己的开源编程语言

    什么是Silk Silk语言是一门完全独立自主开发的跨平台动态类型编程语言,绝非"木兰"等套壳语言. Silk简单易学,30分钟即可掌握全部语法,让你像Python一样简单地写C/ ...

  5. 如何使用CSS伪类选择器

    总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...

  6. QPanter 绘画

    Qpainter 绘图 1 绘图事件 void paintEvent(QPaintEvent *event) 2 声明一个画家对象 QPainter painter(this) this  指定绘图设 ...

  7. django_day10_项目相关

    django_day10_项目相关 展示数据的方法 数据对象obj 普通字段 obj.字段名 ====> 数据库该字段的值 带choices参数的 obj.字段名 ====> 数据库该字段 ...

  8. OpenDrop 这样的应用程序以及与当今流行的替代品的比较

    由安全移动网络实验室 OpenDrop 创建的用 Python 编写的开放 Apple AirDrop 实现是一个命令行工具,允许直接通过 Wi-Fi 在设备之间共享文件.它的独特之处在于它与 App ...

  9. mysql_阻塞和死锁

    什么是阻塞 由于不同锁之间的兼容关系,造成一个事务需要等待另一个事务释放其所占用的资源的现象 称为 阻塞 如何发现阻塞 mysql_8.0 SELECT waiting_pid as '被阻塞的线程' ...

  10. 群晖-使用docker套件部署Prometheus+Grafana

    Docker 部署 Prometheus 说明: 先在群辉管理界面安装好docker套件,修改一下镜像源(更快一点) 所需容器如下 Prometheus Server(普罗米修斯监控主服务器 ) No ...