尺寸样式属性介绍

属性 值 含义
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. Windows下如何调试驱动程序

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html 一.配置Windbg使用双机调试 win10中“windbg+vm ...

  2. 网页布局——Flex弹性框布局

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 需要安卓4.4及以上版本可以使用 ...

  3. .net core运用application/x-www-form-urlencoded发起post请求

    通常情况下都是使用 application/json发起post请求,但是有的.net 接口只接收 application/x-www-form-urlencoded 例如: { name:" ...

  4. iptables详解之filter

    iptables详解之filter iptables令很多小伙伴脑阔疼,下面我们来说说如何使用iptables. 一.iptables格式 1.1.iptables 帮助 通过iptables --h ...

  5. eclipse 的使用

    eclipse 的官方下载:https://www.eclipse.org/downloads/ 安装时选择 :Eclipse  IDE for Java EE Developers 设置: 1. 编 ...

  6. 《java编程思想》P140-P160（第七章复部+第八章部分）

    1.不用修饰符 修饰的方法或类,它们的修饰符是 默认修饰符,即 包访问权限(包内都可以用)(临时记的) 2. final数据: 对于基本类型,final使数值恒定不变,而对于对象引用,final使引用 ...

  7. Head First设计模式——观察者模式

    1.气象监测应用,错误示范 有一个气象站,分别有三个装置:温度感应装置,湿度感应装置,气压感应装置.WeathData对象跟踪气象站数据,WeathData有MeasurmentsChanged()方 ...

  8. MakeDownPad2基本使用

    一.安装 1.1.MakeDownPad2下载安装 MakeDownPad2从官网下载安装包直接安装即可 1.2.依赖安装 MakeDownPad2支持html代码,如果要使用预览功能就需要安装awe ...

  9. php好在哪？

    PHP即“超文本预处理器”,是一种通用开源脚本语言.PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言.PHP独特的语法混合了C.Java.Perl以及 PHP 自创的语法.利于学习 ...

  10. postman-windows下newman的使用

    一.newman的安装 1.安装node.js下载https://nodejs.org/en/ C:\Users\iphauser>node -vv10.16.1C:\Users\iphause ...