CSS盒模型与定位相关属性
其他
2019-03-25 21:20:52
阅读次数: 0
display 属性
值 |
描述 |
none |
此元素不会被显示。 |
block |
此元素将显示为块级元素,此元素前后会带有换行符。 |
inline |
默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block |
行内块元素。 |
flex |
此元素作为弹性伸缩盒显示。 |
list-item |
此元素会作为列表显示。 |
run-in |
此元素会根据上下文作为块级元素或内联元素显示。 |
table |
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table |
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group |
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group |
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group |
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row |
此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group |
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column |
此元素会作为一个单元格列显示(类似 <col>) |
table-cell |
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption |
此元素会作为一个表格标题显示(类似 <caption>) |
inherit |
规定应该从父元素继承 display 属性的值。 |
盒模型属性(Box Model)
属性 |
属性值 |
说明 |
width相关 |
|
|
width |
设置元素的宽度。 |
|
min-width |
设置元素的最小宽度。 |
|
max-width |
设置元素的最大宽度。 |
|
height相关 |
|
|
height |
设置元素的高度。 |
|
min-height |
设置元素的最小高度。 |
|
max-height |
设置元素的最大高度。 |
|
padding相关 |
|
|
padding |
简写属性。作用是在一个声明中设置元素的所内边距属性,顺序是上右下左。 |
padding:010px 20px 30px |
padding-bottom |
设置元素的下内边距。 |
|
padding-left |
设置元素的左内边距。 |
|
padding-right |
设置元素的右内边距。 |
|
padding-top |
设置元素的上内边距。 |
|
border相关 |
|
|
border |
简写属性,用于把针对四个边的属性设置在一个声明。 |
|
border-style |
用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 |
|
border-width |
简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 |
|
border-color |
简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 |
|
border-bottom |
简写属性,用于把下边框的所有属性设置到一个声明中。 |
|
border-bottom-color |
设置元素的下边框的颜色。 |
|
border-bottom-style |
设置元素的下边框的样式。 |
|
border-bottom-width |
设置元素的下边框的宽度。 |
|
border-left |
简写属性,用于把左边框的所有属性设置到一个声明中。 |
|
border-left-color |
设置元素的左边框的颜色。 |
|
border-left-style |
设置元素的左边框的样式。 |
|
border-left-width |
设置元素的左边框的宽度。 |
|
border-right |
简写属性,用于把右边框的所有属性设置到一个声明中。 |
|
border-right-color |
设置元素的右边框的颜色。 |
|
border-right-style |
设置元素的右边框的样式。 |
|
border-right-width |
设置元素的右边框的宽度。 |
|
border-top |
简写属性,用于把上边框的所有属性设置到一个声明中。 |
|
border-top-color |
设置元素的上边框的颜色。 |
|
border-top-style |
设置元素的上边框的样式。 |
|
border-top-width |
设置元素的上边框的宽度。 |
|
margin相关 |
|
|
margin |
简写属性。在一个声明中设置所有外边距属性。 |
|
margin-bottom |
设置元素的下外边距。 |
|
margin-left |
设置元素的左外边距。 |
|
margin-right |
设置元素的右外边距。 |
|
margin-top |
设置元素的上外边距。 |
|
box-sizing |
属性值:content-box|border-box|inherit |
|
定位属性
属性 |
属性值 |
说明 |
float |
left |
元素向左浮动。 |
|
right |
元素向右浮动。 |
|
none |
默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
|
inherit |
规定应该从父元素继承 float 属性的值。 |
clear |
|
|
|
left |
在左侧不允许浮动元素 |
|
right |
在右侧不允许浮动元素 |
|
both |
在左右两侧均不允许浮动元素 |
|
none |
默认。允许浮动元素出现在两侧。 |
position |
absolute |
绝对定位 |
|
relative |
相对定位 |
top |
|
元素距离定点纵坐标起点的距离top:10px |
bottom |
|
元素距离定点纵坐标终点的距离 |
left |
|
元素距离定点横坐标起点的距离left:20px |
right |
|
元素距离定点横坐标终点的距离 |
z-index |
· |
决定层的先后顺序和覆盖关系 值高的覆盖值低的元素 |
Clip |
|
剪裁绝对定位元素,常用于剪裁图片 |
|
shape |
设置元素的形状,唯一合法的形状值是:rect (top, right, bottom, left) |
|
auto |
默认值。不应用任何剪裁。 |
overflow |
|
|
|
visible |
显示超出元素范围的内容 |
|
hidden |
隐藏超出元素大小的内容 |
|
scrol |
不管内容是否超出元素的范围都添加滚动条 |
|
auto |
只在内容超出元素的范围时才显示滚动条 |
visibility (可见性) |
|
|
|
inherit |
子层继承父层的可见性 |
|
visible |
无论父层可见与否子层都可见 |
|
hidden |
无论父层可见与否子层都隐藏 |
弹性盒属性
属性 |
属性值 |
说明 |
flex-direction |
row |
默认值设置子元素为x轴正向排列(默认)此时主轴为x轴从左往右排列,侧轴为y轴 |
|
row-reverse |
设置子元素为x轴从右往左排列 此时主轴为x轴,侧轴为y轴 |
|
column |
设置子元素为y 轴正向排列 ,当设置了这个属性后,主轴变成y轴,侧轴变成x轴 |
|
column-reverse |
设置子元素为y 轴反向排列 ,当设置了这个属性后,主轴变成y轴,侧轴变成x轴 |
justify-content |
center |
弹性项目居中紧挨着填充。 |
|
flex-start |
弹性项目在父元素的主轴头部紧挨着填充,默认值。 |
|
flex-end |
弹性项目在父元素的主轴尾部紧挨着填充。 |
|
space-around |
子元素平均分布于父元素的主轴上 |
|
between-around |
首位两个子元素贴着父元素的边,其余的子元素平均分布 |
align-items |
center |
子元素平均分布于父元素的侧轴上 |
|
flex-start |
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。 |
|
flex-end |
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。 |
|
baseline |
如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效 |
|
stretch |
默认值,会使项目的边距盒的尺寸尽可能接近所在行的尺寸 |
flex-wrap |
设置弹性盒子的子元素超出父容器时是否换行。 |
|
|
nowrap |
默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器。 |
|
wrap |
弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行 |
|
wrap-reverse |
反转 wrap 排列。 |
align-content |
stretch |
默认。各行将会伸展以占用剩余的空间。 |
|
flex-start |
各行向弹性盒容器的起始位置堆叠。 |
|
flex-end |
各行向弹性盒容器的结束位置堆叠。 |
|
center |
各行向弹性盒容器的中间位置堆叠。 |
|
space-between |
各行在弹性盒容器中平均分布。 |
|
space-around |
各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。 |
flex-flow |
|
flex-direction 和 flex-wrap 的简写,flex-flow:row-reverse wrap; |
align-self |
auto |
如果’align-self’的值为’auto’,则其计算值为元素的父元素的’align-items’值,如果其没有父元素,则计算值为’stretch’。 |
|
flex-start |
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。 |
|
flex-end |
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。 |
|
center |
弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。 |
|
baseline |
如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。 |
|
stretch |
如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。 |
flex |
|
设置弹性盒子的子元素占用空间的比率。 |
order |
数值 |
设置弹性盒子的子元素排列顺序。 |
转载自blog.csdn.net/dreamingbaobei3/article/details/88806463