CSS总结1

1.常用属性

盒子模型

1.1margin外边距

margin:外边距,两个盒子自间的距离

• 一个值：全部都是
• 两个值：上下 左右
• 三个值：上 左右 下
• 四个值：上 右 下左

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	以包含元素宽度的百分比指定外边距。
inherit	规定应该从父元素继承外边距。

1.2padding内边距

padding:内边距,盒子边框与内容的距离。

• 一个值：全部都是
• 两个值：上下 左右
• 三个值：上 左右 下
• 四个值：上 右 下 左

1.3display改变元素等级

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

1.4position定位元素

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 absolute在没有上下文relative时，是参考当前视窗页面做偏移的。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。(固定定位，滚动也不影响位置)
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。
sticky	导航栏(滚动一部分后固定)

1.5float浮动

left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

用完删除

<div class="clearfix"></div>

.clearfix {
    clear: both;
}

1.6border边框

p {
  border:5px solid red;
  }

值	描述
border-width	规定边框的宽度。
border-style	规定边框的样式。
border-color	规定边框的颜色。

border-style具体样式

none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。
ridge	定义 3D 垄状边框。
inset	定义 3D inset 边框。
outset	定义 3D outset 边框。
inherit	规定应该从父元素继承边框样式。

div{
border:2px solid;
border-radius:25px;//圆角边框
}

1.7text文本

text-decoration下划线

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

text-align文本对齐

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

1.8box盒子

1.带边框的盒子

div	{
    box-sizing: border-box;//带边框的盒子
    border: 1px solid #ccc; //边框属性
    width: 50%;
    float: left;   
}

2.添加阴影box-shadow

div
{
    box-shadow: 10px 10px 5px #888888;
}

2.常用效果

2.1居中

1.居中对齐

div {
  display: flex; //将对象作为弹性伸缩盒显示
  align-items: center;
}

2.块居中

div {
    width: 80%;
    margin:0 auto;
}

2.2.更改li前图片

.list li {
    list-style-image: url('图片地址');
    list-style: square; //自带的有很多
}

2.3活动

button:hover {
    background-color: red;//鼠标悬停在按钮上时更改颜色
}
button:active {
    background-color: red;//鼠标点击按钮时更改颜色
}

a:link    {color:blue;}//未访问
a:visited {color:blue;}//访问时
a:hover   {color:red;}//悬停
a:active  {color:yellow;}//点击

d;//鼠标悬停在按钮上时更改颜色
}
button:active {
background-color: red;//鼠标点击按钮时更改颜色
}

a:link {color:blue;}//未访问
a:visited {color:blue;}//访问时
a:hover {color:red;}//悬停
a:active {color:yellow;}//点击