CSS尺寸样式属性

尺寸样式属性介绍

属性 含义
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标签将会自动的占用父元素的百分百的宽度,注意的是:高度和宽度是不一样的哈,高度不会自动占用父元素的任何位置。
  • 只有块级元素才可以设置宽高度。

原文地址:https://www.cnblogs.com/lq0001/p/11854055.html

时间: 2024-10-12 03:52:32

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

css常用样式属性详细介绍

对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级点的,这才是一个靠谱的渐进过程,下面列出一些css常用属性,仅供参考 “文字”属性共有8项: 1.“字体”(font-family),设定时,需考虑浏览器中有无该字体. 2.“大小”(font-size),注意度量单位. 3.“粗细”(font-weight),除了normal(正常).bold(粗

css内容样式属性

使用 text-indent 属性,元素首行缩进.一般来说,适用于所有的块级元素,但无法适用于行内元素和类似于图片这样的元素.可以用%.固定值和负值.继承(使用此值,父元素最好要padding相应值). 使用text-align属性,会影响一个元素中的文本行互相之间的对齐方式.(块级和表元素居中要使用外边距实现).left.right .center和<center>(不仅影响文本,还会把整个元素居中).justify(使文本的两端都对齐,由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸

CSS之样式属性

CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;background-color: red} /*块级标签设置了width会生效*/ span {width: 1000px;background-color: red} /*内联标签设置了width不生效*/ 二.字体属性 1.文字字体:font-family font-family可以把多个字体名称作为一个

css布局样式属性【text-overflow】

当文本过长,需缩略显示时,使用CSS属性[text-overflow]即可满足需求:关键字: text-overflow:ellipsis语法:text-overflow : clip | ellipsis clip :默认值 .不显示省略标记(...),而是简单的裁切.ellipsis: 当对象内文本溢出时显示省略标记(...). 注意:text-overflow 还只是ie的私有属性而已,也没被收录到w3c标准里 . overflow: hidden; text-overflow:ellip

CSS文字样式属性

本章主要内容 大小 font-size:相对 | 绝对 相对(em %) 字体的大小是根据父级字体的大小而改变的 绝对(px) 字体 font-family:字体 | 字集 颜色 color:颜名 | 十六进制 | rgb 粗细 font_weight:normal(默认) | bold(加粗) | bolder(更粗) | lighter(更细) | 100~900 样式 font-style:normal | italic(斜体) | oblique(倾斜) font-variant: no

css字体样式(Font Style),属性

css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识.以下是我精心整理的css字体样式属性知识,供大家学习参考: css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant font-weight font-size font-family} 2 字体类型 {font-family:"

CSS控制列表样式属性list-style有哪些?怎么用?

CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云南小天使的回答很好的帮助了众多遇到同样问题的网友原文地址http://www.w3cschool.cn/css3/question-10231611.html 以下为回答原文: 一.什么是CSS列表? CSS列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业

css 字体样式设置

css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识.以下是我精心整理的css字体样式属性知识,供大家学习参考: css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant

CSS 尺寸 (Dimension)

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度.同样,它允许你增加行间距. 更多实例 设置元素的高度 这个例子演示了如何设置不同元素的高度. 使用百分比设置图像的高度 这个例子演示了如何使用百分比值设置元素的高度. 使用像素值来设置元素的宽度 本例演示如何使用像素值来设置元素的宽度. 设置元素的最大高度 此示例演示如何设置元素的最大高度. 使用百分比来设置元素的最大宽度 本例演示如何使用百分比值来设置元素的最大宽度. 设置元素的最低高度 此示例演示如何设置元素的最小高度.