CSS尺寸样式属性
程序员文章站
2023-08-24 14:50:10
尺寸样式属性介绍 属性 | 值 |含义 | | height| auto:自动,浏览器会自动计算高度length:使用px定义高度%:基于包含它的块级对象的百分比高度|设置元素高度 width |同上|设置元素的宽度 height属性和width属性 接下来让我们进入 属性、 属性实践,笔者用 属性 ......
尺寸样式属性介绍
属性 | 值 | 含义 |
---|---|---|
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控制前台样式在360和chrome的兼容问题,跪求高手帮忙,在线等,,,,,,,_html/css_WEB-ITnose
-
使用css中的page-break-after属性来实现WEB页面强制分页打印
-
asp.net textbox 属性value没有值_html/css_WEB-ITnose
-
html title换行方法 如a链接标签内title属性鼠标悬停提示内容换行_html/css_WEB-ITnose
-
移除IOS下按钮的原生样式_html/css_WEB-ITnose
-
jQuery和CSS3堆叠卡片样式导航菜单特效_html/css_WEB-ITnose
-
怎么让css两个属性相等_html/css_WEB-ITnose
-
a标签加上CSS样式后 onclick事件不执行,怎么办- -。_html/css_WEB-ITnose
-
利用css伪类选择器hover控制两个元素属性
-
解说css中的margin属性缩写方式_html/css_WEB-ITnose