pt19盒模型&布局

最新推荐文章于 2024-11-12 22:56:44 发布

daydayup9527

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量189

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_60092693/article/details/131619920

版权

02html&css&jss 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的盒模型，包括内容尺寸overflow的处理，边框border的设置，如单边框、圆角边框以及网页三角标的制作。接着讨论了内边距padding和外边距margin的使用，以及它们如何影响元素间距。此外，还讲解了浮动布局float和定位布局position的概念，如相对定位、绝对定位和固定定位，并给出了相关示例和解决浮动布局中常见的高度塌陷问题的方法。

摘要由CSDN通过智能技术生成

CSS 盒模型

内容尺寸overflow(占用内容框)

一般情况下，为元素设置width/height，指定的是内容框的大小

内容溢出：内容超出元素的尺寸范围，称为溢出。默认情况下溢出部分仍然可见，可以使用overflow调整溢出部分的显示,取值如下：

取值	作用
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	强制在水平和垂直方向添加滚动条(水平滚动一般没有用)
auto	自动在溢出方向添加可用滚动条

<!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-UA-Compatible" content="ie=edge">
  <title>盒模型-内容框</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: red;
      /* 溢出内容隐藏 */
      /* overflow: hidden; */
      /* 两侧(水平/垂直放向)生成滚动条 */
      /* overflow: scroll; */
      /* 自动生成滚动条  如果水平或垂直方向有溢出的内容就生成滚动条 如果没有就不生成滚动条 */
      overflow: auto;
    }
  </style>
</head>
<body>
  <!-- 盒模型：页面元素在网页中实际所占空间的矩形形状，包括内容、内边距、边框、外边距 -->

  <div>
    <!-- lorem -->
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo hic nam cumque maiores minus eius quia quis adipisci ad, itaque placeat rerum ex odio laboriosam numquam quisquam officiis cupiditate reprehenderit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum quibusdam minus recusandae molestias quo praesentium eum corporis doloremque earum, id delectus eveniet possimus harum libero est voluptate, deserunt labore. Ad?
  </div>
</body>
</html>

边框border(不占用内容框)

边框实现默认四边

border  width style color;      eg：    border: 5px solid red;

边框样式为必填项，分为：

样式取值	含义
solid	实线边框
dotted	点线边框
dashed	虚线边框
double	双线边框

单边框（上下左右）

分别设置某一方向的边框，取值：width style color;

属性	作用
border-top	设置上边框
border-bottom	设置下边框
border-left	设置左边框
border-right	设置右边框

网页三角标制作

1. 元素设置宽高为0
2. 统一设置四个方向透明边框
3. 调整某个方向边框可见色

圆角边框

1. 属性：border-radius 指定圆角半径
2. 取值：像素值或百分比(50%)
3. 取值规律：

一个值 	表示统一设置上右下左
四个值 	表示分别设置上右下左
两个值 	表示分别设置上下 左右
三个值 	表示分别设置上右下，左右保持一致

<!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-UA-Compatible" content="ie=edge">
  <title>盒模型-边框</title>

  <style>
    div{
      width: 200px;
      height: 200px;
      /* 统一设置4条边 */
      border: 5px solid red;
      /* 单边设置 border-方位-样式 */
      /* border-bottom-width: 15px;
      border-right-color: blue;
      border-top: 10px dotted orangered; */

      /* border-radius: 10px; */
      /* border-radius: 50%   将矩形变成圆形 */
      /* 从左上角开始 顺时针方向赋值 如果没有值按照对角的值实现效果 */
      /* 取4个值时  左上  右上  右下  左下 */
      /* 取3个值时  左上  右上左下  右下 */
      /* 取2个值    左上右下  右上左下 */
      border-radius: 20px 100px;
    }
    p{
      /* 块元素默认宽度和父元素的宽度一致 */
      /* 默认 width: 100%;  width、height都为零，只剩下边框了，此时四个边框成立三角形 */
      width: 0;
      height: 0;
      /* transparent 透明色 */
      border: 50px solid transparent;
      border-top-color: red;
    }
  </style>
</head>
<body>
  <div></div>
  <!-- 三角形 -->
  <p></p>
</body>
</html>

练习

<!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-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    div{
      width: 108px;
      height: 44px;
      background-color: #4e6ef2;
      color: #fff;
      text-align: center;
      line-height: 44px;
      border-radius: 0 10px 10px 0;
    }
    div:hover{
      background-color: #4662d9;
      /* 指针变成小手 */
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 宽108px高44px 背景颜色#4e6ef2 字体颜色#fff 设置文本内容水平居中 垂直居中  设置圆角效果 -->

  <!-- 在浏览器中，文本内容默认在当前行内垂直居中，可以把当前行的高度设置成和当前元素的高度一致，让文本内容在当前元素的高度中垂直居中 -->

  <!-- 鼠标移入时背景颜色变成#4662d9 -->
  <div>百度一下</div>
</body>
</html>

内边距padding(不占用内容框)

作用：调整元素内容框与边框之间的距离

取值：

20px;					一个值表示统一设置上右下左
20px 30px;				两个值表示分别设置(上下) (左右)
20px 30px 40px;			三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px;	表示分别设置上右下左

单方向内边距,只能取一个值：

padding-top
padding-right
padding-bottom
padding-left

<!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-UA-Compatible" content="ie=edge">
  <title>内边距</title>
  <style>
    div{
      width: 200px;
      height: 100px;
      background-color: aquamarine;
      /* 内边距 调整内容和边框的距离 */
      /* padding: 20px; */
      /* padding: 20px 0 0 20px; 效果同下面两行 */
      padding-left: 20px;
      padding-top: 20px;
    }
  </style>
</head>
<body>
  <div>
    hello world
  </div>
</body>
</html>

外边距margin

作用：调整元素与元素之间的距离

特殊：

1）margin:0; 取消默认外边距  
2）margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中  
3）margin:-10px;元素位置的微调

单方向外边距：只取一个值

margin-top、margin-right、margin-bottom、margin-left

<!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-UA-Compatible" content="ie=edge">
  <title>外边距</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: red;
      /* margin: 20px; */
      /* 如果块元素设置宽度时不能填满整个父元素的宽度 浏览器默认使用外边距填充元素右侧的空间直到和父元素的宽度一致 
        可以设置左右自动外边距(下行) 使块元素在父元素中水平居中 */
      /* margin: 0 auto; */

      /* 浏览器显示页面元素样式时 会按照从上向下 从左向右的顺序加载元素样式 位于上方和左侧的元素样式会先确定 位于右侧和下方的元素样式后确定 */
      /* 设置上、左外边距时 当前元素的位置发生改变 设置右、下外边距时 其他元素的位置发生改变 */
      /* margin-top: 100px; */
      /* margin-bottom: 100px; */


      /* 外边距可以取负值 让元素发生堆叠 默认后显示的元素会盖住先显示的元素 */
      /* 内边距padding 取值最小为0 */
      /* margin-top: -100px; */
      /* margin-bottom: -100px; */
      /* 如果设置垂直方向相同的外边距时(a元素设置下外边距 b元素设置上外边距) 两个元素的外边距会合并 取最大值 */
      /* 如果设置水平方向的外边距时 外边距会累加计算 */
      /* margin-bottom: 50px; */
      display: inline-block;
      margin-right: 20px;

    }
    p{
      width: 300px;
      height: 300px;
      /* border: 5px solid blue; */
      background-color: blue;
      display: inline-block;
      margin-left: 40px;
    }
  </style>
</head>
<body>
  <!-- 外边距 调整当前元素和其他元素之间的距离 -->
  <div></div><p></p>
</body>
</html>

在这里插入图片描述

<!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-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    h3,p{
      margin: 0;
    }
    h3{
      font-weight: normal;
    }

    .parent{
      width: 180px;
      height: 186px;
      border: 1px solid red;
    }
    .parent>span{
      display: block;
      width: 32px;
      text-align: center;
      font-size: 14px;
      background-color: rgb(228, 72, 72);
      color: #fff;
    }
    .parent>p{
      text-align: center;
      color: #aaa;
      margin: 7px 0;
    }
    .parent>h3{
      margin-left: 42px;
    }
    .parent>div{
      /* 设置div的大小和内部图片大小一致 然后设置div水平居中 内部图片也就一同居中 */
      /* width: 89px;
      height: 95px;
      margin: 0 auto; */
      /* text-align让内容水平居中  所有的行内块元素默认都会被当做内容 */
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="parent">
    <span>低价</span>
    <h3>母婴馆</h3>
    <p>秒杀低至1元</p>
    <div>
      <img src="imgs/img01.png" alt="">
    </div>
  </div>
</body>
</html>

布局方式

标准流/静态流

默认布局方式,按照代码书写顺序及标签类型从上到下，从左到右依次显示

浮动布局float

主要用于设置块元素的水平排列，可取left或right，设置元素向左浮动或向右浮动

float:left/right;

特点：

元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位
元素设置浮动,就具有块元素的特征,可以手动调整宽高
“文字环绕”:浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示

常见问题

子元素全部设置浮动，导致父元素高度为0，影响父元素背景色和背景图片展示，影响页面布局

也有需要不受父元素展示的影响的（即覆盖父元素展示），如导航栏

解决方式

对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度，但受内容多少影响需要变化
在父元素的末尾添加空的块元素。设置clear:both; 清除浮动
**为父元素设置overflow:hidden（较多使用，布局时设定）; ** 解决高度为0

<!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-UA-Compatible" content="ie=edge">
  <title>float 浮动布局</title>
  <style>
    .parent>div{
      width: 200px;
      height: 200px;
    }
    .d1{
      background-color: red;
      float: left;
    }
    .d2{
      background-color: green;
      float: right;
    }
    .d3{
      background-color: blue;
      float: right;
    }
    /* 
      如果块元素设置浮动后 不在独占一行 大小由盒模型决定
      如果行内元素设置浮动后 可以设置宽高 支持全部的盒模型属性
    */      
    span{
      width: 200px;
      height: 200px;
      background-color: pink;
      float: right;
    }
    p{
      height: 300px;
      background-color: blueviolet;
    }
    .parent{
      /* width: 100%; */
      /* height: 200px; */
      overflow: hidden;
    }
    .lf{
      float: left;
    }
    .rf{
      float: right;
    }
    .clear{
      clear: both;
    }
  </style>
</head>
<body>
  <div class="parent">
      <div class="d1"></div>
      <div class="d2"></div>
      <div class="d3"></div>
      <span></span>
      <!-- <h3 class="clear"></h3> -->
  </div>
  <p></p>
</body>
</html>

练习实现效果
在这里插入图片描述

<!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-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    a{
      color: #222;
      text-decoration: none;
    }
    ul{
      margin: 0;
      padding: 0;
      /* 清除列表样式 */
      list-style: none;
      overflow: hidden;
    }
    li{
      float: left;
    }
    .first>a{
      color: #999;
    }
    .item{
      margin-left: 30px;
      padding: 0 5px;
    }
    .active{
      background-color: red;
      /* color: #fff; 无效，超链接本身的样式不能直接添加，使用下面的方式*/
    }
    .active>a{
      color: #fff;
    }
  </style>
</head>
<body>
  <!--  1、先设计样式，  ul>li*5>a   
        2、再做修改(结合浏览器调试查看相关的margin、padding等)，去掉不需要的点、下划线-->
  <ul>
    <li class="first"><a href="">难度：</a></li>
    <li class="item"><a href="">全部</a></li>
    <li class="item"><a href="">初级</a></li>
    <li class="item active"><a href="">中级</a></li>
    <li class="item"><a href="">高级</a></li>
  </ul>
</body>
</html>

练习
在这里插入图片描述

<!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-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div{
      width: 180px;
      height: 62px;
      background-color: black;
      color: rgb(246, 246, 161);
      font-size: 30px;
      font-family: monospace;
      text-align: center;
      line-height: 62px;
      border-radius: 31px;
      cursor: pointer;
    }
    div:hover{
      background-color: rgb(255, 55, 55);
      color: #fff;
    }
  </style>
</head>
<body>
  <div>PLUS会员</div>
</body>
</html>

定位布局position

结合偏移属性调整元素的显示位置，可取relative（相对定位）/absolute（绝对定位）/fixed（固定定位）

postion:relative/absolute/fixed/static

偏移属性

设置定位的元素可以使用偏移属性调整距离参照物的位置

top   	距参照物的顶部
right	距参照物的右侧
bottom	距参照物的底部
left	距参照物的左侧

relative 相对定位了解

元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流，原始位置保留

<!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-UA-Compatible" content="ie=edge">
  <title>relative 相对定位</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: aqua;
      /* 参照物  元素在页面中的原始位置 */
      /* 对页面元素位置的微调 */
      position: relative;
      /* 距离元素在页面中的原始位置左侧100px */
      left: 300px;
      top: 300px;

      /* left: 100px;
      top: 100px; */

      /* margin-left: 100px;
      margin-top: 100px; */

      /* bottom: -100px; */
    }
    p{
      width: 200px;
      height: 200px;
      background-color: chartreuse;
    }
  </style>
</head>
<body>
  <div></div>
  <p></p>
</body>
</html>

absolute 绝对定位

1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移
2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高

使用绝对定位 :
“父相子绝” : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移。eg：往图片上添加小图标

<!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-UA-Compatible" content="ie=edge">
  <title>absolute 绝对定位</title>
  <style>
    .parent{
      width: 300px;
      height: 300px;
      border: 5px solid red;
      margin: 0 auto; 
      /* 一般不单独使用，主要为后代元素的位置调整做参照物    注释下行，调试观察*/
      position: relative;
    }
    .parent>div{
      width: 100px;
      height: 100px;
      background-color: aqua;
      /* 参照物 距离最近的 已经定位的 祖先元素 没有参照物时参照窗口进行偏移 */
      position: absolute;
      top: 0;
      right: 0;
      /* top: 200px;
      left: 200px; */
    }
  </style>
</head>
<body>
  <div class="parent">
    <div></div>
  </div>
</body>
</html>

练习

在这里插入图片描述

<!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-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #cart{
      width: 150px;
      height: 40px;
      border: 1px solid #ccc;
      background-color: #eee;
      color: rgb(66, 65, 65);
      position: relative;
    }
    #cart>div{
      text-align: center;
      line-height: 40px;
    }
    #cart>span{
      position: absolute;
      right: 10px;
      top: 10px;
    }
    /* 设置宽18px高18px 背景颜色红色字体颜色白色 文本内容水平居中 垂直居中 取消加粗 设置左上右上右下圆角   */
    /* 设置绝对定位 定位到父元素右上角 调整距离 */
    #cart>b{
      position: absolute;
      top: -9px;
      right: 17px;
      
      width: 18px;
      height: 18px;
      background-color: rgb(194, 35, 35);
      color: #fff;
      text-align: center;
      line-height: 18px;
      font-weight: normal;
      border-radius: 50% 50% 50% 0;
      
    }

  </style>
</head>
<body>
  <div id="cart">
    <div>我的购物车</div>
    <span> &gt; </span>
    <!-- b标签 文字加粗 -->
    <b>1</b>
  </div>
</body>
</html>

练习
在这里插入图片描述

<!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-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div{
      position: relative;
      width: 240px;
      height: 132px;
      border: 1px solid red;
    }
    p{
      position: absolute;
      bottom: 0;
      margin: 0;
      background-color: rgba(255, 0, 0, 0.4);
      color: #fff;
      font-size: 12px;
      padding: 3px 0 3px 3px;
      width: 100%;
      /* box-sizing盒模型尺寸计算方式 */
      /* 默认取值 content-box  width/height属性只表示内容框的大小 */
      /* border-box  width/height属性表示包括边框在内的所有盒模型(内容+内边距+边框)属性的总体大小 当内边距和边框发生改变时 浏览器会自动调整内容的大小使总体大小保持不变 */
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div>
    <img src="imgs/img02.png" alt="">
    <p>三星再现关闭手机工厂风波</p>
  </div>
</body>
</html>

fixed 固定定位

  1. 参照窗口进行定位,不跟随网页滚动而滚动
  2. 脱离文档流

堆叠次序

元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：

属性 : z-index
取值 : 无单位的数值,数值越大,越靠上
堆叠：
1. 定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
2. 同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上

<!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-UA-Compatible" content="ie=edge">
  <title>fixed 固定定位</title>
  <style>
    div{
      position: fixed;
      bottom: 0;
      right: 0;
      width: 200px;
      height: 300px;
      background-color: red;
    /*注释掉下行，观察红色部分的堆叠覆盖效果 */
      z-index: 1;
    }
    p{
      height: 1000px;
    }
    .p1{
      background-color: aquamarine;
    }
    .p2{
      position: relative;
      background-color: bisque;
    }
    .p3{
      background-color: coral;
    }
  </style>
</head>
<body>
  <div></div>
  <p class="p1"></p>
  <p class="p2"></p>
  <p class="p3"></p>
</body>
</html>
  2. 同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上

```html
<!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-UA-Compatible" content="ie=edge">
  <title>fixed 固定定位</title>
  <style>
    div{
      position: fixed;
      bottom: 0;
      right: 0;
      width: 200px;
      height: 300px;
      background-color: red;
    /*注释掉下行，观察红色部分的堆叠覆盖效果 */
      z-index: 1;
    }
    p{
      height: 1000px;
    }
    .p1{
      background-color: aquamarine;
    }
    .p2{
      position: relative;
      background-color: bisque;
    }
    .p3{
      background-color: coral;
    }
  </style>
</head>
<body>
  <div></div>
  <p class="p1"></p>
  <p class="p2"></p>
  <p class="p3"></p>
</body>
</html>