css常用属性总结--文档
目录
引入方式
行内样式——内联样式：写在标签内部，style属性中
如：<div style=”width:100px;”></div>
内部样式——嵌入式：写在head标签内，style标签对中
如：<style> css样式 </style>
外部样式——引入式：写在head标签内，通过link标签链接：
如：<link href="css路径 " rel="stylesheet" type="text/css">css长度单位
px：相对于显示器屏幕分辨率而言，值固定，计算比较容易
em：相对长度单位，相对于父元素的font-size属性值而言
浏览器默认字号为16像素，未经调整浏览器都符合1em=16px
特点：值不固定；会继承父元素的字号大小
%：相对长度单位
rem：相对于根元素的字体大小的单位，是css3新增的单位
浏览器在默认情况下，1rem = 16像素。在IE8及更早版本的浏览器中不兼容
布局定位属性
1、display 行级元素块级元素转换
display: none; 元素不显示--隐藏元素，不占位
display: block; 元素的显示，将元素显示为块级元素 块特征
display: inline; 将元素显示为行级元素，具有行级特征
display: inline-block; 将元素显示为行块元素，具行块特征2、float浮动属性
float: left; 元素向左浮动
float: right; 元素向右浮动
float: none; 默认值，元素不浮动 3、position 定位属性
语法:position:absolute; 绝对定位 元素不占位 相对于定位父级盒
position:relative; 相对定位 元素占位 相对于元素本身的位置来定位
position:fixed; 固定定位 元素不占位 相对于浏览器窗口来定位
position:static; 默认值 元素占位 相当于没有定位
当设置absolute、relative、fixed值时元素位置可以通过改变left、right、top、bottom值进行位置定位
left: 0; right: 0; 水平方向偏移量设置
top: 0; bottom: 0; 垂直方向偏移量设置
静态定位position: static; 默认值
相当于没有定位，元素出现在正常文档流中；
相对定位position: relative; ——相对于本身的位置进行定位
一般用于元素的微调；作为绝对定位的参考元素
（1）不影响元素本身的特性
（2）相对定位仍然占位
（3）如果没有定位偏移量，对元素本身没有任何影响；如果定义了定位偏移量，相对于原来位置发生偏移
（4）提升层级
绝对定位position: absolute;——相对于最近的定位父元素定位（定位父级）
（1）使元素完全脱离正常文档流，不占位
（2）有定位父级相对于定位父级发生偏移；没有定位父级相对于整个文档发生偏移
（3）使行级元素支持宽高；没有设置宽度的块级元素宽度自适应
（4）提升层级
绝对定位的步骤：——子绝父相
为要做特殊定位的盒子（定位盒）添加position: absolute;绝对定位，设置初始位置，通过top|bottom、left|right属性：
top: 0;| bottom: 0;
right: 0; | left: 0;
为定位盒的父级盒（有固定宽度和高度），添加position: relative; 相对定位
回到定位盒，通过top|bottom、left|right属性进行精确定位
固定定位position: fixed;——相对于浏览器窗口进行定位
（1）元素定位后脱离正常文档流，不占位
（2）始终相对于浏览器的四个角为原点进行定位，不会随页面内容滚动而滚动
（3）使行级元素支持宽、高；没有设置宽度的块级元素宽度自适应
（4）提升层级
脱离文档流属性总结：
float: left|right; 脱离文档流，但不脱离文本流
position: absolute | fixed; 既脱离文档流，又脱离文本流自身属性
1、width宽度属性
语法:width:auto; 默认值
width:16px; 设置具体值
width:10%; 父级元素宽度的10%
width:inherit; 从父级继承
max-width属性：最大宽度
max-height属性：最大高度2、height 高度属性
语法:height:auto; 默认值
height:16px; 设置具体值
height:10%; 父级元素高度的10%
height:inherit; 从父级继承
min-width属性：最小宽度
min-height属性：最小高度3、margin 外边距属性
单边外间距：
margin-top属性：上外间距
margin-right属性：右外间距
margin-bottom属性：下外间距
margin-left属性：左外间距
复合写法：
margin: npx; 上下左右都是npx
margin: npx mpx; 上下 npx 左右 mpx
margin: npx mpx xpx; 上 npx 左右mpx 下 xpx
margin: npx mpx xpx ypx; 上npx 右mpx 下 xpax 左 ypx
盒子的水平居中：
width属性 设置盒子宽度
margin: 0 auto;
注意：行级元素实际不占上下外边距4、padding 内边距属性
单边内填充：
padding-top属性：上内填充
padding-right属性： 右内填充
padding-bottom属性：下内填充
padding-left属性： 左内填充
复合写法：
padding: npx; 上下左右都是npx
padding: npx mpx; 上下 npx 左右 mpx
padding: npx mpx xpx; 上 npx 左右mpx 下 xpx
padding: npx mpx xpx ypx; 上npx 右mpx 下 xpax 左ypx
注意：百分比——上下内填充与左右内填充百分数值是相对于父元素的width属性计算的。
5、border 边框属性
border-width属性：边框的宽度，属性值单位像素
border-style属性：边框的样式
border-style: none; 没有边框
border-style: solid; 单实线
border-style: double; 双实线
border-style: dashed; 条状虚线
border-style: dotted; 点状虚线
border-color属性：边框颜色。默认的边框颜色是元素本身的前景色
复合写法：
border-width: npx;
border-width: npx mpx;
border-width: npx mpx xpx;
border-wdith: npx mpx xpx ypx;
border-color属性、border-style属性
单边属性：
border-top属性：上边框
border-top-width属性：上边框的宽度
border-top-style属性：上边框的线型
border-top-color属性：上边框的颜色
border-top: border-top-width border-top-style border-top-color;
border-right属性：右边框
border-bottom属性：下边框
border-left属性：左边框
border简写：
border: border-width border-style border-color;6、background 背景属性
background-color属性：背景颜色，默认值为transparent透明
关键词/十六进制色值|rgb(r,g,b)/rgba(r,g,b,a)
背景颜色应用于内容区、padding、border区域
background-image属性：背景图片
语法：background-image: url(图片的路径);
background-image: none; 表示无背景图，默认值
background-repeat属性：背景图是否重复
background-repeat: repeat; 默认值，背景图在水平方向和垂直方向重复
background-repeat: repeat-x; 背景图在水平方向重复
background-repeat: repeat-y; 背景图在垂直方向重复
background-repeat: no-repeat; 背景图不重复
background-position属性：背景图的位置
语法：background-position: xpos ypos;
属性值：
关键词：left|center|right top|center|bottom
保证不超过两个关键词，一个是水平方向，一个是垂直方向；如果只出现一个关键词，另一个关键词默认center
长度值：图像的左上角0px 0px，负值向盒外，正值向盒内
百分比：图像在左上角0% 0%，右下角100% 100%
如果只有一个百分比数值，这个值作为水平方向的值，垂直方向将假设为50%
background属性：
background: background-color background-image background-repeat background-position;
注意：如果某一个属性不需要可以省略文本属性
1、font-size设置字体大小属性
语法：font-size:16px;2、font-family 设置字体属性
语法：font-family:”微软雅黑”,”宋体”;3、font-weight 设置文字加粗属性 (范围100--900)
语法:font-weight:normal; 正常（相当于400）
font-weight:bold; 加粗（相当于700）
font-weight:bolder; 更粗
font-weight:lighter; 更细
font-weight:inherit; 从父级继承
4、font-style 文字样式属性
语法:font-style:normal; 正常
font-style:italic; 斜体字
font-style:oblique; 倾斜字体样式
font-style:inherit; 从父级继承
5、font属性---简写
font: [font-style] [font-weight] font-size[/line-height] font-family;
注意：只有同时具有font-size属性和font-family属性时，简写生效6、line-height 行间距属性
语法:line-height:normal; 默认
line-height:number; 设置数字
如：字体大小16px，属性设置2，行高就是2*16px
line-height:length; 设置固定行间距
line-height:inherit; 继承父级行高
7、color 文字颜色属性
语法:color:transparent; 透明
color:#333333; 可简写#333
color:rgb(23,44,22);
color:rgba(23,44,22,0.4); 最后一个属性是设置透明度
8、text-align 文本对齐方式
特点：给块级元素设置、图片的水平对齐也可设置
语法:text-align:left; 左对齐 默认
text-align:center; 居中对齐
text-align:right; 居右对齐
9、text-decoration 文本装饰线属性
语法:text-decoration:none; 去除文本装饰线
text-decoration:underline; 下划线
text-decoration:overline; 上划线
text-decoration:line-through; 删除线
10、text-indent 文本首行缩进属性
语法:text-indent:32px; 缩进两个汉族
text-indent:2em; 字符宽度
text-indent:20%; 相当于父级元素宽度的20%
11、vertical-align 设置元素垂直对齐方式
语法:vertical-align:baseline; 默认 元素基线对齐
vertical-align:top; 顶端对齐
vertical-align:bottom; 顶端与行中最低的元素顶端对齐
vertical-align:middle; 元素放置在父元素的中部
vertical-align:20%; 百分比排列，允许使用负值
vertical-align:20px; 同上
vertical-align: super;上标 <sup></sup>
vertical-align: sub; 下标 <sub></sub>
其他属性
1、overflow 溢出隐藏属性
语法: overflow-x属性：只包含水平方向
overflow-y属性：只包含垂直方向
overflow: visible; 溢出显示，默认值
overflow: hidden; 溢出隐藏
overflow: scroll; 溢出显示滚动条
overflow: auto; 自动
overflow: inherit; 继承
1.1显示隐藏属性
1）display属性
display: none; 元素的隐藏，将整个元素隐藏，不占用任何空间
display: block; 元素的显示
2）visibility属性
visibility: hidden; 元素内容不可见，只隐藏内容，占位空间仍然保留
visibility: visible; 元素可见
3）设置元素位置，让其消失
4）overflow属性实现，将要隐藏元素移出父元素的范围
5）opacity属性，实现元素的不可见
2、表格相关属性
border=“0|1” 1为表格有边框
cellpadding=“” 内容和单元格间距
cellspacing=“” 单元格间距
合并单元格:rowspan/colspan 跨行/跨列合并
表格css属性
border-collapse属性：设置表格行和单元格的边是否合并还是独立
border-collapse: separate; 边框独立
border-collapse: collapse;相邻边合并
border-spacing属性：当表格边框独立时，行和单元格的边框在横向和纵向上的间距
如果两个长度值，第一个用于横向间距，第二个用于纵向间距
如果只有一个长度值，这个值作用于横向和纵向的间距
border-spacing: 10px 20px;
3、表单相关属性
readonly属性：只读属性，不能修改，可以被提交
disabled属性：禁用表单元素，被禁用的元素不可用，不可点击，不会被提交
maxlength属性：允许输入的最多的字符数
size属性：控制input的长度
value属性：初始值
placeholder属性：文本域的提示信息
checked属性：用于单选按钮和复选框的默认选中
selected属性，用于下拉列表的默认选中
4、伪类选择器
语法：选择器:伪类{ css样式 }
链接的不同状态都可以以不同的方式显示
a:link{ 链接的默认样式 }
a:visited{ 链接访问过后的样式 }
a:hover{ 鼠标悬停到链接上的样式 }
a:active{ 鼠标按下时的样式 }
四个伪类状态都生效： LV-Ha
5、伪元素选择器
1）element::before{ content:"伪元素的内容"; 属性名称: 属性值; }
在element的内部，内容之前添加"伪元素的内容"
2）element::after{ content:"伪元素的内容"; 属性名称: 属性值; }
在element的内部，内容之后添加"伪元素的内容"6、clear属性
clear: left; 清除左侧浮动
clear: right; 清除右侧浮动
clear: both; 清除两侧浮动
7、定位层级
z-index属性，定位盒叠放次序的调整，z-index属性值越大，叠放次序越高
值可能为：正整数、负整数、0（默认值）
只对定位元素生效；
数值越大叠放次序越高；
如果取值相同，则根据书写顺序，后来居上；
正值向上调整层级，负值向下调整层级；
属性值没有单位
8、透明度属性
1）opacity属性——元素的不透明度，将内容、背景全部透明
兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器下支持
取值范围：0~1之间，0表示完全透明，1表示完全不透明，0-1之间表示半透明
2）filter属性——filter: Alpha(opacity=x)
兼容性：仅支持IE6、7、8、9，在IE10及以上版本中被废除
取值范围：0~100之间，0表示完全透明，1表示完全不透明，0-100之间表示半透明
3）rgba(r,g,b,a)——用于颜色的不透明度设置
兼容性：IE6、7、8不支持，IE9及更早版本的浏览器中都支持
r--red 红色 0-255之间
g--green 绿色 0-255之间
b--blue 蓝色 0-255之间
a--alpha 透明度 0-1之间9、生产BFC
根元素
float: left|right;
position: absolute|fixed;
overflow: hidden|scroll|auto;
display: inline-block;
本文来自博客园，作者：JackieDYH，转载请注明原文链接：https://www.cnblogs.com/JackieDYH/p/17634931.html
