CSS基础学习

盒模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容(element)、内边距(padding)、边框(border) 和 外边距(margin) 的方式。

注意：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

定位

position 属性

通过使用position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

  • static

    元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

  • relative

    元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

  • absolute

    元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

  • fixed

    元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

对元素进行定位。

属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。

相对定位

position: relative;

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。

绝对定位

position: absolute;

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位使元素的位置与文档流无关，因此不占据空间。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

浮动

float

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

clear

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

选择器

  • 元素选择器

    通过HTML元素来配置css

    h2{}

  • 选择器分组

    使用,分隔

    h2,p{}

  • 类选择器

    .import{}

  • ID选择器

    #name{}

  • 属性选择器

    按照元素中的属性配置css

    a[href]{}

    选择器 描述
    [attribute] 用于选取带有指定属性的元素。
    [attribute=value] 用于选取带有指定属性和值的元素。
    [attribute~=value] 用于选取属性值中包含指定词汇的元素。
    [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
    [attribute^=value] 匹配属性值以指定值开头的每个元素。
    [attribute$=value] 匹配属性值以指定值结尾的每个元素。
    [attribute*=value] 匹配属性值中包含指定值的每个元素。

  • 后代选择器

    div a{}

  • 子元素选择器

    h1 > strong{}

  • 相邻兄弟选择器

    h1 + p{}

  • 伪类

    a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

    该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

    属性 描述 CSS
    :active 向被激活的元素添加样式。 1
    :focus 向拥有键盘输入焦点的元素添加样式。 2
    :hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
    :link 向未被访问的链接添加样式。 1
    :visited 向已被访问的链接添加样式。 1
    :first-child 向元素的第一个子元素添加样式。 2
    :lang 向带有指定 lang 属性的元素添加样式。 2

  • 伪元素

    属性 描述 CSS
    :first-letter 向文本的第一个字母添加特殊样式。 1
    :first-line 向文本的首行添加特殊样式。 1
    :before 在元素之前添加内容。 2
    :after 在元素之后添加内容。 2

特殊CSS

对齐

  1. 使用 margin 属性来水平对齐

    把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素。

    margin-left:auto;
margin-right:auto;
如果宽度是 100%，则对齐没有效果

  2. 使用 position 属性进行左和右对齐

  3. 使用 float 属性来进行左和右对齐

CSS 尺寸属性

CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。

属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

分类属性 (Classification)

CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

属性 描述 取值
clear 设置一个元素的侧面是否允许其他的浮动元素。 left
right
none
inherit
both
cursor 规定当指向某元素之上时显示的指针类型。 Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
textwaithelp
display 设置是否及如何显示元素。 block
inline
float 定义元素在哪个方向浮动。 left
right
none
inherit
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 absolute
fixed
relative
static
inherit
visibility 设置元素是否可见或不可见。 visible
hidden
collapse
inherit

导航栏

  • list-style-type:none - 删除圆点。导航栏不需要列表项标记。
  • 把外边距和内边距设置为 0 可以去除浏览器的默认设定。
  • display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
  • display:inline; - 默认地，<li> 元素是块元素。在这里，我们去除了每个列表项前后的换行，以便让它们在一行中显示。

透明

img
{
opacity:0.4; /*opacity 属性能够设置的值从 0.0 到 1.0*/
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 filter:alpha(opacity=x)。x 能够取的值从 0 到 100*/
}

媒介类型

@media规则

@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。

@media screen /*在显示器上显示 14 像素的 Verdana 字体*/
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print /*使用 10 个像素的 Times 字体*/
{
p.test {font-family:times,serif; font-size:10px}
}

@media screen,print
{
p.test {font-weight:bold}
}

注释：媒介类型名称对大小写不敏感。

媒介类型 描述
all 用于所有的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示，比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv 用于电视机类型的设备。
posted @ 2019-01-01 21:10  枫子_dan  阅读(132)  评论(0)  编辑  收藏  举报