CSS 常用属性

人生苦短 我用python

开始愉快的享(代)受(码)时间:

image

• 弹性布局

 display: flex;      设置为弹性布局
 flex-wrap: wrap;    让元素在必要的时候换行(即 如果一行显示不完 就在下一行显示 不至于很拥挤)
 flex:1;             各元素所占宽度比  示例表示所占宽度比为1:2
 示例: .list_one {flex: 1;}
 示例: .list_two {flex: 2;}

• position（定位）

position:fixed;    对于块级标签(如:div)来说加上position:fixed之后，该div就不会占一整行(
                   即一行可以显示多个div块标签)，一般需要手动定义宽度，如:width:100%
width: 100%;       设置标签宽度 (写法:长度 | 百分比 | auto)
height: 50px;      设置标签高度 (写法:长度 | 百分比 | auto)
line-height:100px; 表示行高 

• 透明度(opacity)

.image {
    opacity: 0.5
}

• background（背景）

background-color: 字体;    设置背景颜色
background-image: url() ; 设置背景图片

• font（字体）

color: red;       设置字体颜色
font-size: 10px;  设置字体大小

• margin(外边距)

margin: 40px 40px 40px 40px;     各边距离外部标签40px 或者简写 margin:40px
margin: 30px 40px;               距离外部标签 上下30px 左右40px
margin-bottom: 30px;             底部距离外部标签30px (上下左右分别为: top bottom left right)

• padding(内边距)

padding: 40px 40px 40px 40px; 距离内边距各40px 或者简写 margin:40px
padding: 30px 40px;           上下30px 左右40px
padding-bottom: 30px;         内部距离底边距30px (上下左右分别为: top bottom left right)

• bodder(边框)

边框类型有: solid :实线 ,dashed :虚线, dotted:点线

border-bottom:red 2px solid; 设置下边框为红色 宽为2px 类型为实线(上下左右分别为: top bottom left right)
border-radius: 2px;  设置半径 (如: 可通过这种方式 将图片变成圆形)

• 对齐

text-align:center;  文本左对齐 (方式有: left center right)

• 列表样式

list-style:none   无符号显示 (选择范围:
·disc：圆形
·circle：空心圆
·square：方块
·decimal：十进制数字
·lower-roman：小写罗马数字
·upper-roman：大写罗马数字
·lower-alpha：小写希腊字母
·upper-alpha：大写希腊字母
·none：无符号显示)

打完收工!!!