CSS基础：盒子层次z-index、盒子呈现形式（none、block、inline、inline-block）、表格线框（border-collapse、border-spacing）

已于 2023-05-30 17:52:15 修改
阅读量162 收藏 1
点赞数
分类专栏： CSS 文章标签： html css
于 2022-07-05 11:11:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alley_Olive/article/details/125615723
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子层次z-index</title>
    <style>
        div{
            width: 150px;
            height: 150px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <!--
        div盒子层次：z-index属性，数值越高，越在顶层
    -->
    <div style="background-color:cyan; z-index: 2;">我是div标签1</div>
    <div style="background-color:deeppink; z-index: 1;">我是div标签2</div>
</body>
</html>

页面效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子呈现形式:none、block、inline、inline-block</title>
    <style>
        div{
            width: 180px;
            height: 120px;
        }
        span{
            width: 180px;
            height: 120px;
        }
    </style>
</head>
<body>
     <!--
        盒子呈现形式：
        display：none|block|inline|inline-block
        block: 块级标签，可设置宽、高，元素独占一行
        inline: 行级标签，不可设置宽、高，元素自适应内部内容
        inline-block: 介于inline与block之间，可设置宽、高，但元素不会独占一行
    -->
    <div style="background-color:lime; display: block;">我是div标签1</div>
    <div style="background-color:violet; display: block;">我是div标签2</div>
    <br>
    <br>
    <div style="background-color:lime; display: inline;">我是div标签3</div>
    <div style="background-color:violet; display: inline;">我是div标签4</div>
    <br>
    <br>
    <div style="background-color:lime; display: inline-block;">我是div标签5</div>
    <div style="background-color:violet; display: inline-block;">我是div标签6</div>
    <br>
    <br>
    <span style="background-color:hotpink; display: block;">我是span标签1</span>
    <span style="background-color:royalblue; display: block;">我是span标签2</span>
    <br>
    <br>
    <span style="background-color:hotpink; display: inline;">我是span标签3</span>
    <span style="background-color:royalblue; display: inline;">我是span标签4</span>
    <br>
    <br>
    <span style="background-color:hotpink; display: inline-block;">我是span标签5</span>
    <span style="background-color:royalblue; display: inline-block;">我是span标签6</span>
    <br>
    <br>
</body>
</html>

页面效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格线框：border-collapse、border-spacing</title>
    <style>
        .table1{
            width: 200px;
            height: 200px;
            border: 1px solid hotpink;
            border-collapse: collapse;
        }
        .table2{
            width: 200px;
            height: 200px;
            border: 1px solid hotpink;
            border-spacing: 5px 10px;
        }
        td{
            border: 1px solid hotpink; 
        }
    </style>
</head>
<body>
    <!--
        表格线框：
        1、border-collapse: separate | collapse 。
            separate：默认值，边框会被分开，不会忽略border-spacing和empty-cells属性。 
            collapse：边框会合并为一个单一的边框，会忽略border-spacing和empty-cells属性。 

        2、border-spacing：[length] 。
            规定相邻单元的边框之间的距离，使用单位为px、cm，不允许使用负值。
            如果只定义了一个length参数，那么水平方向和垂直方向的间距都为length。
            如果定义了两个length参数，那么第一个设置为水平间距，第二个设置为垂直间距。

    -->
    <table class="table1">
        <tr>
            <td>AA</td>
            <td>BB</td>
            <td>CC</td>
        </tr>
        <tr>
            <td>DD</td>
            <td>EE</td>
            <td>FF</td>
        </tr>
        <tr>
            <td>GG</td>
            <td>HH</td>
            <td>II</td>
        </tr>
    </table>
    <br>
    <br>
    <table class="table2">
        <tr>
            <td>AA</td>
            <td>BB</td>
            <td>CC</td>
        </tr>
        <tr>
            <td>DD</td>
            <td>EE</td>
            <td>FF</td>
        </tr>
        <tr>
            <td>GG</td>
            <td>HH</td>
            <td>II</td>
        </tr>
    </table>
</body>
</html>

页面效果：

BestKagome
关注
专栏目录
前端基础知识总结---CSS篇
Web前端开发工程师
09-09 2362
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 选择符有哪些？ 3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 4.伪类与伪元素的区别 5.CSS 中哪些属性可以继承？ 6.CSS 优先级算法如何计算？ 7.关于伪类 LVHA 的解释? 8.CSS3 新增伪类有那些？ 9.如何居中 div？ 10.disp
CSS样式开发大全！
weixin_44179306的博客
11-13 773
CSS/层叠样式表 CSS 指层叠样式表（Cascading Style Sheets）。 您将学习如何使用 CSS 同时控制整个站点的样式和布局。 通过与 XHTML 结合，CSS 可以帮助我们实行表现与结构分离的开发模式。 通过使用 CSS 来提升工作效率！ 什么是CSS？: CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 CSS 是层叠样式表 ( ...
CSS盒子模型各属性层级及基础知识
qi1271199790的博客
01-31 2799
经测试box-shadow应该位于background-image之上并且位于content之下，因此对标签设置内阴影会被其内容（图片）覆盖； 1.设置浮动属性后，会对相邻的元素产生影响，相邻元素特指仅邻后面的元素。  2.受到影响的元素清除flow影响的方法：clear：both；只适用于紧邻后面的元素的清楚浮动，而当父包含块缩成一条时就不起作用了。  或者同时设置width：100%；+
如何提高当前盒子的层级
JJ_Smilewang的博客
04-11 3476
我们在使用定位布局时，可能会出现盒子重叠的情况。 一般的层级顺序是根据在html结构中的书写顺序排列的，写在上面的盒子会被压在下面，可我们有时需要把写在后面的盒子放在最上面，虽然我们可以通过更改html里面的书写顺序来调整，但是这未免过于麻烦，所以我们的z-index属性就闪亮登场了，它是用来控制盒子的前后次序 (z轴) 。 <style> div { width: 200px; line-height: 200px; text-a
CSS层级总结
IT晓可程序员之路
06-05 1232
css层级总结
z-index层级
weixin_43269800的博客
01-03 1492
z-index 应用背景：如果层级一样的情况下，后面的元素会盖住前面的元素。这里的前后是指html中结构上的前后。 • 当元素开启定位以后就可以设置z-index这 个属性。 • 这个属性可以提升定位元素所在的层级。 • z-index可以指定一个整数作为参数，值越 大元素显示的优先级越高，也就是z-index 值较大的元素会显示在网页的最上层。 注意：1、父元素盖不住子元素。 2、如果父元素有设...
css z-index
renpinghao的专栏
10-08 581
1、 z-index：  最底层的元素z-index 决定了上层元素的显示层次，底层元素的值低，上层元素的值再高也没有用~
css3边框详解
qq_38390669的博客
10-15 700
标题边框的基本属性 border-width:设置元素边框的粗细 border-color:设置元素边框的颜色 border-style:设置元素边框的类型 三个属性合并写法 border:border-width border-style border-color; .elm{border:3px red}是没有任何效果的，此时border-style解析成为none css中的border可以给不同的边设置不同的风格，遵守trbl原则 border-top-style border-right
CSS基础（新手入门教程）
最新发布
m0_61225117的博客
10-26 3597
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。
CSS笔记
喜哥的博客
06-08 324
overflow:hidden溢出隐藏（超出wh的隐藏） display:block不在一行但可设置 display:inline-block行内元素 background-repeat:no-repeat不重复背景 border-radius圆角。与h一样，（圆与设计师设计效果一样） line-height行高，与h一样，（字在中间） float:left 向左浮动，不占据空间，left right none inherit（规定应该从父元素继承float属性值） 有浮动包裹不住overflow:hidd
babel-inline-style-prefixer:Babel插件，用于在React应用程序中为内联样式添加前缀
05-20
内联样式前缀 Babel插件用于在编译阶段为内联样式添加前缀。
css中的z-index层级问题
weixin_45709829的博客
03-25 2295
css中z-index层级问题 一、css盒子模型的布局提供三种不同的定位方案 ①正常文档流 ②浮动 ③定位 第三种定位会将元素从正常文档流中完全移走，前端开发人员通过设置top、bottom、left、right在二维空间进行定位。 Z-index允许开发人员在三维空间进行定位 二、z-index基础 x轴代码水平方向，y轴代表垂直方向，z轴代表目光平视的方向，看进去屏幕里面这个方向。 开发的页面是二维空间，z轴是透视的。 规定：两个元素共享同一个二维开发空间块，z-index值大的会覆盖小的。想象一下，
【CSS】div层调整z-index属性无效原因分析及解决方法
Jessieeeeeee的博客
01-17 1512
问题描述 div层调整z-index属性无效； 原因分析 在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。 z-index无论设置多高都不起作用情况 这种情况发生的条件有三个： 父标签 position属性为 relative； 问题标签无position属性（不包括static）； 问题标签含有浮动(float)属性。 eg：z-index层级不起作用，浮动会让z-in
html z-index置顶,CSS z-index 层级关系优先级的概念
weixin_35453718的博客
06-03 1144
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.目录顺序规则如果不对节点设定...
CSS（层叠样式表）知识
m0_71769770的博客
08-27 1286
2.浏览器解析行内块或行内标签，如果标签换行，标签间会出现间距，所以使用浮动，可以让两块标签更好在一行排列；两个标签都左浮动，不会有间距，但是一个标签左浮，一个右浮，两标签间会有空隙。(在文本、span标签、a标签、input标签、img标签实现水平对齐效果，只需给其标签的父元素设置text-align即可)2.额外标签法：有些不适合加高度的，可以在父元素内容最后添加一个块级元素，再给添加的块级元素设置clear:both。（互相嵌套的块级元素，子元素的margin会作用在父元素上，导致子父级一起移动）..
块元素居中方式
gklcsdn的博客
12-10 836
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
z-index设置完后，元素仍然无法在顶层显示
怪囧小窝
06-22 8388
如下两步检查 检查position属性。z-index只能在position属性值为relative或absolute或fixed的元素上有效。 观察跟需要覆盖元素是否已不在同一个父节点中。我们通常都是在同一个父节点的子节点中设置z-index值，所以可以控制子节点相互覆盖的情况，但有时候，子节点超出范围可能会与其父节点的兄弟节点重合，此时不管你z-index设置为多大，都无法覆盖其父节点的兄...
使用zindex属性让控件显示在最上层
weixin_33775572的博客
05-13 519
设置示例： &lt;div id="a1" style="position:absolute;left:100px;top:100px;width:100px;height:100px; background-color:#ddeeff;z-index:1"&gt;&lt;/div&gt; &lt;div id="a2" style="position:absolute;left:150px.
css3中的z-index
冰雪为融的博客
07-05 9777
元素的层叠黄金准则：1）、谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个2）】后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素定位元素与传统层叠上下文对于position值为relative/absolute以及firfox/IE浏览器（不包括Chrome浏览器）下含有...
CSS阴影效果：drop-shadow vs box-shadow 比较解析
本文主要探讨了CSS中的两种阴影效果，即`drop-shadow`和`box-shadow`的区别和应用。这两种属性都用于创建元素的阴影效果，但它们在处理非矩形形状和透明度时有所不同。 在CSS中，`box-shadow`属性是最常见的阴影...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值