备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

CSS布局：CSS三大特性、盒子模型

2023-09-12 103
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS布局：CSS三大特性、盒子模型

CSS布局

Date: September 3, 2022

Summary: CSS三大特性、盒子模型


CSS三大特性

◆ 能够认识不同选择器的 优先级 公式


◆ 能够进行 CSS 权重叠加计算，分析并解决CSS 冲突问题


◆ 能够认识 盒子模型 的组成部分


◆ 能够掌握盒子模型的 边框、内边距、外边距 的作用及简写形式


◆ 能够计算盒子的 实际大小


◆ 能够了解 外边距折叠现象，并知道如何解决 盒子塌陷问题


学习路径：


1.继承性

2.层叠性

3.优先级


优先级的介绍

特性：


不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式


优先级公式：


继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important


Code：

<style>
      #box {
          color: orange;
      }
      .box {
          color: blue;
      }
      div {
          color: green !important;
      }
      body {
          color: red;
      }
      /* !important不要给继承的添加, 自己有样式无法继承父级样式 */
  </style>
<div class="box" id="box" style="color: pink;">测试优先级</div>

一般来说，谁选中的范围广，谁的优先级低


比如通配符（*）的范围很广，但是它的优先级较低


CSS 中的 !important 规则用于增加样式的权重。


!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。


注意点：

1.!important写在属性值的后面，分号的前面！

2.!important不能提升继承的优先级，只要是继承优先级最低！

3.实际开发中不建议使用 !important 。


小结：


优先级比较公式是怎样的？


继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important


!important能提升继承的优先级吗？


不能


权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效


权重叠加计算公式：（每一级之间不存在进位）

4ec70b2202ad91165aba84705808fcca.png

比较规则：


1.先比较第一级数字，如果比较出来了，之后的统统不看

2.如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看

3.……

4.如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）

注意点：!important如果不是继承，则权重最高，天下第一！


Code:

/* (行内, id, 类, 标签) */
/* (0, 1, 0, 1) */
 div #one {
  color: orange;
}
/* (0, 0, 2, 0) */
.father .son {
  color: skyblue;
}
/* 0, 0, 1, 1 */
.father p {
  color: purple;
}
/* 0, 0, 0, 2 */
div p {
  color: pink;
}

（拓展）权重叠加计算案例


权重计算题解题步骤：


1.先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass

2.通过权重计算公式，判断谁权重最高


注意点：


实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己


补充：


这里我们需要重点考虑这个知识点，


对于复合选择器，我们可以通过权重来判断，也可以通过继承的优先级来判断


对于继承：


都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效


比如如下，优先继承


, 再继承 father ， 故显示红色

<style>
/* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 */   
    /* 继承 */
    div p {
      color:red;
    } 
    /* 继承 */
    .father {
      color:blue;
    } 
  </style>
<body>
  <div class="father">
    <p class="son"> 
      <span>文字</span>
    </p>
  </div>
</body>

PxCook的基本使用

学习路径：


1.打开设计图

2.常用快捷键

3.从psd文件中直接获取数据


PxCook的基本使用


1.通过软件打开设计图

① 打开软件 ② 拖拽入设计图 ③ 新建项目

2.常用快捷键

放大设计图：ctrl + +

缩小设计图：ctrl + -

移动设计图：空格按住不放，鼠标拖动

3.常用工具

量尺寸

吸颜色

4.从psd文件中直接获取数据

切换到开发界面，直接点击获取数据


盒子模型

学习路径：


1.盒子模型的介绍

2.内容区域的宽度和高度

3.边框（ border ）

4.内边距（ padding ）

5.外边距（margin）


盒子模型的介绍

1.盒子的概念

  1.页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局

  2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子


2.盒子模型

  CSS 中规定每个盒子分别由：

  内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型


3.记忆：可以联想现实中的包装盒

a9d4517870546ec5baf694002ffd297e.png

Code：

<!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>Document</title>
    <style>
        /* 纸箱子, 填充泡沫 */
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 边框线 == 纸箱子 */
            border: 1px solid #000;
            /* 内边距 == 填充泡沫 : 出现在内容和盒子边缘之间 */
            padding: 20px;
            /* 外边距 : 出现在两个盒子之间, 出现在盒子的外面*/
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>内容电脑</div>
    <div>内容电脑</div>
</body>
</html>

效果：

12f01306a727c64dee10a4e76dc0ff1c.png

小结：


盒子模型一共有几个部分组成？分别是什么？


1.内容区域：content

2.边框区域：border

3.内边距区域：padding

4.外边距区域：margin


内容区域的宽度和高度

2.1 内容的宽度和高度


作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小


属性：width / height


常见取值：数字+px

13cfac4d156dc820d35ab18fc0223757.png

Code：

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

效果：

3bd6f6593fc3ff2e000aec605d65e0f8.png

设置盒子模型内容区域大小可以通过什么属性设置？


1.宽度：width

2.高度：height


边框（ border ）

边框（border）- 单个属性


作用：给设置边框粗细、边框样式、边框颜色效果


单个属性：


作用               属性名                          属性值

边框粗细             border-width               数字+px

边框样式             border-style         实线solid、虚线dashed、点线dotted

边框颜色             border-color                   颜色取值


边框（border）- 连写形式


属性名：border


属性值：单个取值的连写，取值之间以空格隔开


如：border : 10px solid red;


快捷键：bd + tab


边框（border）- 单方向设置


场景：只给盒子的某个方向单独设置边框


属性名：border - 方位名词


属性值：连写的取值


Code：

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border: 粗细  线条样式   颜色 -- 不分先后顺序 */
            /* solid : 实线 */
            /* border: 1px solid #000; */
            /* dashed: 虚线 */
            /* border: 5px dashed #000; */
            /* dotted : 点线 */
            /* border: 5px dotted #000; */
            border-left: 5px dotted #000;
            border-right: 5px dotted #000;
            border-top: 1px solid red;
            border-bottom: 1px solid red;
        }
    </style>
</head>
<body>
    <div>内容</div>
</body>
</html>

效果：

60947c6685d38a34b94e77663c1f13b3.png

小结：


➢ 给盒子设置四周 20像素、实线、蓝色的边框，属性应该如何设置？


• border：20px solid blue；


➢ 给盒子设置上边框 10像素、虚线、黄色的边框，属性应该如何设置？


• border-top：10px dashed yellow；


盒子实际大小初级计算公式


需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？


注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！


盒子实际大小初级计算公式：


盒子宽度 = 左边框 + 内容宽度 + 右边框


盒子高度 = 上边框 + 内容高度 + 下边框


解决：当盒子被border撑大后，如何满足需求？


解决：计算多余大小，手动在内容中减去（手动内减）

7db91ab20949e4ffedf9773af79d3bb4.png

（案例）盒子边框的小案例


需求：根据设计图，通过PxCook量取数据，通过代码在网页中完成一致的效果

b78396b246efd87f7b4780bea863d468.png

Code:

<!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>Document</title>
    <style>
        div {
            width: 280px;
            height: 280px;
            background-color: #ffc0cb;
            border: 10px solid #00f;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

（案例）新浪导航案例


需求：根据设计图，通过PxCook量取数据，通过代码在网页中完成一致的效果

39de292f0bd48029d1785efde88dc934.png

布局顺序：

1.从外往内，从上往下


每一个盒子的样式：

1.宽高

2.辅助的背景颜色

3.盒子模型的部分：border、padding、margin

4.其他样式：color、font-、text-、……


Code:

<!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>Document</title>
    <style>
        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        /* 后代: box里面的a */
        .box a {
            width: 80px;
            height: 40px;
            /* 推荐先加上: 清楚的看到文字在什么位置 */
            /* background-color: #edeef0; */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .box a:hover {
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
    <!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
    <p>
        <a href="#"></a>
    </p>
</body>
</html>

内边距（ padding ）

内边距（padding）- 取值


作用：设置 边框 与 内容区域 之间的距离


属性名：padding


常见取值：


取值     示例                          含义

一个值 padding:10px 上右下左都设置为10px

两个值 padding:10px 20px 上下设置为10px、左右设置为20px

三个值 padding:10px 20px 30px 上设置为10px、左右设置为20px、下设置为30px

四个值 padding:10px 20px 30px 40px 上设置为10px、右设置为20px、下设置为30px、左设置为                                                   40px

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！


内边距（padding）- 单方向设置


场景：只给盒子的某个方向单独设置内边距


属性名：padding - 方位名词


属性值：数字 + px


小结


给盒子设置四周 20px 的内边距可以通过什么属性设置？


padding : 20px ;


给盒子设置上下20px、左右30px的内边距可以通过什么属性设置？


padding : 20px 30px ;


给盒子设置左侧50px的内边距可以通过什么属性设置？


padding-left : 50px ;


4.3 盒子实际大小终极计算公式


需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？


注意点：


① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子


盒子实际大小终极计算公式：


盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框


盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框


解决：当盒子被border和padding撑大后，如何满足需求？


自己计算多余大小，手动在内容中减去（手动内减）

00893ee0b7311f7968ee3f7d1e2d413b.png

拓展理解：


根据以上，我可以知道：


盒子实际大小：


width : 300+50+1


height : 300+50+1

16a400838a7cb2d2df463a0c1ac530a0.png

新浪导航的优化


需求：优化之前的新浪导航，如果每个导航的字数增加，如何完成效果？

21fabc197f1bfeb330f03a5db3acbfe4.png

解决方案：


采用 padding: 0 16px 来让文字标签左右间距相等 ，而不是设定文字标签为固定值


Code：

<!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>Document</title>
    <style>
        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        /* 后代: box里面的a */
        .box a {
            /* 优化：这里把宽度去除，用内边距来代替，从而实现左右等距 */
            padding: 0 16px;
            /* width: 80px; */
            height: 40px;
            /* 推荐先加上: 清楚的看到文字在什么位置 */
            /* background-color: #edeef0; */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .box a:hover {
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
    <!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">新浪</a>
        <a href="#">新浪导航新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
    <p>
        <a href="#"></a>
    </p>
</body>
</html>

（拓展）不会撑大盒子的特殊情况


➢ 不会撑大盒子的特殊情况（块级元素）


1.如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度

2.此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子


CSS3盒模型（自动内减）


需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？


给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？


解决方法 ① ：手动内减


操作：自己计算多余大小，手动在内容中减去


缺点：项目中计算量太大，很麻烦


解决方法 ② ：自动内减


操作：给盒子设置属性 box-sizing : border-box ; 即可


优点：浏览器会自动计算多余大小，自动在内容中减去


Code：

<!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>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;
            /* 內减模式 */
            /* 变成CSS3的盒子模型, 好处: 加了border和padding不需要手动减法 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

效果：

f9eb0eec8cfbd0e1fb8f50982b44508d.png


外边距（margin）

5.1外边距（margin）- 取值

margin: 50px;

作用：设置边框以外，盒子与盒子之间的距离


属性名：margin


常见取值：


取值 示例                                         含义

一个值 margin:10px                            上右下左都设置为10px

两个值 margin:10px 20px              上下设置为10px，左右设置为20px

三个值 margin:10px 20px 30px       上设置为10px，左右设置为20px，下设置为30px

四个值 margin:10px 20px 30px 40px 上设置为10px，右设置为20px，下设置为30px，左设置为40px

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！


5.2外边距（margin） - 单方向设置

margin-left: 100px;

➢ 场景：只给盒子的某个方向单独设置外边距


➢ 属性名：margin - 方位名词


➢ 属性值：数字 + px


小结：


➢ 给盒子设置四周 20px 的外边距可以通过什么属性设置？


• margin : 20px ;


➢ 给盒子设置上下20px、左右30px的外边距可以通过什么属性设置？


• margin : 20px 30px ;


➢ 给盒子设置左侧50px的外边距可以通过什么属性设置？


• margin-left : 50px ;


5.3 margin单方向设置的应用


➢ 应用：


方向                属性                  效果

水平方向       margin-left     让当前盒子距离左边界一段距离

水平方向       margin-right       让当前盒子距离右边界一段距离

垂直方向       margin-top       向当前盒子下面移动

垂直方向            margin-bottom 让下面的盒子往下移动


理解参考：

https://www.php.cn/website-design-ask-492044.html


Code：

<!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>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

5.4 清除默认内外边距


场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些


标签默认的margin和padding，后续自己设置


• 比如：body标签默认有margin：8px


• 比如：p标签默认有上下的margin


• 比如：ul标签默认由上下的margin和padding-left


• ……


➢ 解决方法：

12e5b266bb434f0af342ba3df545b174.png

右边是通配符


Code：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <p>pppp</p>
    <p>pppp</p>
    <h1>h1</h1>
    <ul>
        <li>lili</li>
    </ul>
</body>
</html>

效果：

c98c6ed28dbbba7da0bd6a1e73281568.png

版心居中：


Code：

<!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>Document</title>
    <style>
        div {
            width: 1000px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        } 
    </style>
</head>
<body>
    <!-- 版心: 网页的有效内容 -->
    <!-- 版心居中 -->
    <div>版心</div>
</body>
</html>

效果：

c93bb1047d6c643dfaa6c077dc34cbaa.png

注意：


这里 margin 指上下距离为0，左右为自动适配，从而就可以让版面居中


左右自动适配：


网页版面宽度为1000，电脑的页面宽度为1536，通过1536-1000=536，从而计算得出左右margin为268


（案例）网页新闻列表案例

需求：根据设计图，通过PxCook量取数据，代码在网页中完成一致的效果


布局顺序：

1.从外往内，从上往下


每一个盒子的样式：

1.宽高

2.辅助的背景颜色

3.盒子模型的部分：border、padding、margin

4.其他样式：color、font-、text-、……

27c0b0594123d59fd018f9d52cb3077e.png

Code:

<!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>Document</title>
    <style>
        *{
            /* 将以后要使用的元素的内外边距都清为0 */
            margin: 0;
            padding: 0;
            /* 所有的标签都可能添加内边距或border */
            /* 故这里采用  内减  的方式 */
            box-sizing: border-box;
        }
        .news {
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 50px auto;
            padding: 42px 30px 0;
        }
        .news h2{
            border-bottom: 1px solid #ccc;
            font-size: 30px;
            /* 行高是一倍，即字号大小 */
            line-height: 1;
            padding-bottom: 9px;
        }
        /* 去掉列表的符号 */
        ul{
            list-style: none;
        }
        .new li{
            height: 50px;
            border-bottom: 1px solid #ccc;
            padding-left: 28px;
            /* 让字体上下居中 */
            line-height: 50px;
        }
        .news a{
            text-decoration: none;
            color: #666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="news">
        <ul>
            <!-- 快捷键： ul>li>a  -->
            <li><a href="a"></a></li>
            <li><a href="b"></a></li>
            <li><a href="c"></a></li>
            <li><a href="d"></a></li>
        </ul>
    </div>
</body>
</html>

外边距正常情况


场景：水平布局 的盒子，左右的margin正常，互不影响


结果：最终两者距离为左右margin的和


外边距折叠现象 – ① 合并现象

5fce2d60c98d6044101b1e080b4e0f20.png

场景：垂直布局 的 块级元素，上下的margin会合并


结果：最终两者距离为margin的最大值


解决方法：避免就好


只给其中一个盒子设置margin即可


外边距折叠现象 – ② 塌陷现象

ad06c68dcc6ce931ed9b5dad85e8993f.png

场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上


结果：导致父元素一起往下移动


解决方法：


1.给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

2.给父元素设置overflow：hidden （这是最完美的方案）

3.转换成行内块元素

4.设置浮动


Code：

.father {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* padding-top: 50px; */
            /* 如果设计稿没有border, 不能使用这个解决办法 */
            /* border: 1px solid #000; */
            /* overflow: hidden; */
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-top: 50px;
            display: inline-block;
        }

行内元素的margin和padding无效情况


场景：给行内元素设置margin和padding时


结果：

1.水平方向的margin和padding布局中有效！

2.垂直方向的margin和padding布局中无效！


总结：

◆ 能够认识不同选择器的 优先级 公式

◆ 能够进行 CSS 权重叠加计算，分析并解决CSS 冲突问题

◆ 能够认识 盒子模型 的组成部分

◆ 能够掌握盒子模型的 边框、内边距、外边距 的作用及简写形式

◆ 能够计算盒子的 实际大小

◆ 能够了解 外边距折叠现象，并知道如何解决 盒子塌陷问题


谷歌调试工具：

CSS代码中，如果上一行出错，会导致下一行失效

89ba625842419190ccf53468eac75200.png


文章标签：
前端开发
关键词：
CSS布局
CSS盒子模型
CaptainDrake
目录
相关文章
小周sir
|
24天前
|
前端开发 开发者 容器
彻底学会CSS grid网格布局
【4月更文挑战第1天】 彻底学会CSS grid网格布局
小周sir
16 0
jcLee95
|
3月前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
jcLee95
81 0
破浪前进
|
3月前
|
设计模式 前端开发 开发者
css 三栏布局的实现
css 三栏布局的实现
破浪前进
34 0
叫我兔兔酱
|
15天前
|
前端开发 开发者 容器
【掰开揉碎】详解 CSS3 Grid 布局
【掰开揉碎】详解 CSS3 Grid 布局
叫我兔兔酱
29 0
N..
|
1月前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
8 0
N..
|
1月前
|
前端开发
CSS盒子模型
CSS盒子模型
N..
13 0
游客762btuqu5wybw666
|
1月前
|
前端开发 UED 开发者
探索前端开发中的CSS布局技巧
本文将介绍一些在前端开发中常用的CSS布局技巧，包括盒模型、浮动布局、弹性布局和栅格系统等。通过学习这些技巧，开发者可以更加灵活地控制页面的布局，提升用户体验和界面的美观性。
游客762btuqu5wybw666
17 3
明月看潮生
|
1月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架
明月看潮生
19 1
明月看潮生
|
1月前
|
前端开发 开发者
编程笔记 html5&css&js 013 HTML布局
编程笔记 html5&css&js 013 HTML布局
明月看潮生
24 1
爱喝汤的技术少年
|
2月前
|
前端开发 JavaScript 容器
CSS学习笔记(一) 盒子模型
CSS学习笔记(一) 盒子模型
爱喝汤的技术少年
26 0