CSS 显示定位浮动对齐元素

Posted 2021-12-18 tony98

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于CSS 显示定位浮动对齐元素的主要内容，如果未能解决你的问题，请参考以下文章

有没有办法用 CSS 对齐浮动 HTML 元素？

css基础 CSS 布局 – OverflowFloat 浮动CSS 布局 – 水平垂直居中对齐

CSS 显示 定位 浮动 对齐元素

CSS 显示

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

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

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

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

如何使用表格的collapse属性

CSS定位

元素的相对定位

元素的绝对定位

重叠的元素

设置元素的形状

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

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

更改光标

CSS浮动

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

标题和图片向右侧浮动

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

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

开启float-clear属性

创建一个水平菜单

创建一个没有表格的网页

CSS生成的内容

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

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

quotes属性指定了引号

使用:焦点

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

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

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

使用:lang

CSS伪元素

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

把第一行文字设置为特殊

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

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

CSS 显示定位浮动对齐元素