尺寸样式属性介绍

属性 值 含义
height auto：自动，浏览器会自动计算高度length：使用px定义高度%：基于包含它的块级对象的百分比高度 设置元素高度
width 同上 设置元素的宽度

height属性和width属性

  • 接下来让我们进入height属性、width属性实践，笔者用class属性值为.box，给div标签设置宽度和高度以及div标签背景颜色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

    <title>尺寸样式属性</title>

    <style>

        .box{

            width: 100px;

            height: 100px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="box">

    </div>

</body>

</html>

  • 代码块

  • 假设我们不给div标签设置宽度，会变成什么样呢？那咱们就试试看哦。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

    <title>尺寸样式属性</title>

    <style>

        .box{

            height: 100px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="box">

    </div>

</body>

</html>

  • 结果图

  • 为什么会这样呢？其实是这样的如果我们没有给div标签设置宽度，div标签将会自动的占用父元素的百分百的宽度，注意的是：高度和宽度是不一样的哈，高度不会自动占用父元素的任何位置。
  • 只有块级元素才可以设置宽高度。

CSS尺寸样式属性的更多相关文章

  1. 0010 CSS字体样式属性：font-size、font-family、Unicode字体、font-weight、font-style、综合设置、color、 text-align、line-height、text-indent、text-decoration、、、

    CSS字体样式属性.调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 ...

  2. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  3. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  4. CSS字体样式属性

    font-size 字号大小 一般推荐使用相对长度(px ,em),不推荐使用绝对长度(in,cmm,mm,pt) font-family 字体 1.可以同时指定多个字体,中间用英文状态的逗号隔开,英 ...

  5. css内容样式属性

    设置元素的最大高度.最小高度.最大宽度.最小宽度,用max-height.min-height.max-width.min-width. visibility:设置元素是否可见.visible和hid ...

  6. CSS之样式属性(背景固定、圆形头像、模态框)

    CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...

  7. CSS 所有样式属性大复习

    1.背景与前景 /*背景色,样式表优先级高*/ background-image:url(路径);    /*设置背景图片(默认)*/ background-attachment:fixed;     ...

  8. css clip样式 属性功能及作用

    clip clip 在学前端的小伙伴前,估计是很少用到的,代码中也是很少看见的,但是,样式中有这样的代码,下面让我们来讲讲他吧! 这个我也做了很久的开发没碰到过这个属性,知道我在一个项目中,有一个功能 ...

  9. CSS哪些样式属性可以继承

    不可继承的:display.margin.border.padding.background.height.min-height.max- height.width.min-width.max-wid ...

随机推荐

  1. Thymeleaf模板引擎的使用

    Thymeleaf模板引擎的使用 1.模板引擎 JSP.Velocity.Freemarker.Thymeleaf 2.springboot推荐使用Thymeleaf模板引擎 特点:语法更简单,功能更 ...

  2. django后台管理-admin

    0922自我总结 django后台管理-admin 一.模型注册 admin.py 注册方式一: #在对于注册的app中的admin文件中导入模型然后注册模型 admin.site.register( ...

  3. 苹果开始推送 macOS Catalina10.15 正式版系统更新

    北京时间今天凌晨 1 点,苹果正式推送了 macOS Catalina 10.15 正式版升级.macOS Catalina 10.15 正式版带来了许多重大改变,包括Sidecar.iTunes应用 ...

  4. scipy.misc.toimage()出现toimage报错

    scipy.misc.toimage()出现toimage报错 自己被这个问题困扰了许久,其实最后发现其实toimage这个函数已经被取消了,或者说是没有这个函数了.有了新得函数与之代替,那就是Ima ...

  5. 渗透测试-基于白名单执行payload--zipfldr.dll

    0x01 zipfldr.dll简介: zipfldr.dll自Windows xp开始自带的zip文件压缩/解压工具组件. 说明:zipfldr.dll所在路径已被系统添加PATH环境变量中,因此, ...

  6. 当前机器的各种进程、服务信息的收集(win)

    当前机器的各种进程.服务信息的收集(win) 前言 我们在做渗透测试的过程中,遇到Windows系统的环境是最多的,然而在拿到一台Windows胸膛呢权限之后,我们要进行横向渗透测试或者纵向渗透测试, ...

  7. spring-boot-dependencies、spring-boot-starter-parent、io.spring.platform详解

    上一篇文章介绍了springboot依赖版本号管理的几种方式,现在来详细分析一下spring-boot-dependencies.spring-boot-starter-parent.io.sprin ...

  8. Django RESRframework奇淫技巧

    Django RESRframework Mixins, ViewSet和router配合使用 Mixins的类共有五种 CreateModelMixin ListModelMixin Retriev ...

  9. 把图片在word中显示

    如下: //放入word中 #region word ThreadPool.QueueUserWorkItem(//使用线程池 (P_temp) =>//使用lambda表达式 { G_wa = ...

  10. LoadRunner脚本优化—迭代的组合用法

    Elect next row——选择下一行 Sequential:顺序取行 Random:随机取行 Unique:每一个值只能使用一次 中止:abort Vuser 循环Vuser分配到的列表 只循环 ...