尺寸样式属性介绍

属性 值 含义
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. 超详细的FreeRTOS移植全教程——基于srm32

    ### 准备 在移植之前,我们首先要获取到FreeRTOS的官方的源码包.这里我们提供两个下载链接: > 一个是官网:http://www.freertos.org/ > 另外一个是代码托 ...

  2. LeetCode初级算法--数组01：只出现一次的数字

    LeetCode初级算法--数组01:只出现一次的数字 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn. ...

  3. SSH服务协议

    1.SSH介绍: SSH 是Secure Shell Protocol 的简写,由IETF网络小组(Network Working Group)制定:在进行数据传输之前,SSH先对联机数据包通过加密技 ...

  4. drf框架中分页组件

    drf框架中分页组件 普通分页(最常用) 自定制分页类 pagination.py from rest_framework.pagination import PageNumberPagination ...

  5. Microsoft Word 2019 mac破解版下载

    Microsoft Word 2019 Mac版是大名鼎鼎的Office办公软件组件之一,能帮助你进行文字排版,可方便的进行创作项目.作业.信件.博客.剧本.笔记.评论文章或简历. Microsoft ...

  6. STL的vector略解

    本文部分内容参考于这儿. vector 的基础知识,上文已经阐述地很详尽了.笔者谨给出 vector 的声明及其常用函数. 代码抬头需包含 #include<vector> using n ...

  7. [牛客网NOIP赛前集训营-提高组（第一场）]C.保护

    链接:https://www.nowcoder.com/acm/contest/172/C来源:牛客网 题目描述 C国有n个城市,城市间通过一个树形结构形成一个连通图.城市编号为1到n,其中1号城市为 ...

  8. 1、Struts2基本入门

    一.了解了这几个主要的优点,会促使你考虑使用Struts2 : 1.POJO表单及POJO操作 - Struts2 去除掉了Struts框架中的Action Forms部分.在Struts2框架下,你 ...

  9. 手机号码格式化显示javascript

    /*手机代码格式化一般与Object.oninput=function(){}连用*/ function phoneFormat(phone){ if(phone.length <= 3 ){ ...

  10. 概念理解：boost::asio::定时器2

    多线程同步回调#include <cstdio> #include <iostream> #include <boost/asio.hpp> #include &l ...