• CSS从入门到精通（4）

    目录

    CSS 分组 和 嵌套 选择器

    分组选择器

    实例

    嵌套选择器

    实例

    CSS 尺寸 (Dimension)

    更多实例

    所有CSS 尺寸 (Dimension)属性

    CSS Display(显示) 与 Visibility（可见性）

    隐藏元素 - display:none或visibility:hidden

    实例

    实例

    CSS Display - 块和内联元素

    如何改变一个元素显示

    实例

    实例

    更多实例

    CSS Position(定位)

    static 定位

    实例

    fixed 定位

    实例

    relative 定位

    实例

    实例

    absolute 定位

    实例

    sticky 定位

    实例

    重叠的元素

    实例

    更多实例

    所有的CSS定位属性

    CSS 布局 - Overflow

    CSS Overflow

    overflow: visible

    实例

    CSS 分组 和 嵌套 选择器

    分组选择器

    在样式表中有很多具有相同样式的元素。

    h1 { color:green; } h2 { color:green; } p { color:green; }

    为了尽量减少代码，你可以使用分组选择器。

    每个选择器用逗号分隔。

    在下面的例子中，我们对以上代码使用分组选择器：

    实例

    h1,h2,p { color:green; }

    嵌套选择器

    它可能适用于选择器内部的选择器的样式。

    在下面的例子设置了四个样式：

    • p{ }: 为所有 p 元素指定一个样式。
    • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
    • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
    • p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

    实例

    p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; } p.marked{ text-decoration:underline; }

    CSS 尺寸 (Dimension)

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

    Examples

    更多实例

    1. html>
    2. <html>
    4. 8"> 
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    8.  
    9. <body>
    10. <img class="normal" src="logocss.gif" width="95" height="84" />
    11. <img class="big" src="logocss.gif" width="95" height="84" />
    12. <p class="ex">这个段落的高和宽是 100px.p>
    13. <p>这是段落中的一些文本。这是段落中的一些文本。
    14. 这是段落中的一些文本。这是段落中的一些文本。
    15. 这是段落中的一些文本。这是段落中的一些文本.p>
    16. body>
    17. html>

    这个例子演示了如何设置不同元素的高度。

    1. html>
    2. <html>
    4. 8"> 
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    8.  
    9. <body>
    10. <img class="normal" src="logocss.gif" width="95" height="84" />
    11. <img class="big" src="logocss.gif" width="95" height="84" />
    12. <img class="small" src="logocss.gif" width="95" height="84" />
    13. body>
    14. html>

    这个例子演示了如何使用百分比值设置元素的高度。

    1. html>
    2. <html>
    4. 8"> 
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    8. <body>
    9.  
    10. <img src="logocss.gif" width="95" height="84" />
    11.  
    12. body>
    13. html>

    本例演示如何使用像素值来设置元素的宽度。

    1. <html>
    3. 8"> 
    4. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    7.  
    8. <body>
    9. <p>本段落的最大高度被设置为 50px。 本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。p>
    10. body>
    11. html>

    此示例演示如何设置元素的最大高度。

    1. html>
    2. <html>
    4. 8"> 
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    8. <body>
    9.  
    10. <p>This is some text. This is some text. This is some text.
    11. This is some text. This is some text. This is some text.
    12. This is some text. This is some text. This is some text.p>
    13.  
    14. body>
    15. html>

    使用百分比来设置元素的最大宽度本例演示如何使用百分比值来设置元素的最大宽度。

    1. html>
    2. <html>
    4. 8"> 
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    8.  
    9. <body>
    10. <p>这段的最小高度设置为100 px。p>
    11. body>
    12. html>

    此示例演示如何设置元素的最小高度。

    1. html>
    2. <html>
    4. 8"> 
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    8.  
    9. <body>
    10. <p>这个段落的最小宽度设置为 150px。p>
    11. body>
    12. html>

    这个例子演示了如何使用像素值设置元素的最小宽度。

    所有CSS 尺寸 (Dimension)属性

    属性描述
    heightheightheight设置元素的高度。
    line-heightline-heightline-height设置行高。
    max-heightmax-heightmax-height设置元素的最大高度。
    max-widthmax-widthmax-width设置元素的最大宽度。
    min-heightmin-heightmin-height设置元素的最小高度。
    min-widthmin-widthmin-width设置元素的最小宽度。
    widthwidthwidth设置元素的宽度。

    CSS Display(显示) 与 Visibility（可见性）

    display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

    Box 1
     

    Box 2

    Box 3

    隐藏元素 - display:none或visibility:hidden

    隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

    visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

    实例

    h1.hidden {visibility:hidden;}

    display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

    实例

    h1.hidden {display:none;}

    CSS Display - 块和内联元素

    块元素是一个元素，占用了全部宽度，在前后都是换行符。

    块元素的例子：

    内联元素只需要必要的宽度，不强制换行。

    内联元素的例子：

    如何改变一个元素显示

    可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

    下面的示例把列表项显示为内联元素：

    实例

    li {display:inline;}

    下面的示例把span元素作为块元素：

    实例

    span {display:block;}

    注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

    Examples

    更多实例

    1. html>
    2. <html>
    4. 8"> 
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    8.  
    9. <body>
    10. <p>display 属性的值为 "inline"的结果p>
    11. <p>两个元素显示在同一水平线上。p>
    12. body>
    13. html>

    这个例子演示了如何显示一个元素的内联元素。

    1. html>
    2. <html>
    4. 8"> 
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    8. <body>
    9.  
    10. <span>display 属性值为 "block" 的结果span> <span>这两个元素之间的换行符。span>
    11.  
    12. body>
    13. html>

    这个例子演示了如何显示一个元素的块元素。

    1. html>
    2. <html>
    4. 8"> 
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    8. <body>
    9.  
    10. <table>
    11.   <tr>
    12.     <th>Firstnameth>
    13.     <th>Lastnameth>
    14.   tr>
    15.   <tr>
    16.     <td>Petertd>
    17.     <td>Griffintd>
    18.   tr>
    19.   <tr class="collapse">
    20.     <td>Loistd>
    21.     <td>Griffintd>
    22.   tr>
    23. table>
    24.  
    25. <p><b>注意: IE8 及其更早版本需要通过指定 !DOCTYPE 才可以支持 visibility:collapse。
    26.

    这个例子演示了如何使用表的collapse属性。

    CSS Position(定位)

    position 属性指定了元素的定位类型。

    position 属性的五个值：

    元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

    static 定位

    HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

    静态定位的元素不会受到 top, bottom, left, right影响。

    实例

    div.static { position: static; border: 3px solid #73AD21; }

    fixed 定位

    元素的位置相对于浏览器窗口是固定位置。

    即使窗口是滚动的它也不会移动：

    实例

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

    注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

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

    Fixed定位的元素和其他元素重叠。

    relative 定位

    相对定位元素的定位是相对其正常位置。

    实例

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

    移动相对定位元素，但它原本所占的空间不会改变。

    实例

    h2.pos_top { position:relative; top:-50px; }

    相对定位元素经常被用来作为绝对定位元素的容器块。

    absolute 定位

    绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

    实例

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

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

    absolute 定位的元素和其他元素重叠。

    sticky 定位

    sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

    position: sticky; 基于用户的滚动位置来定位。

    粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

    它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

    元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

    这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

    注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

    实例

    div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }

    重叠的元素

    元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

    z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

    一个元素可以有正数或负数的堆叠顺序：

    实例

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

    具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

    注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

    Examples

    更多实例

    1. html>
    2. <html>
    4. 8"> 
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    8.  
    9. <body>
    10. <img src="w3css.gif" width="100" height="140" />
    11. body>
    12. html>

    此示例演示如何设置元素的外形。该元素被剪裁成这种形状，并显示出来。

    1. html>
    2. <html>
    4. 8"> 
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    8. <body>
    9. <h1>overflow 属性h1>
    10.  
    11. <p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。p>
    12.  
    13. <h2>overflow: scroll:
    14. "ex1">菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！
    15.  
    16. overflow: hidden:
    17. "ex2">菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！
    18.  
    19. overflow: auto:
    20. "ex3">菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！
    21.  
    22. overflow: visible (默认):
    23. "ex4">菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！
    24.

    这个例子演示了overflow属性创建一个滚动条，当一个元素的内容在指定的区域过大时如何设置以适应。

    1. html>
    2. <html>
    4. 8"> 
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    8.  
    9. <body>
    10. <p>overflow 属性规定当内容溢出元素框时发生的事情。p>
    11.  
    12. <div>
    13. 当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。

    • 这个例子演示了如何设置浏览器来自动处理溢出。

    1. html>
    2. <html>
    4. 8"> 
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>) 
    7. <body>
    8. <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：p>
    9. <span style="cursor:auto">auto
    10. ">crosshair
    11. ">default
    12. ">e-resize
    13. ">help
    14. ">move
    15. ">n-resize
    16. ">ne-resize
    17. ">nw-resize
    18. ">pointer
    19. ">progress
    20. ">s-resize
    21. ">se-resize
    22. ">sw-resize
    23. ">text
    24. ">w-resize
    25. ">wait

    这个例子演示了如何改变光标。

    所有的CSS定位属性

    "CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。

    属性说明值CSS
    bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。auto
    length
    %
    inherit    		2
    clip剪辑一个绝对定位的元素shape
    auto
    inherit    		2
    cursor显示光标移动到指定的类型url
    auto
    crosshair
    default
    pointer
    move
    e-resize
    ne-resize
    nw-resize
    n-resize
    se-resize
    sw-resize
    s-resize
    w-resize
    text
    wait
    help    		2
    left定义了定位元素左外边距边界与其包含块左边界之间的偏移。auto
    length
    %
    inherit    		2
    overflow设置当元素的内容溢出其区域时发生的事情。auto
    hidden
    scroll
    visible
    inherit    		2
    overflow-x指定如何处理顶部/底部边缘的内容溢出元素的内容区域auto
    hidden
    scroll
    visible
    no-display
    no-content    		2
    overflow-y指定如何处理右边/左边边缘的内容溢出元素的内容区域auto
    hidden
    scroll
    visible
    no-display
    no-content    		2
    position指定元素的定位类型absolute
    fixed
    relative
    static
    inherit    		2
    right定义了定位元素右外边距边界与其包含块右边界之间的偏移。auto
    length
    %
    inherit    		2
    top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。auto
    length
    %
    inherit    		2
    z-index设置元素的堆叠顺序number
    auto
    inherit    		2

    CSS 布局 - Overflow

    CSS overflow 属性用于控制内容溢出元素框时显示的方式。

    这里的文本内容是可以滚动的，滚动条方向是垂直方向。

    这里的文本内容是可以滚动的，滚动条方向是垂直方向。

    这里的文本内容是可以滚动的，滚动条方向是垂直方向。

    这里的文本内容是可以滚动的，滚动条方向是垂直方向。

    这里的文本内容是可以滚动的，滚动条方向是垂直方向。

    这里的文本内容是可以滚动的，滚动条方向是垂直方向。

    1. html>
    2. <html>
    4. 8">
    5. 菜鸟教程(runoob<span class="hljs-selector-class">.com</span>)
    8. <body>
    9.  
    10. <div id="overflowTest">
    11. <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。p>
    12. <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。p>
    13. <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。p>
    14. <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。p>
    15. <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。p>
    16. <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。p>
    17. div>
    18.  
    19. body>
    20. html>

    CSS Overflow

    CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

    overflow属性有以下值：

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

    注意:overflow 属性只工作于指定高度的块元素上。

    注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

    overflow: visible

    默认情况下，overflow 的值为 visible， 意思是内容溢出元素框：

    这里的文本内容会溢出元素框。

    这里的文本内容会溢出元素框。

    这里的文本内容会溢出元素框。

    这里的文本内容会溢出元素框。

    这里的文本内容会溢出元素框。

    这里的文本内容会溢出元素框。

    这里的文本内容会溢出元素框。

    实例

    div { width: 200px; height: 50px; background-color: #eee; overflow: visible; }
  • 相关阅读:
    ceph（分布式存储）
    计算机网络课程实训：局域网方案设计与实现（基于ensp）
    [Spring Boot]09 Spring Boot集成和使用Redis
    mybatis 07: sql标签中 "#{}" 和 "${}" 的作用和比较
    备战2024秋招面试题-最左匹配原则、索引失效情况、算法（最长回文子串）
    ArrayList 和 LinkedList 到底有哪些区别？
    基于ACO蚁群算法的tsp优化问题matlab仿真
    数据守护集群之MPP主备集群
    【DRAM存储器十六】DDR2介绍-DDR到DDR2的变化、DDR2框图详解、模式寄存器
    UNCTF2022 writeup
  • 原文地址：https://blog.csdn.net/c5c5c5c5c5/article/details/132646271