一只狗的使命

进步止于自我满足!

Css学习

CSS概述

css概述

什么叫css

层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 
        CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
又叫级联样式表,简称样式表

作用

  • 用于HTML文档中元素样式定义
    - 实现将内容与表现分离
    - 提高代码的可重用性和可维护性
  • HTML 的初衷是表达信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。由于各的浏览器(Netscape 和 IE)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
    为了解决这个问题,万维网联盟(W3C)在 HTML 4.0 之外创造出样式(Style)。所有的主流浏览器均支持层叠样式表。
  • 样式表极大地提高了工作效率

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

---------------------------------------------------

使用CSS样式表

使用CSS样式表

  • 内联样式表
    - 样式定义在当个HTML元素中
  • 内部样式表
    - 样式定义在HTML页的头元素中
  • 外部样式表
    - 将样式定义在一个外部的css文件中(.css文件)
    - 由HTML页面引用样式表文件

内联方式使用CSS

  • 样式定义在 HTML 元素的标准属性style中
  • CSS语法
    - 用分号分隔的一或者多个 属性/值 对作为元素的 style属性的值
    - 属性/值 之间用 :连接
    - 多个属性之间用 ;分隔

内部样式表

  • 位于文档头元素中的<style>元素内
    - 可以定义多个样式表
    - 样式由两个部分:选择器 样式声明
  • 选择器:    决定哪些元素使用这些规则
  • 样式声明:    一对大括号{} 包含一个或多个属性/值 对
<head>
    <style type="text/css">
        body {background-color: yellow}
        p {background-color: rgb(250,0,255)}
    </style>
</head>

外部样式表

  • 可以实现内容与表现分离
  • 可以被站点内所有页面重用
  • 外部样式表文件
    - .css后缀的纯文本文件
    - 该文件只能包含样式规则
    - 样式规则由 选择器和样式声明组成
    - 使用:
<head>
    <link rel="stylesheet" type="text/css" herf="URL">
</head>

---------------------------------------------------

CSS语法

css语法规范

  • CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
    selector {declaration1; declaration2; ... declarationN }

css样式表特征

  • 继承性:    绝大多数样式规则可以被继承
    - 继承及其问题:
    根据 CSS,子元素从父元素继承属性。但是它并不总是按此方式工作。大部分的现代浏览器中,继承是正常工作的。
    但是在那个浏览器大战的血腥年代里,这种情况就未必会发生,那时候对标准的支持并不是企业的优先选择。比方说,Netscape 4 就不支持继承,IE/Windows 直到 IE6 还存在相关的问题,在表格内的字体样式会被忽略。
    - 解决:
    可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题
<!--4.0 浏览器这些属性将不会被继承-->
body  {
     font-family: Verdana, sans-serif;
     }
<!--4.0 浏览器无法理解继承,不过他们可以理解组选择器-->
<!--这么做虽然会浪费一些用户的带宽,但是如果需要对 Netscape 4 用户进行支持,就不得不这么做-->
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
  • 层叠性
    - 可以定义多个样式表
    - 不冲突时 对个样式表中的样式可以层叠为一个
  • 优先级
    - 样式定义冲突时,按照不同样式规则优先级来应用样式

样式优先级

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 HTML 元素内部)

---------------------------------------------------

CSS 选择器

元素选择器

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

类选择器

类选择器以一个点号显示

  • 类名第一个字符不能使用数字
  • 类选择器以一种独立于文档元素的方式来指定样式
    语法:    .className{属性:属性值}
  • 所有能附带class属性的元素都可用类选择器
  • 元素选择器可以结合类选择器,实现对元素样式的细分(派生)
    .className 元素【空格分隔】
    元素.class 【无空格:类为class的元素】区别    元素 .class
<!--类选择器-->
.center {text-align: center}
<!--派生选择器-->
.fancy td {
	color: #f60;
	background: #666;
	}
td.fancy {
	color: #f60;
	background: #666;
	}

Id选择器

id 选择器以 "#" 来定义

  • id 属性只能在每个 HTML 文档中出现一次。
    id 的作用就是唯一标识元素, id 在html 中出现多次也不会报错, 但是使用 javascript 访问id 时就会有问题了
  • Id选择器以一种独立于文档元素的方式来指定样式(示例中派生使用【利用继承】)
  • 同类选择器,Id选择器也支持派生选择器
<!--sidebar 内的 p 元素得到了特殊的处理,sidebar 中的 h2 元素也得到了不同的特殊处理。-->
#sidebar p {
	font-style: italic;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	}

属性选择器

  • 对带有指定属性的 HTML 元素设置样式。
  • 可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
    注:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
  • 语法:    [属性]{样式}
选择器描述
[attribute]用于选取带有指定属性的元素。
[attribute=value]用于选取带有指定属性和值的元素。
[attribute~=value]用于选取属性值中包含指定词汇的元素。
[attribute|=value]用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value]匹配属性值以指定值开头的每个元素。
[attribute$=value]匹配属性值以指定值结尾的每个元素。
[attribute*=value]匹配属性值中包含指定值的每个元素。
例:
<!--属性和值选择器 - 多个值-->
<!--下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值-->
[title~=hello] { color:red; }

<!--下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值-->
[lang|=en] { color:red; }

选择器分组

逗号分隔的选择器列表

  • 通过分组,创作者可以将某些类型的样式“压缩”在一起,这样就可以得到更简洁的样式表。
  • 通配选择器 *
<!--使文档中的每个元素都为红色:-->
* {color:red;}
  • 声明分组
    我们既可以对选择器进行分组,也可以对声明分组
    <!--将声明分组在一起:-->
    h1 {font: 28px Verdana; color: white; background: black;}
    <!等效于>
    h1 {font: 28px Verdana;}
    h1 {color: blue;}
    h1 {background: red;}
    注意:对声明分组,一定要在各个声明的最后使用分号,这很重要。浏览器会忽略样式表中的空白符。只要加了分号,就可以毫无顾忌地采用以下格式建立样式
    h1 {
      font: 28px Verdana;
      color: blue;
      background: red;
      }
    <!--如果忽略了第二个分号,用户代理就会把这个样式表解释如下-->
    h1 {
      font: 28px Verdana;
      color: blue background: red;
      }
  • 选择器分组可以与声明分组结合

派生选择器

通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
在 CSS1 中,称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。
在 CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。

通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。

后代选择器

后代选择器(descendant selector)又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
语法:    在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”
<!--只对 h1 元素中的 em 元素应用样式-->
h1 em {color:red;}

子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
选择子元素:    如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素
语法:子选择器使用了大于号(子结合符)子结合符两边可以有空白符,这是可选的。
<!--选择作为 h1 元素子元素的所有 strong 元素-->
h1 > strong {color:red;}
结合后代选择器和子选择器
<!--上面的选择器会选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从 table 元素继承-->
<!--该 table 元素有一个包含 company 的 class 属性。-->
table.company td > p

相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
选择相邻兄弟:    如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器
例:    如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
<!--选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素-->
h1 + p {margin-top:50px;}
语法:     相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。
注释:    与子结合符一样,相邻兄弟结合符旁边可以有空白符。
相邻兄弟结合符还可以结合其他结合符:
<!--这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素-->
<!--该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。-->
html > body table + ul {margin-top:20px;}

伪类选择器

  • 语法    selector : pseudo-class {property: value}
  • CSS2 xx:first-child 伪类
    解释:    作为某元素的第一个子元素 xx
    例:1.    p:first-child  匹配第一个 <p> 元素  匹配作为任何元素的第一个子元素的 p 元素
                <body>
                    <p>some text</p>
                    <p>some text</p>
                </body>
           2.    p > i:first-child    匹配所有 <p> 元素中的第一个 <i> 元素
                <p>some <i>text</i>. some <i>text</i>.</p>
                <p>some <i>text</i>. some <i>text</i>.</p>

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

伪元素

  • 语法:    selector:pseudo-element {property:value;}
  • CSS 类也可以与伪元素配合使用:
    selector.class:pseudo-element {property:value;}
  • 属性描述 
    :first-letter向文本的第一个字母添加特殊样式。1
    :first-line向文本的首行添加特殊样式。1
    :before在元素之前添加内容。2
    :after在元素之后添加内容。2

---------------------------------------------------

尺寸与框模型

尺寸与边框

样式单位

  • 百分比%
  • 英寸     in
  • 厘米    cm
  • 毫米    mm
  • 磅    pt(1pt=1/72英寸)
  • 像素    px(计算机屏幕的一个点)
  • 字体的尺寸    em
  • 颜色RGB 值    rgb(x,x,x)    十进制[x 0~255]
                         rgb(x%.x%.x%)    百分比
                         #rrggbb    十六进制
                         #rgb    简写十六进制
        英文单词 red

尺寸

  • width    height
  • overflow    内容溢出元素框处理
    描述
    visible默认值。内容不会被修剪,会呈现在元素框之外。
    hidden内容会被修剪,并且其余内容是不可见的。
    scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    inherit规定应该从父元素继承 overflow 属性的值。

边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。

  • 简写方式:border:width style color
  • 单边定义:border-top/right/bottom/left:width style color
  • 单属性定义:border-width/style/color
                    border-top/right/bottom/left-width/style/color
  • 属性描述
    border简写属性,用于把针对四个边的属性设置在一个声明。
    border-style用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
    border-width简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
    border-color简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
    border-bottom简写属性,用于把下边框的所有属性设置到一个声明中。
    border-bottom-color设置元素的下边框的颜色。
    border-bottom-style设置元素的下边框的样式。
    border-bottom-width设置元素的下边框的宽度。
    border-left简写属性,用于把左边框的所有属性设置到一个声明中。
    border-left-color设置元素的左边框的颜色。
    border-left-style设置元素的左边框的样式。
    border-left-width设置元素的左边框的宽度。
    border-right简写属性,用于把右边框的所有属性设置到一个声明中。
    border-right-color设置元素的右边框的颜色。
    border-right-style设置元素的右边框的样式。
    border-right-width设置元素的右边框的宽度。
    border-top简写属性,用于把上边框的所有属性设置到一个声明中。
    border-top-color设置元素的上边框的颜色。
    border-top-style设置元素的上边框的样式。
    border-top-width设置元素的上边框的宽度。

框模型

概述

属性

  • element : 元素。
    padding : 内边距,也有资料将其翻译为填充。
    border : 边框。
    margin : 外边距,也有资料将其翻译为空白或空白边。
  • width 和 height 指的是内容区域的宽度和高度。
    增加内边距、边框和外边距不会影响内容区域的尺寸,
    但是会增加元素框的总尺寸。

内边距 padding

  • 内容与框线之间的距离
  • 简写方式:    padding:top right bottom left padding:10px 10px 10px 10px
                        padding:top、bottom  right、left padding:10px 10px
                        padding:top、right、bottom、left padding:10px
  • 单边设置:    padding-top/right/bottom/left
  • value:        1.数值 px    
                     2.百分比    百分数值是相对于其父元素的 width 计算的

外边距

  • 与下一个元素之间的空间值
  • 简写方式:    margin:top right bottom left         margin:10px 10px 10px 10px
                        margin:top、bottom  right、left     margin:10px 10px
                        margin:top、right、bottom、left     margin:10px
  • 单边设置:    margin-top/right/bottom/left
  • margin可取值 auto 由浏览器计算外边距

外边距合并

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

合并条件:没有边框或填充(父元素)

合并情况:

  1. 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并

  2. 当一个元素包含在另一个元素中时(没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并

  3. 空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起

    如果这个外边距遇到另一个元素的外边距,它还会发生合并

---------------------------------------------------

背景

背景色

  • 使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值
  • 可以为所有元素设置背景色,这包括 body 一直到 em 和 a 等行内元素

背景图像

  • 使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像
  • 需要设置一个背景图像,必须为这个属性设置一个 URL 值
    selector {background-image: url(/i/eg_bg_03.gif); padding: 20px;}
  • 背景重复    使用 background-repeat 属性
    描述
    repeat默认。背景图像将在垂直方向和水平方向重复。
    repeat-x背景图像将在水平方向重复。
    repeat-y背景图像将在垂直方向重复。
    no-repeat背景图像将仅显示一次。
    inherit规定应该从父元素继承 background-repeat 属性的设置。
<html>
    <head>
        <style type="text/css">
            body{ 
                background-image: 
                url(/i/eg_bg_03.gif);
                background-repeat: repeat-y
               }
        </style>
    </head>
    <body>
    </body>
</html>
  • 背景定位    background-position 属性改变图像在背景中的位置
body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }
单一关键字等价的关键字
centercenter center
toptop center 或 center top
bottombottom center 或 center bottom
rightright center 或 center right
leftleft center 或 center left
x% y%                              水平 垂直位置百分比 0%0%(左下角) 100% 100%(右下角)
x y水平垂直位置绝对长度 0 0(左下角)

  • 背景固定    background-attachment 属性
    描述
    scroll默认值。背景图像会随着页面其余部分的滚动而移动。
    fixed当页面的其余部分滚动时,背景图像不会移动。
    inherit规定应该从父元素继承 background-attachment 属性的设置。
    ---------------------------------------------------

文本格式化

控制字体

属性描述
font简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family设置字体系列。
font-size设置字体的尺寸。
font-style设置字体风格。             italic 斜体/oblique 倾斜/inherit 继承/normal 默认值
font-variant以小型大写字体或者正常字体显示文本。
font-weight设置字体的粗细。

控制文本格式

属性描述
color  设置文本颜色        value
direction

设置文本方向。        ltr 默认从左到

        rtl 从右到左

        inherit 继承

line-height

设置行高。    百分比(1-100%

        像素(px)/数值(0-1)

letter-spacing

设置字符间距。     normal 默认 没有额外的空间

        length 定义字符间的固定空间(允许负值)

        inherit

text-align对齐元素中的文本。    left/right/center/justify 两端对齐/inherit
text-decoration

向文本添加修饰。    none 默认

        underline 下的一条线

        overline 上的一条线

        line-through 穿过文本下的一条线/

        blink 闪烁的文本

        inherit 继承

text-indent缩进元素中文本的首行。 length/%/inherit
text-shadow设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform

控制元素中的字母。none 默认

        capitalize 大写字母开头

        uppercase 仅有大写字母

        lowercase 仅有小写字母

        inherit 继承

unicode-bidi设置文本方向。
white-space

设置元素中空白的处理方式。normal 默认。空白会被浏览器忽略

        pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签

        nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止

        pre-wrap 保留空白符序列,但是正常地进行换行

        pre-line 合并空白符序列,但是保留换行符

        inherit 继承

word-spacing设置字间距。(单词间)    normal/length/inherit
---------------------------------------------------

表格样式

常用属性

  • 边距(内边距)    padding    td 和 th 元素
  • 尺寸    width 和 height 属性定义表格/单元格的宽度和高度    table th td
  • 文本格式化
  • 背景
  • border

对齐方式

text-align 和 vertical-align 属性设置表格中文本的对齐方式。

  • text-align    水平对齐方式    left right    center
  • vertical-align     垂直对齐方式    top    middle    bottom

边框合并

也叫折叠边框    border-collapse 属性设置是否将表格边框折叠为单一边框

描述
separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit规定应该从父元素继承 border-collapse 属性的值。

边框边距

  • border-spacing
    - 设置分隔单元格边框的距离
    - 仅限于分隔单元边框 【边框分离模式】(border-collapse为separate情况
  • 取值:    长度
    -一个值:    同事作用于水平垂直距离
    - 两个值:    水平 垂直
table
  {
  border-collapse:separate;
  border-spacing:10px 50px;
  }

其他属性

属性描述
border-collapse设置是否把表格边框合并为单一的边框。
border-spacing设置分隔单元格边框的距离。
caption-side设置表格标题的位置。<caption>    top/bottom/inherit
empty-cells设置是否显示表格中的空单元格。    hide/show/inherit
table-layout设置显示单元、行和列的算法        autopmatic 默认 由单元格内容设定、fixed 由表格宽度列宽设定、inherit

---------------------------------------------------

定位

概念

定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

显示方式

一切皆为框

  • 块框:    div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容
  • 行内框:    span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中
  • 无名块框:    但是在一种情况下,即使没有进行显式定义,也会创建块级元素。
    - 把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。

    - 块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式,因为没有可以应用样式的地方(注意,行框和行内框是两个概念)

  • 改变生成的框的类型:     display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。
              display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。

display 属性

描述
none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block行内块元素。(CSS2.1 新增的值)
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
table此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row此元素会作为一个表格行显示(类似 <tr>)。
table-column-group此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column此元素会作为一个单元格列显示(类似 <col>)
table-cell此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption此元素会作为一个表格标题显示(类似 <caption>)
inherit规定应该从父元素继承 display 属性的值。

CSS 定位机制

  • CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
  • 除非专门指定,否则所有框都在普通流中定位。
  • 普通流定位: - 普通流中的元素的位置由元素在 (X)HTML 中的位置决定
                        - 块级框从上到下一个接一个地排列:    
                                1.每个块级元素出现在一个新行中     2.框之间的垂直距离是由框的垂直外边距计算出来
                        - 行内框在一行中水平布置
                                1. 可以使用水平内边距、边框和外边距调整它们的间距
                                2.垂直内边距、边框和外边距不影响行内框的高度。
    由一行形成的水平框称为行框Line Box)行框的高度总是足以容纳它包含的所有行内框。设置行高可以增加这个框的高度。

浮动定位

定义

  • 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止
  • 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样
    - 元素排除在普通流之外
    - 浮动元素放于包含框的左边或者右边
    - 浮动元素依然位于包含框内

浮动情况

    不浮动的框

    

    

1.当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘
2.当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
3.所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框
4.如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。
5.如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:

float 属性

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

clear属

  • 清楚浮动带来的影响
  • 值    定义那边不允许出现浮动元素(只对有浮动属性的元素产生影响)
    描述
    left在左侧不允许浮动元素。
    right在右侧不允许浮动元素。
    both在左右两侧均不允许浮动元素。
    none默认值。允许浮动元素出现在两侧。
    inherit规定应该从父元素继承 clear 属性的值。
  • 行框和清理
    阻止行框围绕浮动框
        1.该浮动框框应用 clear 属性,对行框元素设置浮动属性
        2.该行框元素应用 clear 属性
        3.行框元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:

position

position 属性规定元素的定位类型。

描述
absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit规定应该从父元素继承 position 属性的值。

固定定位    fixed

相对于浏览器窗口来对元素进行定位。
类似于将 position 设置为 absolute,不过其包含块是视窗本身。

绝对定位    absolute

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

:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。通过设置 z-index 属性来控制这些框的堆放次序。

相对定位    relative

它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
  • 设置为相对定位的元素框会偏移某个距离。
  • 元素仍然保持其未定位前的形状
  • 原本所占的空间仍保留。

堆叠顺序

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

描述
auto默认。堆叠顺序与父元素相等。
number设置元素的堆叠顺序。
inherit规定应该从父元素继承 z-index 属性的值。

---------------------------------------------------

光标

默认光标

  • 悬停在链接上:    指针-->手
  • 悬停在文本区域:    显示 I
  • 悬停在按钮上:    显示箭头

设置鼠标光标形状

描述
url

需使用的自定义光标的 URL。

注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

default默认光标(通常是一个箭头)
auto默认。浏览器设置的光标。
crosshair光标呈现为十字线。
pointer光标呈现为指示链接的指针(一只手)
move此光标指示某对象可被移动。
e-resize此光标指示矩形框的边缘可被向右(东)移动。
ne-resize此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize此光标指示矩形框的边缘可被向上(北)移动。
se-resize此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize此光标指示矩形框的边缘可被向下移动(南)。
w-resize此光标指示矩形框的边缘可被向左移动(西)。
text此光标指示文本。
wait此光标指示程序正忙(通常是一只表或沙漏)。
help此光标指示可用的帮助(通常是一个问号或一个气球)。

---------------------------------------------------

列表样式

  • list-style 在一个声明中设置所有的列表属性。
  • list-style-image 将图象设置为列表项标记。
  • list-style-position 设置列表项标记的放置位置。
  • list-style-type 设置列表项标记的类型。

list-style

描述
list-style-type设置列表项标记的类型。参阅:list-style-type 中可能的值。
list-style-position设置在何处放置列表项标记。参阅:list-style-position 中可能的值。
list-style-image使用图像来替换列表项的标记。参阅:list-style-image 中可能的值。
inherit规定应该从父元素继承 list-style 属性的值。

list-style-image

描述
URL图像的路径。
none默认。无图形被显示。
inherit规定应该从父元素继承 list-style-image 属性的值。

list-style-position

描述
inside列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
inherit规定应该从父元素继承 list-style-position 属性的值。

list-style-type

描述
none无标记。
disc默认。标记是实心圆。
circle标记是空心圆。
square标记是实心方块。
decimal标记是数字。
decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)
lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek小写希腊字母(alpha, beta, gamma, 等。)
lower-latin小写拉丁字母(a, b, c, d, e, 等。)
upper-latin大写拉丁字母(A, B, C, D, E, 等。)
hebrew传统的希伯来编号方式
armenian传统的亚美尼亚编号方式
georgian传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic简单的表意数字
hiragana标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/z1154547466/article/details/79965582
文章标签: css
个人分类: css 待整理
上一篇Html学习
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭