CSS常用属性

一：margin和padding的区别

margin和padding的区别

margin是内边距	padding是外边距
margin-left:10px;左外边距	padding-left:10px;左内边距
margin-right:10px; 右外边距	padding-right:10px;右内边距
margin-top:10px; 上外边距	padding-top:10px;上内边距
margin-bottom:10px; 下外边距	padding-bottom:10px; 下内边距
margin:10px; 四边统一外边距	padding：10px;四边统一内边距
margin:10px 20px;  上下、左右外边距	padding:10px 20px; 上下、左右内边距
margin:10px 20px 30px;  上、左右、下外边距	padding:10px 20px 30px; 上、左右、下内边距
margin:10px 20px 30px 40px; 上、右、下、左外边距	padding:10px 20px 30px 40px;上、右、下、左内边距

                                                        注意：margin：0 auto；  只对块级元素起作用

二、align-items属性

align-items: center; 垂直居中

align-items:flex-star; 垂直对齐开始位置

align-items:flex-end; 垂直对齐结束位置

 

三、background-repeat属性

background-repeat: repeat; 全部覆盖 

background-repeat: repeat-x;横向 

background-repeat: repeat-;纵向 

background-repeat: no-repeat; 不重复

 

overflow: hidden; 清除浮动

 

四、justify-conten容器属性

justify-content:flex-start；（默认值）左对齐

justify-content:flex-end；右对齐

justify-content:center；居中

justify-content: space-between;两端对齐

justify-content:space-around；每个项目两侧的间隔相等

justify-content:space-evenly；任何两个项目之间的间距（和边缘的空间）相等

 

五、vertical-align属性

vertical-align: baseline;基线对齐

vertical-align: bottom;水平对齐

vertical-align: middle;居中对齐

vertical-align: top;顶部对齐

vertical-align: text-top;文本顶部对齐

vertical-align: bottom;底部对齐

vertical-align: text-bottom;文本底部对齐

vertical-align:sub;下标对齐

vertical-align:super;上标对齐

 

六、display用于设置元素之间的布局样式

display: flex; 弹性布局，元素在单个方向上连续排列，排满后可以切换到下一行

display：none；不显示

display: block; 块级元素，单独占据一行，可以设置宽高

display:inline；内联元素，不换行，无法设置宽高

display: inline-block;  内联块级元素，不换行，但可以设置宽高

display：grid ；网格布局，通过行列将容器分割为若干单元格，元素显示在单个或多个单元格内

display: inline-table;

 

八、text-align属性

text-align: center;文本居中

text-align:justify；两端对齐

 

九、text-decoration属性

text-decoration: none;（默认值）去掉下划线

text-decoration:underline;  添加下划线

text-decoration:overline;  顶划线

text-decoration: line-through;  删除线

 

十：position属性

position: relative; 相对定位

position: absolute; 绝对定位

position: fixed; 固定定位

 

十一：font-weight属性

font-weight: bolder; 定义更粗的字符

font-weight: lighter; 定义更细的字符

font-weight: normal;（默认值）定义标椎的字符

font-weight: bold; 定义粗体字符