尺寸样式属性 | 学习笔记

简介: 快速学习尺寸样式属性。

开发者学堂课程【CSS 快速掌握尺寸样式属性】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/611/detail/9170


尺寸样式属性


内容介绍

一、尺寸样式属性

 

一、尺寸样式属性

< !DOCTYPE html >

<html lang="en">

<head>

<meta charset="UTF-8">

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

<style type="text/css">

/*使用类选择器来设置样式*/

.box{

width:100pх ;

height: 100pх;

background-color: #f00;

}

</style> ,

</head>

<body>

<!--div标签设置宽度设置高度设置背景颜色-->

<div class="box">/div>

</body>

</html>

在浏览器中打开,便会发现有出现相应的区域,如果不给这个元素设置一个宽,那么 div 的宽就是自动的。

其中 width 是设置宽度,height 是设置高度,background-color 是设置背景颜色。

问:<span></span>能够设置宽度、高度吗?

答:不可以,因为 span 标签是一个行内函数,它是不可以设置宽度和高度的,只有块级元素才可以设置宽度与高度,span 标签的宽度和高度只由它的内容决定。

相关文章
|
1月前
|
弹性计算
|
2月前
|
前端开发 容器
CSS实现旋转圆角叠加样式,你学会了吗?
CSS实现旋转圆角叠加样式,你学会了吗?
45 0
|
6月前
|
前端开发 容器
CSS实现三列布局(左右固定宽度,中间自适应)
CSS实现三列布局(左右固定宽度,中间自适应)
|
7月前
使用SDAutoLayout实现控件根据内容进行宽度自适应和高度自适应
使用SDAutoLayout实现控件根据内容进行宽度自适应和高度自适应
126 2
|
7月前
UITableView根据表格内容进行高度自适应与使用Masonry实现根据内容进行宽度自适应和高度自适应
UITableView根据表格内容进行高度自适应与使用Masonry实现根据内容进行宽度自适应和高度自适应
104 0
|
前端开发
通过构建背景图学习CSS径向渐变
通过构建背景图学习CSS径向渐变
71 0
|
前端开发 开发者
CSS 实现半透明边框和多重边框
这篇文章整理了半透明边框、多重边框等的实现方式,供大家参考。学习这些例子还能帮助你深入掌握CSS中与边框相关的属性,包括 `border`,`outline`,`box-shadow` 等。
227 0
CSS 实现半透明边框和多重边框
|
JavaScript
textarea 动态宽高(根据内容动态撑开宽高)
textarea 动态宽高(根据内容动态撑开宽高)
486 0
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
147 0
|
前端开发
css中如何在一行计算固定宽度和自适应宽度
css中如何在一行计算固定宽度和自适应宽度
100 0