• CSS详解


    一.简介

      CSS 指层叠样式表 (Cascading Style Sheets),外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一

    二.CSS的引入方式

    • 行内式
    • 嵌入式
    • 导入式
    • 链接式
    <!--行内样式-->
    <h1 style="background-color: aqua;color: brown">JD</h1>
    行内式
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    <!--嵌入式-->
        <style>
    
            p{
                color: red;
                font-size: 14px;
            }
    
            .t{
                font-size: 20px;
                background-color: rosybrown;
            }
    
            a.t{
                font-size: 30px;
                color: darkblue;
            }
        </style>
    </head>
    <body>
        <p>Hello</p>
        <div class="t">
            Test
        </div>
        <a class="t">aaaaaaaa</a>
    </body>
    </html>
    嵌入式
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            @import "ex1.css";
        </style>
    </head>
    <body>
        <p>Hello</p>
    </body>
    </html>
    导入式
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--css模块导入-->
        <link href="ex1.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <p>Test</p>
    </body>
    </html>
    链接式

     当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

      一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

    1. 浏览器缺省设置
    2. 外部样式表
    3. 内部样式表(位于 <head> 标签内部)
    4. 内联样式(在 HTML 元素内部)

      因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)

    三.CSS选择器

    1.派生选择器

      通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁

      派生选择器允许你根据文档的上下文关系来确定某个标签的样式

    <!DOCTYPE html>
    <html lang="en">
    <!--派生选择器-->
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            li strong {
            font-style: italic;
            font-weight: normal;
          }
        </style>
    
    </head>
    <body>
        <p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>
    
        <ol>
            <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
            <li>我是正常的字体。</li>
        </ol>
    
    </body>
    </html>
    派生选择器

    2. 组合选择器

      E,F          多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔             Div,p { color:#f00; }

    2.1后代选择器

    后代选择器(descendant selector)又称为包含选择器。

    后代选择器可以选择作为某元素后代的元素

    例:如果您希望只对 div 元素中的 p 元素应用样式,可以这样写

    <!DOCTYPE html>
    <html lang="en">
    <!--后代选择器-->
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div p{
                font-weight: bold;
                font-size: 19px;
                
            }
        </style>
    </head>
    <body>
        <div>
            <p>Hello</p>
            <br>
            World!!!
        </div>
    </body>
    </html>
    后代选择器

    2.2子元素选择器

      与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素

      当不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)

    例:只想对div下的子div进行更改而非子元素下的div更改时

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            [test]{
                color: blueviolet;
            }
            .he>div{
                color: bisque;
            }
    
        </style>
    </head>
    <body>
    
    <div class="he">111
        <p class="fr">222
            <div>333</div>
        </p>
        <div>444</div>
    </div>
    子元素选择器

    2.3相邻兄弟选择器

      相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素

    选择相邻兄弟

    如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)

    例如:如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写

    h1 + p {margin-top:50px;}
    相邻兄弟选择器

    这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”

    相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)

    3.基础选择器

      * :                   通用元素选择器,匹配任何元素             * { margin:0; padding:0; }

      E  :                   标签选择器,匹配所有使用E标签的元素 p { color:green; }

      .info和E.info:        class选择器,匹配所有class属性中包含info的元素     .info { background:#ff0; }    p.info { background:blue; }

      #info和E#info       id选择器,匹配所有id属性等于footer的元素             #info { background:#ff0; }   p#info { background:#ff0; }

    注意嵌套规则

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
    2. 块级元素不能放在p里面
    3. 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
    4. li内可以包含div
    5. 块级元素与块级元素并列、内联元素与内联元素并列。(错误的:<div><h2></h2><span></span></div>)

    4.伪类  

    4.1锚伪类

    在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态

    a:link(没有接触过的链接),用于定义了链接的常规状态。

    a:hover(鼠标放在链接上的状态),用于产生视觉效果。

    a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。

    a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态

    例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            a {color:#000000;text-decoration:none;outline:none;}
            a:hover {color:#0000ff;text-decoration:underline;}
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com">百度</a>
    </body>
    </html>
    锚伪类

    5.属性选择器

    对带有指定属性的 HTML 元素设置样式

    可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性

    注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择

    下面的例子为带有 p 属性的所有元素设置样式

    [p]
    {
    color:red;
    }

    属性和值选择器 - 多个值

    下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值

    [title~=hello] { color:red; }

    下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
        [lang|=en]
        {
            color:red;
        }
    </style>
    </head>
    
    <body>
    <p lang="en">Hello!</p>
    <p lang="en-us">Hi!</p>
    <hr />

     四.CSS样式

    1.背景属性

    背景色

    可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值

    例:

    <!DOCTYPE html>
    <html lang="en">
    <!--CSS背景属性-->
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            body {background-color: gray}
            p {background-color: rgb(250,0,255)}
            p.no2 {background-color: palegoldenrod; padding: 20px;}
        </style>
    </head>
    <body>
        <p>这是段落</p>
        <p class="no2">这个段落设置了内边距。</p>
    </body>
    </html>
    背景色

     背景图像

    要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。

    如果需要设置一个背景图像,必须为这个属性设置一个 URL 值

    <!DOCTYPE html>
    <html lang="en">
    <!--css背景图片-->
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{margin: 0}
            p{background: url("mac.jpg");
                width: auto;
                height: 1000px;
            }
        </style>
    </head>
    <body>
        <p></p>
    </body>
    </html>
    背景图像

     背景重复

    如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。

    属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺

    例:

    <!DOCTYPE html>
    <html lang="en">
    <!--背景重复-->
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                background-image:
                url("a.png");
                background-repeat: repeat;
            }
        </style>
    </head>
    <body>
    
    </body>
    </html>
    背景重复

     背景定位

    可以利用 background-position 属性改变图像在背景中的位置。

    下面的例子在 body 元素中将一个背景图像居中放置

    body
      { 
        background-image:url('/i/eg_bg_03.gif');
        background-repeat:no-repeat;
        background-position:center;
      }
    View Code

    为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异

    下面是等价的位置关键字:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            body{
                background-image: url('a.png');
                background-repeat: no-repeat;
                background-attachment:fixed;
                background-position: 50px 100px;
            }
        </style>
    </head>
    <body>
    <p><b>注释:</b>为了在 Mozilla 中实现此效果,background-attachment 属性必须设置为 "fixed"。</p>
    </body>
    </html>
    使用像素设置背景属性

    CSS 背景属性

    2.文本属性

    CSS 文本属性可定义文本的外观。

    通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等

     缩进文本

    通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值

    例:

    <!DOCTYPE html>
    <html lang="en">
    <!--文本缩进-->
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p{
                text-indent: 5em;
                color: red;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
    <p>使用text-indent来实现文本缩进</p>
    </body>
    </html>
    文本缩进

     水平对齐

      text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式

      值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中

      例:

    <!DOCTYPE html>
    <html lang="en">
    <!--水平对齐-->
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p{
                text-align: center;
                color: red;
                font-weight: bold;
            }
            h1{
                text-align: right;
                color: blue;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
    <p>居中</p>
    <p>居中</p>
    <p>居中</p>
    <h1>居右</h1>
    <h1>居右</h1>
    </body>
    </html>
    水平对齐

     提示:将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现

     字间隔

    word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的

    word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近

    例:

    <!DOCTYPE html>
    <html lang="en">
    <!--文本字间距-->
    <head>
        <style type="text/css">
            p.spread {word-spacing: 30px;}
            p.tight {word-spacing: -0.5em;}
        </style>
    </head>
    
    <body>
        <p class="spread">This is some text. This is some text.</p>
        <p class="tight">This is some text. This is some text.</p>
    </body>
    
    </html>
    字间隔

     字符转换

      text-transform 属性处理文本的大小写

      

    3.文本装饰

    text-decoration 属性有 5 个值:

    • none
    • underline
    • overline
    • line-through
    • blink

    underline 会对元素加下划线,就像 HTML 中的 U 元素一样。overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁,类似于 Netscape 支持的颇招非议的 blink 标记

     例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p.down{
                text-decoration: underline;
            }
            p.up{
                text-decoration: overline;
            }
            p.line{
                text-decoration: line-through;
            }
            p.bk{
                text-decoration: blink;
            }
        </style>
    </head>
    <body>
        <p class="down">我是下划线</p>
        <p class="up">我是上划线</p>
        <p class="line">我是贯穿线</p>
        <p class="bk">我会闪烁</p>
    </body>
    </html>
    文本属性

      CSS 文本属性

    4.字体属性

      CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)

      使用 font-family 属性 定义文本的字体系列

      font-style 属性最常用于规定斜体文本

      

    例:

    <!DOCTYPE html>
    <html lang="en">
    <!--字体属性-->
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p{
                font-size: 25px;
                font-weight: bold;
                font-family: sans-serif;
                font-style: inherit;
            }
        </style>
    </head>
    <body>
        <p>字体样式</p>
    </body>
    </html>
    字体属性

    5.链接属性

    设置链接的样式

    能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。

    链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

    链接的四种状态:

    • a:link - 普通的、未被访问的链接
    • a:visited - 用户已访问的链接
    • a:hover - 鼠标指针位于链接的上方
    • a:active - 链接被点击的时刻
    a:link {color:#FF0000;}        /* 未被访问的链接 */
    a:visited {color:#00FF00;}    /* 已被访问的链接 */
    a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
    a:active {color:#0000FF;}    /* 正在被点击的链接 */

    当为链接的不同状态设置样式时,请按照以下次序规则:

    • a:hover 必须位于 a:link 和 a:visited 之后
    • a:active 必须位于 a:hover 之后

    例:

    <!DOCTYPE html>
    <html lang="en">
    <!--导航栏-->
    <head>
        <meta charset="UTF-8">
        <title>鲜果园</title>
        <style>
            @import "init_demo.css";
            .u1{}
            li{
                float:left;
            }
            a:link,a:visited{
                display:block;
                width:120px;
                font-weight:bold;
                color:#FFFFFF;
                background-color:cornflowerblue;
                text-align:center;
                padding:4px;
                text-decoration:none;
                text-transform:uppercase;
            }
            a:hover,a:active{
                background-color:#bebebe;
            }
    
        </style>
    </head>
    <body>
    <!--商城顶部-->
        <div>
            <ul>
                <li><a href="">八方资源网首页</a></li>
                <li><a href="">登录</a></li>
                <li><a href="">免费注册</a></li>
                <li><a href="">我的八方</a></li>
                <li><a href="">帮助</a></li>
                <li><a href="">投诉举报</a></li>
            </ul>
        </div>
    <!--商城中部-->
    
    </body>
    </html>
    导航栏

    6.列表属性

      要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型

    列表属性

    例:

    <html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            ul.none {list-style-type: none}
            ul.disc {list-style-type: disc}
            ul.circle {list-style-type: circle}
            ul.square {list-style-type: square}
            ul.decimal {list-style-type: decimal}
            ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
            ul.lower-roman {list-style-type: lower-roman}
            ul.upper-roman {list-style-type: upper-roman}
            ul.lower-alpha {list-style-type: lower-alpha}
            ul.upper-alpha {list-style-type: upper-alpha}
            ul.lower-greek {list-style-type: lower-greek}
            ul.lower-latin {list-style-type: lower-latin}
            ul.upper-latin {list-style-type: upper-latin}
            ul.hebrew {list-style-type: hebrew}
            ul.armenian {list-style-type: armenian}
            ul.georgian {list-style-type: georgian}
            ul.cjk-ideographic {list-style-type: cjk-ideographic}
            ul.hiragana {list-style-type: hiragana}
            ul.katakana {list-style-type: katakana}
            ul.hiragana-iroha {list-style-type: hiragana-iroha}
            ul.katakana-iroha {list-style-type: katakana-iroha}
        </style>
    </head>
    
    <body>
    <ul class="none">
    <li>"none" 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="disc">
    <li>Disc 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="circle">
    <li>Circle 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="square">
    <li>Square 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="decimal">
    <li>Decimal 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="decimal-leading-zero">
    <li>Decimal-leading-zero 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="lower-roman">
    <li>Lower-roman 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="upper-roman">
    <li>Upper-roman 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="lower-alpha">
    <li>Lower-alpha 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="upper-alpha">
    <li>Upper-alpha 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="lower-greek">
    <li>Lower-greek 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="lower-latin">
    <li>Lower-latin 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="upper-latin">
    <li>Upper-latin 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="hebrew">
    <li>Hebrew 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="armenian">
    <li>Armenian 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="georgian">
    <li>Georgian 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="cjk-ideographic">
    <li>Cjk-ideographic 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="hiragana">
    <li>Hiragana 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="katakana">
    <li>Katakana 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="hiragana-iroha">
    <li>Hiragana-iroha 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    <ul class="katakana-iroha">
    <li>Katakana-iroha 类型</li>
    <li></li>
    <li>可口可乐</li>
    </ul>
    
    </body>
    </html>
    列表属性

    7. dispaly属性

    • none
    • block
    • inline

    8.边框属性

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

    CSS outline 属性规定元素轮廓的样式、颜色和宽度

    例:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
    p
    {
    border: red solid thin;
    }
    p.dotted {outline-style: dotted}
    p.dashed {outline-style: dashed}
    p.solid {outline-style: solid}
    p.double {outline-style: double}
    p.groove {outline-style: groove}
    p.ridge {outline-style: ridge}
    p.inset {outline-style: inset}
    p.outset {outline-style: outset}
    </style>
    </head>
    <body>
    
    <p class="dotted">A dotted outline</p>
    <p class="dashed">A dashed outline</p>
    <p class="solid">A solid outline</p>
    <p class="double">A double outline</p>
    <p class="groove">A groove outline</p>
    <p class="ridge">A ridge outline</p>
    <p class="inset">An inset outline</p>
    <p class="outset">An outset outline</p>
    
    <p><b>注释:</b>只有在规定了 !DOCTYPE 时,Internet Explorer 8 (以及更高版本) 才支持 outline-style 属性。</p>
    </body>
    </html>
    View Code

    9.盒子模型

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

      padding:用于控制内容与边框之间的距离;

          margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的

    术语翻译

    • element : 元素。
    • padding : 内边距,也有资料将其翻译为填充。
    • border : 边框。
    • margin : 外边距,也有资料将其翻译为空白或空白边

    <!DOCTYPE html>
    <html lang="en">
    <!--外边距-->
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                margin: 12px auto;
                background-color: #2459a2;
                width: 980px;
                height: 100px;
            }
            div p{
                margin: 100px;
                background-color: #bebebe;
                width: 100px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div>
            <p></p>
        </div>
    </body>
    </html>
    外边距
    <html>
    <head>
        <style type="text/css">
            td{
            padding-top: 10%
            }
        </style>
    </head>
    <body>
    
    <table border="1">
    <tr>
        <td>
            这个表格单元拥有上内边距。
        </td>
    </tr>
    </table>
    
    </body>
    </html>
    内边距
    <html>
    <head>
    
    <style type="text/css">
    p.one
    {
    border-style: solid;
    border-color: #0000ff
    }
    p.two
    {
    border-style: solid;
    border-color: #ff0000 #0000ff
    }
    p.three
    {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff
    }
    p.four
    {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
    }
    </style>
    
    </head>
    
    <body>
    
    <p class="one">One-colored border!</p>
    
    <p class="two">Two-colored border!</p>
    
    <p class="three">Three-colored border!</p>
    
    <p class="four">Four-colored border!</p>
    
    <p><b>注释:</b>"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
    
    </body>
    </html>
    边框

    边框属性

    CSS 内边距属性

    外边距属性

    注意一.

    边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器的窗口的边框,这是因为body本身也是一个盒子(外层还有html),在默认情况下,              body距离html会有若干像素的margin,具体数值因各个浏览器不尽相同,所以body中的盒子不会紧贴浏览器窗口的边框了

    注意二.边界塌陷或者说边界重叠

    外边距的重叠只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。设想,当我们上下排列一系列规则的块级元素(如段             落P)时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离

    五.css浮动

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

    由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的

    浮动可以使元素脱离文档流

                 

    在 CSS 中,我们通过 float 属性实现元素的浮动。

    例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .div1{
                width: 100px;
                height: 100px;
                background-color: #bebebe;
                float: left;
            }
            .div2{
                width: 100px;
                height: 100px;
                background-color: bisque;
                float: left;
            }
        </style>
    
    </head>
    <body>
        <div class="div1">
            Hello
        </div>
        <div class="div2">
            World
        </div>
    </body>
    </html>
     浮动

    行框和清理

    浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。

    因此,创建浮动框可以使文本围绕图像:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .div1{
                width: 100px;
                height: 100px;
                background-color: #bebebe;
                float: left;
            }
            .div2{
                width: 100px;
                height: 100px;
                background-color: bisque;
                float: left;
            }
        </style>
    
    </head>
    <body>
        <div class="div1">
            Hello
        </div>
    
        <div class="div2">
            World
        </div>
        <p>
            浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。因此,创建浮动框可以使文本围绕图像
        </p>
    </body>
    </html>
    View Code

    要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。

    为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .div1{
                width: 100px;
                height: 100px;
                background-color: #bebebe;
                float: left;
            }
            .div2{
                width: 100px;
                height: 100px;
                background-color: bisque;
                float: left;
            }
            .clean{
                clear: both;
            }
        </style>
    
    </head>
    <body>
        <div class="div1">
            Hello
        </div>
    
        <div class="div2">
            World
        </div>
        <p class="clean">
            浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。因此,创建浮动框可以使文本围绕图像
        </p>
    </body>
    </html>
    清除浮动

    六.CSS定位

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

     CSS 定位机制

    CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

    除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

    块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

    行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度

      CSS position 属性

    position 属性值的含义:

    static
    元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
    relative
    元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
    absolute
    元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
    fixed
    元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
    <html>
    <head>
    <style type="text/css">
    h2.pos_left
    {
    position:relative;
    left:-20px
    }
    h2.pos_right
    {
    position:relative;
    left:20px
    }
    </style>
    </head>
    
    <body>
    <h2>这是位于正常位置的标题</h2>
    <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
    <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
    <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
    <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
    <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
    相对定位
    <html>
    <head>
    <style type="text/css">
    h2.pos_abs
    {
    position:absolute;
    left:100px;
    top:150px
    }
    </style>
    </head>
    
    <body>
    <h2 class="pos_abs">这是带有绝对定位的标题</h2>
    <p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。</p>
    </body>
    
    </html>
     绝对定位
    <html>
    <head>
    <style type="text/css">
    p.one
    {
    position:fixed;
    left:5px;
    top:5px;
    }
    p.two
    {
    position:fixed;
    top:30px;
    right:5px;
    }
    </style>
    </head>
    <body>
    
    <p class="one">一些文本。</p>
    <p class="two">更多的文本。</p>
    
    </body>
    </html>
    固定定位
  • 相关阅读:
    java web的安全约束--表单的验证
    Java web的安全约束--Basic验证
    setExecuteExistingDelayedTasksAfterShutdownPolicy方法与setContinueExistingPeriodicTasksAfterShutdownPolicy方法的比较
    关于scheduleAtFixedRate方法与scheduleWithFixedDelay的使用
    ExecutorService的invokeAny方法
    CompletionService的异常处理
    CompletionService的poll方法
    include指令
    向jsp页面传值时出现乱码
    new home page
  • 原文地址:https://www.cnblogs.com/jl-bai/p/5627969.html
Copyright © 2020-2023  润新知