CSS盒子模型与布局

最新推荐文章于 2024-09-15 21:53:51 发布

残云浸染红缨

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量980

点赞数 8

分类专栏：前端专栏文章标签： css 前端

本文链接：https://blog.csdn.net/m0_54412570/article/details/140107482

版权

前端专栏专栏收录该内容

10 篇文章 0 订阅

订阅专栏

元素的显示模式

块元素（块级元素）（block）

在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
默认宽度：撑满父元素。
默认高度：由内容撑开。
可以设置宽高。

主体结构标签	<html>、<body>
排版标签	<h1>-<h6>、<hr>、<p>、<pre>、<div>
列表标签	<ul>、<ol>、<li>、<dl>、<dt>、<dd>
表格相关标签	<table>、<tbody>、<thead>,、<tfoot>、<tr>、<caption>
	<form>与<option>

行内元素（内联元素）（inline）

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
无法设置宽高。

文本标签	<br>、<em>、<strong>、<sup>、<sub>、<del>、<ins>
	<a> 、<label>

行内块元素（内联块元素）（inline-block）

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列，
默认宽度：由内容撑开，
默认高度：由内容撑开，
可以设置宽高。

图片	<img>
单元格	<td>、<th>
表单控件	<input>、<textarea>、<select>、<button>
框架标签	<iframe

修改元素显示模式

元素 display 属性可以修改元素的显示模式
- none 元素会被隐藏
- block 元素将作为块级元素显示
- inline 元素将作为内联元素显示
- inline-block 元素将作为行内块元素显示

盒子的组成部分

CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子。
margin（外边距）：盒子与外界的距离。
- margin-top 上外边距
- margin-right 右外边距
- margin-bottom 下外边距
- margin-left 左外边距
- 子元素的margin,是参考父元素的content计算的
- margin-top、margin-left 影响自己的位置
- margin-bottom、margin-right 影响后面兄弟元素的位置，
- 块级元素、行内块元素，均可以完美地设置四个方向
- 但行内元素，左右margin可以完美设置，上下margin设置无效
- margin的值也可以是auto,该块级元素会在父元素中居中
- margin的值可以是负值
border（边框）：盒子的边框。
- border-width 边框宽度
- border-color 边框颜色
- border-style 边框风格
  - none默认值
  - solid实线
  - dashed线
  - dotted点线
  - double双实线
  - border 边框复合属性
- 单独设置某一边框 ，如 border-left-width 在中间加入方位词（left、right、top、bottom）
padding（内边距）：紧贴内容的补白区域。
- padding-top 上内边距
- padding-right 右内边距
- padding-bottom 下内边距
- padding-left 左内边距
- padding 复合属性可以设置1~4个值
  - padding:18px 四个方向内边距都是18px。
  - padding:18px 28px 上下18px,左右28px。(上下、左右)
  - padding:10px 20px 30px 上10px,左右20px,下30px,(上、左右、下)
  - padding:18px 20px 30px 40px 上10px,右20px,下30p×x左40px.(上、右、下、左)
- padding的值不能为负数
- 行内元素的左右内边距是没问题的，上下内边距不能完美的设置
- 块级元素、行内块元素，四个方向内边距都可以完美设置
content（内容）：元素中的文本或后代元素都是它的内容。
- width 设置内容区域宽度
- max-width 设置内容区域的最大宽度
- min-width 设置内容区域的最小宽度
- height 设置内容区域的高度
- max-height 设置内容区域的最大高度
- min-height 设置内容区域的最小高度

margin塌陷

第一个子元素的上margin会作用在父元素上，最后一个子元素呼下margin会用在父元素上
解决方案：
- 方案一：给父元素设置不为0的padding
- 方案二：给父元素设置宽度不为0的border
- 方案三：给父元素设置css样式overflow:hidden

margin合并

上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取最大的值，而不是相加
无需解决，布局的时候上下的兄第元素，只给一个设置上下外边距就可以了。

处理内容content溢出

overflow 溢出内容的处理方式
overflow-x 水平方向溢出内容的处理方式
overflow-y 重直方向溢出内容拾的处理方式
- visible: 显示，默认值
- hidden: 隐藏
- scroll：显示滚动条，不论内容是否溢出
- àuto: 自动显示滚动条，内容不溢出不显示
overflow除了能处理溢出的显示方式，还可以解决很多疑滩杂症

隐藏元素

方式一：visibility属佳
- show 默认值
- hidden 元素隐藏，还占有原来的位置（元素的大小依然保持），
方式二：display属性
- none 元素彻底隐藏。不但看不见，也不占用任何位置，没有大小宽高。

样式继承

有些样式会继承（能继承的属性，都是不影响布局的，都是和盒子模型没关系的）
元素如果本身设置了某个样式，就使用本身设置的样式
如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）

布局

居中

行内元素、行内块元素，可以被父元素当做文本处理
让子元素，在父亲中水平居中：
- 若子元素为块元素，给父元素加上：margin:0 auto;.
- 若子元素为行内元素、行内块元素，给父元素加上：text-align:center；
让子元素，在父亲中垂直居中：
- 若子元素为块元素
  - 给子元素加上：margin-top ，值为：(父元素content-子元素盒子总高)/2
- 若子元素为行内元素、行内块元素：
  - 让父元素的height=line-height
  - 每个子元素都加上：vertical-align:middle
  - 若想绝对垂直居中，父元素font-size设置为0

空白

元素间：
- 行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
- 给父元素设置font-size:0,再给需要显示文字的元素，单独设置字体大小。
行内块：
- 行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
- 解决方案：
  - 方案一：给行内块设置vertical值不为baseline，设置为middel、bottom、top均可
  - 方案二：若父元素中只有一张图片，设置图片为display: block
  - 方案三：给父元素设置font-size:8 ，该行内块内部单独设置font-size

浮动（Float）

浮动，会使元素向左或向右移动，其周围的元素也会重新排列。
浮动，往往是用于图像，但它在布局时一样非常有用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title>
<style>
.img1 
{
	float:right;
}
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
<p>在下面的段落中，添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img class="img1" src="logo.jpg" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>

<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>

</html>

特点：
- 脱离文档流
- 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开，而且可以设置宽高
- 不会独占一行，可以与其他元素共用一行
- 不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding
- 不会像行内块一样被当做文本处理（没有行内块的空白问题）
影响：
- 对兄弟元素的影响：
  - 后而的兄弟元素会占据浮动元素之前的位置，在浮动元素的下面
  - 对前面的况弟无影响
- 对父元素的影响：
  - 不能撑父元素的高度，导数父元素高度塌箱
  - 但父元素的宽度依然束博浮动的元素
解决影响（清除浮动）
- 方案一：给父元素指定高度
- 方案二：给父元素也设置浮动（会带来其他影响）
- 方案三：给父元素设置overflow:hidden
- 方案四：在所有浮动元素的是后面，添加一个块级元素，并给该块级元素设置clear:both
- 方案五：给浮功元素的父元素，设置伪元素，通过伪元青除浮动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>方案四</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
.text_line
{
	clear:both;
	margin-bottom:2px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>方案四</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
.outer::after
{
    content:"";
    display:block;
    clear:both;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<div class="outer">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</div>

</body>
</html>

定位

相对定位

给元素设置position:relative可实现相对定位
可以使用left、right、top、bottom四个属性调整位置
参考点相对自己原来的位置
特点：
- 不会脱离文档流，元嘉位置的变化，只是视觉上的变化，不会对其他元素产生任何影响
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
  - 默认规则是：
    - 定位的元素会盖在普通元素之上
    - 都发生定位的两个元素，后写的元素会盖在先写的元素之上
- left不能和right一起设置，top不能和bottom一起设置
- 相对定位的元素，也能维续浮动，但不推荐这样做。
- 相对行为的元素，也能通过margin调整位置，但不推荐这样做。

绝对定位

给元素设置position:absolute即可实现绝对定位
可以使用left、right、top、bottom四个属性调整位置
参考点：参考它的包含块。
- 对于没有脱离文档流的元素：包含块就是父元素
- 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）
特点：
脱离文档流，会对后面的兄弟元素、父元素有影响
left不能和right一起设置，top不能和bottom一起设置
绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主
绝对定位的元素，也能通过margin调整位置，但不推荐这样做
无论是什么元素(行内、行内块、块级)设置为绝对定位之后，都变成了定位元素
- 定位元素：默认宽高都由内容撑开，且能自由设置宽高

固定定位

给元素设置position:fixed即可实现固定定位
可以使用left、right、top、bottom四个属性调整位置
参考点：参考它的视口
- 对于PC浏览器来说，视口就是我们看网页的那扇“窗户”
特点
脱离文档流，会对后面的兄弟元素、父元素有影响
left不能和right一起设置，top不能和bottom一起设置
固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主
固定定位的元素，也能通过margin调整位置，但不推荐这样做。
无论是什么元素(行内、行内块、块级)设置为固定定位之后，都变成了定位元素。

粘性定位

给元素设置position:sticky即可实现粘性定位。
可以使用left、right、top、bottom四个属性调整位置
参考点：
- 离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先
特点
不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式
最常用的值是top值
粘性定位和浮动可以同时设置，但不推荐这样做
粘性定位的元素，也能通过margin调整位置，但不准荐这样做
粘性定位和相对定位的特点基本一致，不同：粘性定位可以在元素到达某个位置时将其固定

定位元素的特殊应用

让定位元素的宽充满包含块
- 块宽与包含块一致：给定位元素同时设置left和right为0
- 高度与包含块一致：top和bottom设置为0
让定位元素在包含块中居中
- 该定位元素必须定义宽、高
- 方案一：left:0; right:0; top:0; bottom:0; margin:auto;
- ·方案二：left:50%; top:50%; margin-left:负的宽度一半; margin-top:负的高度一半;