css常用属性
盒模型
包含：内容、padding、border、margin
盒模型相关属性
内容属性
width属性：元素的宽度
height属性：元素的高度
属性值单位像素
width: 100px; 元素的宽度100像素
height: 100px; 元素的高度100像素
padding属性：内填充
padding: 10px 20px 30px 40px;/* 元素的上10像素、右20像素、下30像素、左40像素的内填充 */
padding-top属性 上内填充
padding-right属性 右内填充
padding-bottom属性 下内填充
padding-left属性 左内填充
背景在padding区域显示
border属性：边框
border-left属性 左边框
border-right属性 右边框
border-top属性 上边框
border-bottom属性 下边框
属性值：
边框宽度 单位像素px
边框线型 solid单实线、double双实现、dotted点状虚线、dashed条状虚线、none没有边框
边框的颜色 关键词
border-top: 10px solid red;
border属性：元素的四周都有边框
border: 边框宽度 边框线型 边框颜色;
margin属性 外间距
margin: 10px 20px 30px 40px;/* 元素有上10像素，右20像素，下30像素，左40像素的外间距 */
margin-top 属性 上外间距
margin-right属性 右外间距
margin-bottom属性 下外间距
margin-left属性 左外间距
文字相关属性
在Photoshop中，选中图层（T），“窗口”菜单--“字符”打开字符面板，获取文字样式。
打开Photoshop，英文状态快捷键T；在工作区位置单击，输入相应文字--ctrl + enter；调整字号；英文状态快捷键v，移动文字图层，与效果图吻合，保存为.psd文件（分层文件）
font-size属性 字号 属性值单位像素
font-family属性 字体
属性值：
字体名称为中文或字体中包含空格，字体名称必须加引号
可以设置多种字体，后面字体作为备用字体，多个字体名称之间用逗号隔开
font-weight属性 文字加粗
font-weight: bold; 文字加粗
font-weight: normal; 正常
font-style属性 文字样式
font-style: italic; 文字倾斜
font-style: normal; 正常
line-height属性 行高 单位px|没有单位（字号的倍数）
在Photoshop中：
标尺：“视图”带单--标尺 或 ctrl + r
参考线：在标尺上按住鼠标左键不松手，拖拽鼠标
矩形选框工具
修改单位：“编辑”--“首选项”--“单位与标尺”，修改单位（标尺单位像素，文字单位像素），单击保存
文字在行高范围内垂直居中
文本相关属性
color属性 文字样式
关键词：red blue green pink
十六进值色值: #加六位十六进制数（0-9 a-f）
在photoshop中，英文状态快捷键i，右键单击--拷贝颜色的十六进制代码
rgba(r,g,b,a)
r-red 取值范围0-255
g-green 取值范围0-255
b-blue 取值范围0-255
a-alpha 取值范围0~1之间表示半透明，1完全不透明，0完全透明
text-align属性 文本水平对齐方式
text-align: left; 左对齐
text-align: center; 居中对齐
text-align: right; 右对齐
text-indent属性 文本缩进 单位px|em(字符宽度的倍数)
text-decoration属性 文本装饰线
text-decoration: none; 去掉文本装饰线
text-decoration: line-through; 删除线
text-decoration: underline; 下划线
信息面板：“窗口”带单--“信息” 或 F8
背景属性——要显示背景，元素必须要有尺寸
background-color属性 背景颜色
默认颜色为透明transparent
属性值可以为
关键词
十六进制色值
rgba(r,g,b,a)
background-image属性 背景图片
background-image: url();
默认重复平铺，铺满整个元素
background-repeat属性 是否重复
no-repeat 不重复
repeat-x 沿着水平方向重复
epeat-y 沿着垂直方向重复
background-position属性 背景图定位
属性值：
数值
关键词：left|center|right|top|center|bottom
位置属性
文档流
块级元素——默认垂直显示
行级元素、行块元素——默认水平显示
margin属性
浮动——元素水平方向移动
属性
float: left; 左浮动
float: right; 右浮动
浮动元素不占位，父级盒高度为0
清浮动的方法
.clearfix::after{
content: "";
display: block; /*将其他类型元素转为块级*/
clear: both; /* 清浮动 */}
定位——出现覆盖关系
属性：
position: relative; 相对定位，可以作为绝对定位的参照元素——元素占位
position: absolute; 绝对定位，需要做特殊位置调整的元素——元素不占位
位置属性：
left:0; | right:0;
top: 0; | bottom: 0;
不能单独使用，必须与position属性组合使用才会有效
其他属性
vertical-align属性 垂直对齐方式
ertical-align: top; 顶端对齐
vertical-align: bottom; 底端对齐
vertical-align: middle; 中部对齐
图片下方间隙
display属性 框类型转换
display: block; 将其他类型的元素转为块级元素，具有块级元素的特性
网友评论