文章目录
四.尺寸和边框
- 尺寸
设置元素在页面中的宽高(对高度设置比较少,更关注宽度的设置)
width
:取值:以px
为单位的数字;rem
为单位的数字;%
父元素宽度百分比
height
:取值:以px
为单位的数字;rem
为单位的数字;%
:父元素没有定义高度,就失效。父元素有定义高度,就是这个高度的百分比(要注意)
在不写死宽高属性时(百分比可以),还可以设置下列四个属性:
max-width
限制元素最大的宽度
min-width
限制元素最小的宽度
max-height
限制元素最大的高度
min-height
限制元素最小的高度
注意,如果给img
设置max-width:100%;
:不是父元素的100%,这里的100%是图片原始尺寸的100%;意味着,这张图片可以缩放,但是最大不能超过本身原始尺寸的100%
附加知识点----单位
尺寸的单位
- 绝对单位
px
像素in
英寸1in=2.54cm
pt
磅值,多用于定义字号大小:1pt=1/72in
cm
mm
- 相对单位
em
:以父元素设置的值为一个基本单位,1.5em。就是1.5个基本单位rem
:以html
标签设置的值为一个基本单位
如果html没有设置值,1rem默认为16px
%
:多数是父元素设置值的百分比
- 页面中可以设置尺寸的元素
- 所有块级元素都可以设置尺寸
- 大多数行内元素不能设置尺寸
- 所有行内块可以设置尺寸(input)
- 所有自带宽高属性的元素,都可以设置宽高(如:
img
)
- 元素默认的宽高值是多少
块级 | 行内 | 行内块 |
---|---|---|
不写宽度,默认宽度是父元素的100%;不写高度,高度靠内容撑开,如果没有内容,高度为0 | 不写宽高时,宽高都是靠内容撑开。没有内容就为0(如果在当前行还要有其他行内元素,则宽为0,高为同行行内元素的高度) | 不写宽 |