【网页制作】CSS尺寸样式属性

一枫阳光

已于 2022-03-24 23:21:40 修改

阅读量892

点赞数 1

分类专栏：网页制作学习 CSS 文章标签：前端 css 前端框架 html

于 2022-03-23 23:57:11 首次发布

本文链接：https://blog.csdn.net/m0_61299785/article/details/123699608

版权

网页制作学习同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

本文介绍了CSS中设置元素尺寸的两个关键属性——height和width，强调只有块级元素才能设置宽高。示例代码展示了如何为<div>元素定义高度、宽度及背景色。通过学习，你可以掌握为HTML元素设定尺寸的方法，从而更好地布局网页。

摘要由CSDN通过智能技术生成

CSS尺寸样式属性作用：给html元素设置高度和宽度。

注意：只有块级元素才可以设置宽度和高度。

属性名称

作用

单位/值

height

设置元素的高度

length：使用px表示高度
auto：自动计算高度

%：基于包含他的块级对象的百分比高度

width

设置元素的宽度

同上方

代码：

<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>尺寸样式属性</title>
   <style type="text/css">
       #a{
           height: 100px;
           background-color: #00f;
           /* 如果没有设置宽度，默认和浏览器宽度一样 */

       }
       #b{
           width: 100px;
           height: 100px;
           background-color: #f00
       }
   </style>
</head>
<body>
   
   <div id="b">火影忍者</div>
   <div id="a">电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。</div>
</body>
</html>