03-float浮动属性和盒模型

jujujp

已于 2022-04-02 08:47:34 修改

阅读量668

点赞数

于 2022-04-01 13:45:49 首次发布

本文链接：https://blog.csdn.net/qq_58069093/article/details/123895638

版权

一、css+html基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、padding属性的使用:内边距(填充、补白)

1、盒模型的组成部分是content、padding、border、margin

2、内外边距的总结

3、固定用法

一、浮动属性的使用

1、属性

float 使..浮动、使..漂浮

2、属性值

- left

- right

- none

3、特点

- 浮动只能控制元素在水平方向上移动

- 浮动会使元素脱离文档流元素的初始位置不存在当前元素会漂浮在浏览器的上方

- 浮动是会破坏初始的布局方式

- 浮动的停止条件

- 当元素浮动的时候碰到父级的包含框就会停止浮动

- 当多个元素浮动的时候默认是左右排列 => 浮动属性碰到前面含有浮动属性的元素也会停止浮动

- 当子级元素大于父级元素宽度的时候最后一个子级元素会往下移动直至找到足够的空间

4、流

- 普通流/文档流网页的正常布局从上到下从左到右

- 浮动流

- 定位流

<style>
    .box {
      width: 500px;
      height: 500px;
      background-color: pink;
    }
    .box1 {
      width: 200px;
      height: 200px;
      background-color: rgb(226, 19, 53);
      float: left;
    }
    .box2 {
      width: 150px;
      height: 150px;
      background-color: green;
      float: left;
    }
    .box3 {
      width: 100px;
      height: 100px;
      background-color: purple;
      float: left;
    }
</style>
</head>
<body>
  <!-- 快捷键   div.box -->
  <div class="box">
    <div class="box1">制作</div>
    <div class="box2">666</div>
    <div class="box3">888</div>
  </div>
</body>

5、文本图片环绕效果

浮动的特殊情况:文本图片的环绕效果

- 浮动会使元素脱离文档流下面的元素就会被上面的覆盖

- 但是！文本是一个特殊的结构(真实的dom结构) 不会被浮动元素盖住

- 浮动元素只会盖住盒子大小

<style>
    div {
      width: 800px;
      height: 600px;
      background-color: pink;
    }
    img {
      width: 300px;
      height: 400px;
      float: left;
    }
</style>
</head>
<body>
  <div>
    <img src="https://img1.baidu.com/it/u=1428889552,2927850461&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=500" alt="">
    <p>王嘉尔（Jackson
      Wang/잭슨），1994年3月28日出生于香港，中国香港流行乐男歌手、音乐人、主持人、设计师、创意总监。王嘉尔12岁参加全运会，获得人生第一枚击剑金牌；在个人运动生涯中拿下三枚亚洲冠军、三枚全国冠军、九枚国际和香港冠军。2014年以GOT7成员的身份出道；同年获得SBS演艺大赏综艺部门男子新人奖。2015年与何炅搭档主持脱口秀节目《拜托了冰箱》。2016年与何炅搭档主持综
    </p>
  </div>
</body>

二、盒模型的概念

之前学习html 用来布局 css美化页面浮动解决元素的位置多个元素之间的间距要怎么设置？

盒模型概念：设置元素与元素之间的间距

组成部分

- content 内容区域对应快递模型中的快递物品

- padding 内边距对应快递模型中的快递物品和快递盒之间的填充物

- border 边框对应快递模型中的快递盒

- margin 外边距对应快递模型中的快递物品的间距

三、padding内边距的使用

1、padding属性的使用:内边距(填充、补白)

- 从快递模型中得出padding内边距设置父级元素与子级元素之间的间距

- padding内边距通常是给父级元素设置的

- padding内边距会将当前的元素撑大,为了不影响布局需要在宽高上减去相应的padding值

- padding也可以在子级元素上添加依然会撑大当前元素的宽高大小

2、padding方向值

- padding:一个属性值表示上下左右

- padding:两个属性值表示上下和左右

- padding:三个属性值表示上和左右和下

- padding:四个属性值表示上右下左

padding方向值还可以使用padding-方向即可

- padding-left/top/right/bottom

3、总结

- padding可以给父级添加也可以给子级添加

- 父级:所有子级位置间距都是相同的时候

- 子级:每个子级之间的间距都是不一样的

思考:padding可不可以使用负值? 不可以接负值


<style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
      padding: 50px;
      /* 宽度：padding的左侧和右侧 50+50px
      高度：padding的上和下 50+50px */
    }
    p {
      width: 100px;
      height: 100px;
      background-color: green;
    }
    .p1 {
      padding-left: 100px;
    }
    .p2 {
      padding-left: 50px;
    }
</style>
</head>
<body>
  <div>
    <!-- 快递盒 -->
    <p class="p1">小小1</p>
    <p class="p2">小小2</p>
  </div>
</body>

四、margin外边距的使用

1、margin外边距的使用

- margin在快递模型中对应的是多个快递之间的位置关系

- margin通常是用来设置同级元素之间的位置间距

- 哪个元素需要设置间距就给当前元素添加margin外边距即可

- margin不会将当前元素的宽高大小撑大不用减去相应的margin

2、margin方向值

- margin:一个属性值表示上下左右

- margin:两个属性值表示上下和左右

- margin:三个属性值表示上和左右和下

- margin:四个属性值表示上右下左

margin方向值还可以使用margin-方向即可 - margin-left/top/right/bottom

3、思考:

- 内外边距可不可以换着用?

- margin可不可以接负值? 可以

4、margin的常见bug

- 在父级元素下只有一个子级元素给子级元素设置margin-top会错误解析到父级元素

- padding替代margin

- 给父级添加边框属性(还没学习)

- 文本溢出属性: overflow:hidden

- 两个同级元素设置margin-top/bottom 之间会取最大值


<style>
    .p1 {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .p2 {
      width: 200px;
      height: 200px;
      background-color: green;
      margin-top: 100px;
    }
</style>
</head>
<body>
  <!-- div[class="box$"]*2{第$个盒子} -->
  <div class="p1">第1个盒子</div>
  <div class="p2">第2个盒子</div>
</body>