CSS轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

  • outline-color设置轮廓的颜色

  • outline-style设置轮廓的样式

1
2
3
4
5
6
7
8
9
none  默认。定义无轮廓。
dotted  定义点状的轮廓。
dashed  定义虚线轮廓。
solid 定义实线轮廓。
double  定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove  定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset  定义 3D 凸边轮廓。此效果取决于 outline-color 值。
  • outline-width设置轮廓的宽度
1
2
3
4
5
thin  规定细轮廓。
medium  默认。规定中等的轮廓。
thick 规定粗的轮廓。
length  允许您规定轮廓粗细的值。
inherit 规定应该从父元素继承轮廓宽度的设置。

CSS-margin(外边距)

可能的值：

1
2
3
auto    设置浏览器边距。这样做的结果会依赖于浏览器
length  定义一个固定的margin（使用像素，pt，em等）
%       定义一个使用百分比的边距
  • Margin-单边外边距属性

在CSS中，它可以指定不同的侧面不同的边距：

1
2
3
4
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
  • Margin-简写属性

为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。

1
2
3
4
5
6
margin属性可以有一到四个值。如:
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px

CSS-padding（填充）

可能的值：

1
2
length     定义一个固定的填充(像素, pt, em,等)
%          使用百分比值定义一个填充
  • padding-单边内边距属性

在CSS中，它可以指定不同的侧面不同的填充：

1
2
3
4
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
  • padding-简写属性

为了缩短代码，它可以在一个属性中指定的所有填充属性。

1
2
3
4
5
6
Padding属性，可以有一到四个值。如：
padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px

CSS-分组和嵌套选择器

  • 分组选择器：

h1,h2,p{
color:green;
}

  • 嵌套选择器

它可能适用于选择器内部的选择器的样式。

1
2
3
4
p{ }:                为所有 p 元素指定一个样式。
.marked{ }:          为所有 class="marked" 的元素指定一个样式。
.marked p{ }:        为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }:         为所有 class="marked" 的 p 元素指定一个样式。

css-尺寸

1
2
3
4
5
6
7
height 设置元素的高度。
line-height 设置行高。
max-height  设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height  设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

CSS-Display(显示)与Visibility(可见性）

  • 隐藏元素-display:none或visibility:hidden

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

  • Display-块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

1
2
3
4
块元素的例子：
<h1>
<p>
<div>

内联元素只需要必要的宽度，不强制换行。

1
2
3
内联元素的例子：
<span>
<a>
1
2
3
4
5
6
7
8
9
下面的示例把列表项显示为内联元素：
li{
  display:inline;
}

下面的示例把span元素作为块元素：
span{
  display:block;
}

CSS-Position(定位)

  • 默认值，即没有定位，遵循正常的文档流对象。

  • static定位

静态定位的元素不会受到 top, bottom, left, right影响。

1
2
3
4
div.static {
  position: static;
  border: 3px solid #73AD21;
}
  • fixed 定位

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

1
2
3
4
5
p.pos_fixed{
  position:fixed;
  top:30px;
  right:5px;
}
  • relative 定位

相对定位元素的定位是相对其正常位置。

1
2
3
4
5
6
7
h2.pos_left
{
    position:relative;
    left:-20px;
}
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
  • absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html:

1
2
3
4
5
6
7
h2{
  position:absolute;
  left:100px;
  top:150px;
}
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
  • sticky 定位

position:sticky;基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是top,right,bottom或left之一，换言之，指定top,right,bottom或left四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

1
2
3
4
5
6
7
8
9
注意:Internet Explorer, Edge15及更早IE版本不支持sticky定位。Safari需要使用-webkit- prefix(查看以下实例)。

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}
  • 重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。
z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面，或后面)
一个元素可以有正数或负数的堆叠顺序：

1
2
3
4
5
6
img{
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
}