CSS 显示定位浮动对齐元素

CSS 显示

img.normal
{
    height:auto;
}
img.big
{
    height:120px;
}
p.ex
{
    height:100px;
    width:100px;
}

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>
<p>这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本.</p>
</body>

如何隐藏一个元素(visibility:hidden)

h1.hidden {visibility:hidden;}

<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题仍然占用空间。</p>
</body>

如何不显示元素(display: none)

h1.hidden {display:none;}

<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题不占用空间。</p>
</body>

如何显示一个元素的内联元素

p {display:inline;}

<body>
<p>display 属性的值为 "inline"的结果</p>
<p>两个元素显示在同一水平线上。</p>
</body>

如何显示一个元素的块元素

span {display: block;}

<body>
    <span>display 属性值为 "block" 的结果</span>
    <span>这两个元素之间的换行符。</span>
</body>

如何使用表格的collapse属性

table, th, td {
    border: 1px solid black;
}

tr.collapse {
    visibility: collapse;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr class="collapse">
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

CSS定位

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

<body>

<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>

元素的相对定位

h2.left {
    position: relative;
    left: -20px;
}
h2.right {
    position: relative;
    left: 20px;
}

<body>
    <h2>这是位于正常位置的标题</h2>
    <h2 class="left">这个标题相对于其正常位置向左移动</h2>
    <h2 class="right">这个标题相对于其正常位置向右移动</h2>
    <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
    <P>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</P>
    <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

元素的绝对定位

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

重叠的元素

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

<body>
    <img src="fun.jpg" wdith="100px" height="100px">
    <h1>This is a heading</h1>
    <p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>

设置元素的形状

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px); /* 截取图片，使用这个时，必须设置position:absolute;*/
}

<body>
    <img src="fun.jpg" wdith="100px" height="100px">
</body>

如何使用滚动条来显示元素内溢出的内容

div.ex1 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: scroll;
}

div.ex2 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: hidden;
}

div.ex3 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: auto;
}

div.ex4 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: visible;
}

<body>
<h1>overflow 属性</h1>

<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<h2>overflow: scroll:</h2>
<div class="ex1">学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！</div>

<h2>overflow: hidden:</h2>
<div class="ex2">学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！</div>

<h2>overflow: auto:</h2>
<div class="ex3">学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！</div>

<h2>overflow: visible (默认):</h2>
<div class="ex4">学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！</div>
</body>

如何设置浏览器自动溢出处理

div
{
    background-color:#00FFFF;
    width:150px;
    height:150px;
    overflow:auto;
}

<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。</p>

<div>
当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。
</div>
</body>

更改光标

<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>

CSS浮动

为图像添加边框和边距并浮动到段落左侧

img
{
    float:right;
    border:1px dotted black;
    margin:0px 0px 15px 20px;
}

<body>
<p>
    在下面的段落中,图像将向右浮动。黑色虚线边界添加到图像。
我们还添加了边缘的0 px的顶部和右侧 margin,15 px底部margin,和20 px左侧的margin的图像。使得文本远离图片:</p>
<p>
<img src="logocss.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

标题和图片向右侧浮动

div
{
    float:right;
    width:120px;
    margin:0 0 15px 20px;
    padding:15px;
    border:1px solid black;
    text-align:center;
}

<body>
<div>
<img src="logocss.gif" width="95" height="84" /><br>
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
    在上面的段落中,div元素是120像素宽,它包含了图像。
    div元素会向右浮动。
    Margins 被添加到div使得文本远离div。
    Borders和padding被添加到div框架的图片和标题中
</p>
</body>

让段落的第一个字母浮动到左侧

span
{
    float:left;
    width:1.2em;
    font-size:400%;
    font-family:algerian,courier;
    line-height:80%;
}

<body>
<p>
<span>这</span>是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>

<p>
在上面的段落中, 第一个字嵌入在span 元素中。
这个 span 元素的宽度是当前字体大小的1.2倍。
这个 span 元素是当前字体的400%(相当大)， line-height 为80%。
文字的字体为"Algerian"。
</p>

</body>

使用floal属性创建一个图片廊

.thumbnail {
    float: left;
    width: 110px;
    height: 100px;
    margin: 5px;
}

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>

开启float-clear属性

.thumbnail
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
.text_line
{
    clear:both;
    margin-bottom:2px;
}

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>

创建一个水平菜单

ul {
    float: left;
    width: 100%;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
li {
    display: inline;
}
a {
    float: left;
    color: white;
    background-color: darkorchid;
    text-decoration:none;
    padding: 0.2em 0.6em;
    width: 6em;
    border-right: 1px solid white;
 }
a:hover {
    background-color: red;
}

<body>
    <ul>
        <li><a href="#">Link one</a></li>
        <li><a href="#">Link two</a></li>
        <li><a href="#">Link three</a></li>
        <li><a href="#">Link four</a></li>
    </ul>
<p>
    上面的示例中,我们让ul元素和元素浮动。
    li元素将显示为内联元素(没有换行符的元素之前或之后)。这迫使列表为一行。
    ul元素的宽度的100%,每一个超链接列表的宽度6 em(当前字体大小的6倍)。
    我们添加一些颜色和边界使其更高档。
</p>

</body>

创建一个没有表格的网页

 * {
            box-sizing: border-box;
        }
        body {
            margin: 0px;
        }
        .header {
            color: white;
            background-color: blue;
            text-align: center;
            padding: 15px;
        }
        .footer {
            background-color: black;
            color: white;
            padding: 15px;
        }
        ul.topmenu {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            background-color: lightslategray;
        }
        ul.topmenu li {
            float: left;
        }
        ul.topmenu li a {
            display: inline-block;
            padding: 15px;
            text-align: center;
            text-decoration: none;
            color: white;
        }
        ul.topmenu li a:hover:not(.active){
            background-color: black;
        }
        ul.topmenu li .active {
            background-color: green;
        }
        .sidemenu {
            width: 25%;
        }
        .content {
            width: 75%;
        }
        .container::after {
            content: "";
            clear: both;
            display: table;
        }
        .column {
            float: left;
            padding: 15px;
        }
        .sidemenu ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        .sidemenu ul a {
            display: block;
            padding: 6px;
            margin-bottom: 4px;
            text-decoration: none;
            background-color: #eee;
            color: #666;
        }
        .sidemenu ul a:hover:not(.active){
            color: white;
            background-color: lightslategray;
        }
        .sidemenu ul a.active{
            color: white;
            background-color: lightskyblue;
        }

<body>
    <ul class="topmenu">
        <li><a href="#" class="active">主页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>

    <div class="container">
        <div class="column sidemenu">
            <ul>
                <li><a href="#">The Flight</a></li>
                <li><a href="#" class="active">The City</a></li>
                <li><a href="#">The Island</a></li>
                <li><a href="#">The Food</a></li>
                <li><a href="#">The People</a></li>
                <li><a href="#">The History</a></li>
                <li><a href="#">The Oceans</a></li>
            </ul>
        </div>

        <div class="column content">
            <div class="header">
                <h1>The City</h1>
            </div>
            <h1>Chania</h1>
            <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
            <p>You will learn more about responsive web pages in a later chapter.</p>
        </div>
    </div>
    <div class="footer">
        <p>底部文本</p>
    </div>
</body>

CSS生成的内容

把括号内的URL用content属性插入到每个链接后面

a:after {
    content:"(" attr(href) ")";
}

<body>
    <a href="https://www.baidu.com">百度</a>
    <p><b>注意:</b>仅当 !DOCTYPE已经定义 IE8支持 content属性</p>
</body>

章节和分节的编号是"第1节","1.1","1.2"等

body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
    counter-increment:section;
    content:"Section " counter(section) ". ";
}
h2:before
{
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}

<body>

<p><b>注意:</b> 仅当 !DOCTYPE已经定义 IE8支持 这个属性.</p>

<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>

quotes属性指定了引号

q:lang(en)
{
quotes: "~" "~" "‘" "‘";
}

<body>

<p><q>This is a <q>big</q> quote.</q></p>
<p><b>注意:</b>当声明了!DOCTYPE 时， IE8 才支持这些属性。</p>
</body>

使用:焦点

input:focus
{
    background-color:yellow;
}

<body>
<form action="demo-form.php" method="get">
First name: <input type="text" name="fname" /><br>
Last name: <input type="text" name="lname" /><br>
<input type="submit" value="提交" />
</form>

<p><b>注意:</b>仅当 !DOCTYPE 已经声明时 IE8 支持 :focus.</p>

</body>

:first-child-匹配了第一个p元素

p:first-child
{
    color:blue;
}

<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经声明.</p>
</body>

:first-child-匹配了p元素中的第一个i元素

p > i:first-child
{
    color:blue;
}

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当 :first-child 作用于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经定义.</p>
</body>

:first-child-匹配了第一个p元素中的所有i元素

p:first-child i
{
    color:blue;
}

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当:first-child 作用于 IE8 及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
</body>

使用:lang

q:lang(no)
{
    quotes: "~" "~";
}

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p>
</body>

CSS伪元素

把文本的第一个字母设为特殊的字母

p:first-letter
{
    color:#ff0000;
    font-size:xx-large;
}

<body>
<p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式：</p>
</body>

把第一行文字设置为特殊

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

<body>
<p>你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。</p>
</body>

把第一行文字的第一个字母设置为特殊

p:first-letter
{
    color:#ff0000;
    font-size:xx-large;
}
p:first-line
{
    color:#0000ff;
    font-variant:small-caps;
}

<body>
<p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母
设置特殊样式。</p>
</body>

使用:在一个元素之前插入一些内容

h1:before {content:url(smiley.gif);}

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>

原文地址：https://www.cnblogs.com/Tony98/p/10967066.html

时间： 2024-10-09 21:28:39

CSS 显示定位浮动对齐元素的相关文章

CSS如何让浮动导航栏元素居中显示

CSS如何让浮动导航栏元素居中显示:制作导航栏是最为基础的布局技能之一,当然对于稍有经验的人员来说没有任何问题,不过对于初学者可能会有一定的困扰.普通的导航栏一般具有一下几个特点,整个导航栏居中,导航栏目具有,并且能够均匀分布,下面就是一个这样的简单代码实例.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author"

CSS中定位和浮动对行内元素的宽高的影响

行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者position:fixed或者使用float属性时,width和height的设置能起作用. 因为在以上三种情况下,行内元素的display从inline变为block <style> span{ background-color:red; width:100px; height:100px; float

CSS Positioning(定位)与Float(浮动)

一.CSS Positioning(定位) 1.Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么.元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法.有四种不同的定位方法. 2.Static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到top, bottom, lef

第五天-css基础（浮动网页布局定位方式，清除定位）

基础知识-css第五天,今天学习了css主要知识浮动,和定位,都是关于网页布局的.这个2块知识用好了,后期做好看的动画,布局就不成问题了. 浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框的边框为止特点设置了浮动的元素不占原来的位置(不在标准流) 可以让块级元素在一行显示浮动可以行内元素为块元素注意:转化过程尽可能用display转化属性值清除浮动额外标签法 <style> outer{border:1px solid black; width:3

CSS基础知识---浮动，定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

CSS页面布局基础3——元素浮动

1.浮动(float)是基于CSS的现代Web设计用到的主要功能之一,可以用它来创建多累的网页布局,从无序列表创建导航工具条,不是用table而创建类似表格的对其方式等. 为使元素浮动到左边或者右边,并使后面的文本环绕它,可使用float属性,float属性的取值是:none(不浮动),left(向左浮动),right(向右浮动). 使用float属性后,浮动的元素从正常文档流中脱离出来,同时对布局中的其他元素造成一定的影响. 浮动可以应用于任何元素. 我个人认为我们可以这样理解浮动(如有什么不

CSS区块、浮动、定位、溢出、滚动条

CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 CSS中溢出的使用 CSS中滚动条的使用 17.1 CSS中区块的使用属性名称属性值说明 width 像素/百分比区块的宽度 auto height 像素/百分比区块的高度 auto min-height 像素/百分比区块最小高度 a

浮动和渐变色，定位position，元素的层叠顺序

浮动: float 是我们网页布局的一种浮动可以有 left 左浮动 right 右浮动两种浮动的特点: 脱离正常的文档流,原本的空间不占据,浮动的标签都具有块级标签的一些特点,可以手动设置宽高如果有相邻的多个浮动的元素,那么后面浮动的元素会停靠在前面浮动元素的后面,如果剩余空间不够,则会另起一行显示如果一个元素中所有的内容都浮动了,那么这个元素本身高度则没有了,如果想要让这个元素高度还在,需要自己手动设置高度清除浮动: 不是说把浮动的元素清理掉,而是清除浮动元素对其他元素的影响

CSS学习笔记——CSS中定位的浮动float

昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么? 第一个问题:浮动到底是怎么样的? W3CSCHOOL对浮动属性的解释:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.所以浮动也有left.right.none三种. 我个人的理解是:HTML 文件就像是一个方形的水槽,它在浏览器中加载的过程就好比是向水槽中放水,而

CSS 显示 定位 浮动 对齐元素