目录
元素的尺寸
属性 | 值 | 说明 |
---|---|---|
width | auto、长度值或百分比 | 元素的宽度 |
height | auto、长度值或百分比 | 元素的高度 |
min-width | auto、长度值或百分比 | 元素的最小宽度 |
min-height | auto、长度值或百分比 | 元素的最小高度 |
max-width | auto、长度值或百分比 | 元素的最大宽度 |
max-height | auto、长度值或百分比 | 元素的最大高度 |
用于可能动态产生元素尺寸变大变小的问题,来限制最大最小值
div{ background: silver; width: 200px; height: 200px; min-width: 100px; min-height: 100px; }
<div>html5</dive>
div{ padding-top: 10px; padding-bottom: 10px; padding-right: 10px; /*上下各空出10,20px*/ padding: 10px 20px; /*上,右,下,左*/ padding: 10px, 20px,10px,10px; }
溢出的参数值
值 | 说明 |
---|---|
auto | 浏览器自动处理溢出内容,用滚动条 |
hidden | 有溢出,直接剪掉 |
scroll | 不管是否溢出,都有滚动条 |
visible | 默认值,不管是否溢出,都显示 |
div{ overflow-y: auto; }
属性值 | 说明 |
---|---|
visible | 默认值,元素在页面上可见 |
hidden | 元素不可见,但会占据空间 |
collapse | 元素不可见,隐藏表格的行列。如果不是表格,则和hidden一样 |
div{ background: silver; width: 200px; height: 200px; visibility: visible; }
css盒模型中的display属性,可以更改元素本身盒类型,那么有哪些盒类型呢?
<div>, <p>
<span>, <d>
<img>
值 | 说明 |
---|---|
block | 盒为块级元素 |
inline | 盒为行内元素 |
inline-block | 盒为行内-块元素 |
none | 盒子不可见,不占位 |
div{ background: silver; width: 200px; height: 200px; /*转成了行内元素*/ display: inline; /*转成了行内-块元素*/ display: inline-block }
值 | 说明 |
---|---|
left | 浮动元素靠左 |
right | 浮动元素靠右 |
none | 禁止浮动 |
#a{ background: maroon; float: left; } #b{ background: green; float: right; } #c{ background: blue; float: left; }
如对本文有疑问, 点击进行留言回复!!
荐 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
深入理解CSS background-blend-mode的作用机制
网友评论