标签：12px 必须 水平 通过 常见 ack 问题 相对 设置
1、css常见样式（声明）
1）background：色（color）图（image）铺（no repeat）定（fixed）位（center）
注：颜色的表示方式
* rgb(0,255,0)
* rgba(0,233,0,0.3)
* #aaffaa
2）border：边框粗细、形状、颜色
border：1px solid red;
若用上面的合并写法，表示四个方向的边框一样
分开表示如下：
border-top:粗细 形状 颜色;
border-right:粗细 形状 颜色;
border-bottom:粗细 形状 颜色;
border-left:粗细 形状 颜色;
大小的表示方式（单位）：
-px：像素（指计算机屏幕上的一个点组成）
-em：倍数（针对原来设置的值进行加倍），如1em等同于当前字体的大小
-%：百分比
-in：英寸；cm：厘米；mm：毫米；pt：1/72英寸
-border-radius:5px; 边框的边角
2、盒子模型
盒子在水平方向实际占用大小：width+padding+border+margin
width:宽度
height:高度
padding：内边距
margin：外边距
border：边框
注：padding：上 右 下 左;（四个值顺时针）
padding：上 右左 下; （三个值）
padding：上下 左右;
padding：上下左右;
两个盒子时margin-bottom和margin-top的塌陷，大的包含小的
3、css常见属性
1）控制字体
font-family:"微软雅黑";
font-size:12px; //字体大小
font-weight:800; //字体粗细，定义100的整数倍
font-style:italic; //文字斜体
color:red; //字体颜色
text-indent:2em; //缩进两个字符
text-align:center; //文字居中
text-decoration:enderline; //默认值none 文本下划线
line-height:1.2em; //文本行高（其应用场景在input里面）
合并写法：
font:斜体 粗细 大小 "family";
2）display（控制内容的显示方式） 隐藏/显示
（1）元素的显示方式
--块元素（div/p/table）
特点：独占一行，排列方式从上往下，可以设置宽高
display:block;
--行内元素（span/a）
特点：可以跟元素共享一行，排列顺序从左往右，不可以设置宽高
display:inline;
--行内块（input/img）
特点：排列顺序从左往右，可以设置宽高
display:inline-block;
若需要修改元素的默认方式，可以通过display进行修饰
（2）隐藏元素的方式：
display:none; //隐藏元素并让出位置
opacity:0; //元素完全透明，不让出位置
3、定位
定义元素相对于正常位置应该出现的位置
1）流式定位（默认定位）
块级元素从上往下
行内元素从左往右
2）浮动定位——是脱离标准文档流的
float:left|right;
浮动会对下面的节点和父节点有影响
清除浮动带来的影响：
clear:left|right|both; //表示盒子的左，右，两边不能有浮动
总结；哪个元素受到了影响就在哪个元素里面写clear
3）position定位
-1、position:relative; 相对定位-不脱标（还是原来的位置）
相当于自己原来的位置移动，结合（top right bottom left）其中的一个或多个一起使用
-2、position:absolute; 绝对定位-脱标（脱离标准文档流让出原来的位置）
子绝父相：（用于解决盒子定位水平居中问题）
子设置绝对定位，父设置相对定位
-3、position:fixed; 固定定位-脱标（让出位置）
如：将搜索框永远固定在那个位置
注：1、绝对定位的参考点是祖先节点，若没有定位了的祖先节点则相对于最初的包含块定位
2、绝对定位的参考点（若用bottom），参考点是电脑屏幕的左下角
4、堆叠顺序问题
z-index:数值;
注：数值越大，距离用户越近；必须结合position一起使用
标签：12px 必须 水平 通过 常见 ack 问题 相对 设置
原文地址：https://www.cnblogs.com/xslzwm/p/9591923.html
