2-2CSS概念-文档流

最新推荐文章于 2024-07-25 16:45:46 发布

一生注定学霸命

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量122

点赞数

分类专栏： HTML与CSS基础文章标签： css

本文链接：https://blog.csdn.net/qq_40282016/article/details/115425589

版权

HTML与CSS基础专栏收录该内容

12 篇文章 2 订阅

订阅专栏

重要概念

文档流 Normal Flow
块内联内联块
margin合并
两个盒模型

文档流

文档流指的是文档中元素的流动方向。

1.流动方向——从左到右，从上到下

内联元素（如span、inline元素）从左往右排列，排满另起一行，内联元素跳行时，最后一个元素会被拆分成两段
block元素（如div）从上到下排列，每个元素占一行，div元素一个占一行，就算限定了宽度也不会靠拢
div元素限定宽度:

<div style="width: 100px;">第n个div元素</div>

inline-block元素从左到右，跳行元素不拆分，一定是成块的，不会跨行。

注意：元素不去区分内联和block，因为可以随时通过display改变其样式。（是因为默认会添加样式）

.ib{
border: 1px solid red;
display: inline-block;/*改变其性质为inline-block元素*/
}

2.宽度

内联元素宽度为内部内联元素的和，不能由width指定。
注意：不要在display为inline的元素里加上display为block的元素。

  错误写法：
  <span>第一个
    <div>hi</div>/*在inline中添加block元素，会导致格式错乱*/
    span元素
  </span>

块级元素默认占满全行，可以用width指定。（注意占满全行是默认自动，不是100%，是最大100%，可能会有边缘限制，margin或border）
除了特殊情况，不要写宽度100%。

  <div style="margin:20px;width: auto;">第一个div元素</div>

在这里插入图片描述

inline-block元素宽度为内部元素宽度的和，但可以用 width 设置宽度。

3.高度

inline元素高度由line-height（行高）间接确定（可能由字体改变），和height无关。

span{
  border: 1px solid red;
  height: 100px;/*不用，没有反应，则span与height无关*/
  padding: 10px 20px;/*padding不改变的行高，只改变可见高度*/
  line-height: 100px;/*行高，span的实际高度*/
}

block高度由内部文档流元素（有些元素可以脱离文档流，脱离后就包不住）确定，可以设置height。

  <div>第一个div元素第一个div元素第一个div元素第一个div元素第一个div元素第一个div元素第一个div元素第一个div元素
  <div style="position: absolute;">脱离文档流</div>
  /*position: absolute表示脱离文档流*/
  其他文字其他文字其他文字其他文字其他文字/*会被脱离文档流挡住*/
  </div>

inline-block会包住所有元素，可以设置高度。（高度方面inline-block和block一样）

4.溢出 overflow
当内容的宽度或者高度大于容器的范围（设置了height或width）时，会出现溢出。
解决方法：
overflow来设置是否显示滚动条

auto是灵活设置
scroll是永远显示
hidden是直接隐藏溢出部分
visible直接显示溢出部分
overflow可以分为overflow-x和overflow-y（不常用）

.div1{
  border:1px solid red;
  height: 200px;/*设置了行高*/
  /*overflow*/
  overflow: visibe;/*默认，超出部分可见*/
  overflow: hidden;/*超出部分不可见，不可滚动*/
  overflow: scroll;/*有bug，超出部分滚动可见，不超出时也有滚动条*/
  overflow: auto;/*超出显示滚动条，不超出不显示*/
}

记忆:
div里没有内容，高度为0；
span中没有内容，高度为行高；
存在横向滚动条时，内联元素只默认存在第一屏。

5.脱离文档流
添加span元素脱离文档流
脱离了文档流所在容器就不把该元素算在高度中

<body>
<div class="div1">
  <div class="div2"><span>你好</span></div>
</div>
</body>

方法一：position: absolute/fixed

.div1{
  border:1px solid red;
}
.div2{
  border:1px solid green;
}
span{
  position: absolute;/*脱离文档流*/
}

方法二：float: left或者right

.div1{
  border:1px solid red;
}
.div2{
  border:1px solid green;
}
span{
  float: left;/*right两个都可以*/
}

一生注定学霸命

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2-2CSS概念-文档流

重要概念文档流 Normal Flow块内联内联块margin合并两个何莫修文档流文档流指的是文档中元素的流动方向。1.流动方向——从左到右，从上到下内联元素（如span、inline元素）从左往右排列，排满另起一行，内联元素跳行时，最后一个元素会被拆分成两段block元素（如div）从上到下排列，每个元素占一行，div元素一个占一行，就算限定了宽度也不会靠拢div元素限定宽度:<div style="width: 100px;">第n个div元素</di
复制链接

扫一扫

专栏目录