CSS学习

最新推荐文章于 2022-10-13 11:08:50 发布

陈童学-

最新推荐文章于 2022-10-13 11:08:50 发布

阅读量98

点赞数

分类专栏：《前端进击笔记》学习笔记文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_46100995/article/details/125952408

版权

《前端进击笔记》学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS

一、课前小问题：

一个元素总宽高为50px，要怎么在调整边框大小的时候，不需要重新计算和设置width/height呢？
为什么给一些元素设置宽高，但是却不失效？
如何将一个元素固定在页面的某个位置，具体怎么做？
为什么将某个元素z-index设置为9999999，但是它依然被其他元素遮挡住了呢？
为什么将某个元素里面的元素设置为float之后，这个元素的高度就歪了呢？
让一个元素进行垂直和水平居中，有多少种实现方式？

二、页面布局的基本规则

盒模型计算
内联元素与块状元素布局规则
文档流布局
元素堆叠

1、盒模型计算

1.1 CSS基础盒模型（content-box）：

外边框边界margin（橙色部分）
边框边界border（黄色部分）
内边距边界padding（绿色部分）
内容边界content（蓝色部分）

在这里插入图片描述

盒模型会发生margin外边距叠加，叠加后的值会以最大边距为准。（原因与解决办法，书中没说）

行内框、浮动框或绝对定位框之间的外边距不会叠加。

1.2 怪异盒模型（border-box）

使用box-sizing属性可以解决问题1（调整元素的边框时，不影响元素的宽高），将元素的box-sizing属性设置为border-box。

<style>
.box-model-sample {
  height: 50px;
  margin: 10px;
  padding: 5px;
  border: solid 2px #000;
}
.border-box {
  box-sizing: border-box;
}
</style>
<div class="box-model-sample">这是一个div(content-box)</div>
<div class="box-model-sample border-box">这是另一个div(border-box)</div>

对于默认content-box的元素来说，元素所占的总宽高为设置的元素宽高（width/height）等于：content+padding+border，因此元素总高度为50+5*2+2*2=64px。

在这里插入图片描述

当我们设置为border-box后，元素高度为50px。
在这里插入图片描述

1.3 小结：

利用怪异盒模型，我们可以精确地控制元素地空间占位，同时还能灵活地调整元素边框和内边距。（问题1）

2、内联元素与块状元素

常见的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>
常见的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<dl>、<table>、<form>
常见的内联块状元素有：<img>、<input>

2.1 内联元素与块状元素的主要区别：

内联元素可以和其他内联元素位于同一行，且宽高设置无效（问题2）
块状元素不可和其他元素位于同一行，且宽高设置有效

2.2 通过设置`display`的值对元素进行调整

设置为block块状元素，此时可以设置宽高
设置为inline内联元素，此时宽高不起作用
设置为inline-block，可以理解为块状元素和内联元素的结合，布局规则包括：
- 位于块状元素或者其他内联元素内
- 可容纳其他块状元素或内联元素
- 宽高均可设置

3、文档流和元素定位

什么是文档流？正常的文档流在 HTML 里面为从上到下，从左到右的排版布局。

文档流布局方式可以使用position样式进行调整，包括：static(默认)、inherit(继承父元素)、relative(相对定位)、absolute(相对非static父元素绝对定位)、fixed(相对浏览器窗口进行绝对定位)。（书中少了sticky(粘性定位)）

3.1 元素`position`样式属性值为`static`(默认值)时，元素会忽略`top`、`bottom`、`left`、`right`或者`z-index`声明。

<style>
a, p, div {
  border: solid 1px red;
}
.static {
  position: static;
  left: 100px;
  top: 100px;
}
</style>
<h3>默认流：position=static</h3>
<a>a1</a><a>a2</a><a>a3</a>
<p>p1</p><p>p2</p><p>p3</p>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<hr>
<h3>普通流：position=static，left=100px，top=100px</h3>
<a class="static">a1</a>
<a class="static">a2</a>
<a class="static">a3</a>
<p class="static">p1</p>
<p class="static">p2</p>
<p class="static">p3</p>
<div class="static">div1</div>
<div class="static">div2</div>
<div class="static">div3</div>

在这里插入图片描述

3.2 元素`position`样式属性值为`relative`时，元素会保持原有文档流，但相对本身的原始位置会发生位移，且会占空间。

<style>
a, p, div {
  border: solid 1px red;
}
.relative {
  position: relative;
  left: 100px;
  top: 100px;
}
</style>
<h3>默认流：position=relative</h3>
<a>a1</a><a>a2</a><a>a3</a>
<p>p1</p><p>p2</p><p>p3</p>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<hr>
<h3>普通流：position=relative，left=100px，top=100px</h3>
<a class="relative">a1</a>
<a class="relative">a2</a>
<a class="relative">a3</a>
<p class="relative">p1</p>
<p class="relative">p2</p>
<p class="relative">p3</p>
<div class="relative">div1</div>
<div class="relative">div2</div>
<div class="relative">div3</div>

在这里插入图片描述

这里有个需要注意的点：relative元素占位会溢出父元素，撑开整个页面。

<style>
div {
  border: solid 1px aqua;
}
.relative {
  position: relative;
  left: 30px;
  border: solid 1px red;
}
</style>
<div class="father">
	<div>position=static</div>
	<div class="relative">position=relative,left=30px</div>
	<div>position=static</div>
</div>

在这里插入图片描述

此时给父元素设置overflow:hidden，可以隐藏溢出部分。

在这里插入图片描述

3.3 元素`position`样式属性值为`absolute`、且设置了定位(`top/bottom/left/right`)时，元素会脱离文档流，相对于其包含块来定位发，且不会占空间。

<style>
.father {
  width: 300px;
  border: solid 1px blue;
}
.father > div {
  border: solid 1px red;
  height: 100px;
  width: 300px;
}
.absolute {
  position: absolute;
  left: 320px;
  height: 100px;
  border: solid 1px red;
}
</style>
<div class="father">
	<div>position=static</div>
	<div class="absolute">position=absolute,left=320px</div>
	<div>position=static</div>
</div>

在这里插入图片描述

3.4 元素`position`样式属性值为`fixed`时，元素脱离文档流、且不占位，此时看上去与`absolute`相似。但当我们进行页面滚动的时候，会发现`fixed`元素位置没有发生变化。

在这里插入图片描述

这是因为fixed元素相对于浏览器窗口进行定位，而absolute元素只有在满足“无static定位以外的父元素”的时候，才会相对于document进行定位。（问题3）

4、元素堆叠 z-index

元素的堆叠方式和顺序，除了与position定位有关，也与z-index有关。

当同级元素不设置z-index或者z-index相等时，后面的元素会叠加在前面的元素上方
当同级元素z-index不同时，大的会叠在上面
不过，除了同级元素外，z-index值的设置效果还会受到父元素的z-index的影响（问题4）

5、常用页面布局方式

传统布局方式
Flex 布局方式
Grid 布局方式

5.1 传统布局（`display`+`position`+`float`+边距+x/y轴距离）

float属性和position:fixed/absolute一样，都会使元素脱离文档流（问题5）进行左右浮动

在这种情况下，如何避免父元素高度塌陷：

父元素使用overflow:hidden（此时高度为auto）
使父元素也成为浮动float元素
使用clear清除浮动

这些方法都是与 BFC 的特性有关，BFC 是 WEB 页面可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

5.2 使用 Flex 布局

Flex 布局是一种一维的布局模式。

flexbox 的两跟轴线。其中，主轴由flex-direction定义，交叉轴则垂直于主轴
在 flexbox 中，使用起始和终止来描述布局方向
认识 flex 容器和 flex 元素

Flex 布局常用的方式

通过flex-direction调整 Flex 元素的排列方向（主轴方向）
用flex-wrap实现多行 Flex 容器如何换行
使用justify-content调整 Flex 元素在主轴上的对齐方式
使用align-items调整 Flex 元素在交叉轴上如何对齐
使用align-content调整多跟轴线的对齐方式

Flex 布局实现垂直和水平居中

display:flex
align-items:center
justify-content:center

5.3 Grid 布局

Grid 布局是一种二维布局，又称为网格布局，它将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系

实现网页的响应式布局
实现灵活的 12 列布局（类似 Boostrap 的 CSS 布局方式）
与其他布局方式结合，与 css 其他部分协同合作

Grid 布局适用于较大规模的布局，Flex 布局适合页面中的组件和较小规模布局

6、小结

遗留了问题 6 没有给出具体答案：让一个元素进行垂直和水平居中，有多少种实现方式？

陈童学-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习

这些方法都是与BFC的特性有关，BFC是WEB页面可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。Grid布局是一种二维布局，又称为网格布局，它将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。利用怪异盒模型，我们可以精确地控制元素地空间占位，同时还能灵活地调整元素边框和内边距。Grid布局适用于较大规模的布局，Flex布局适合页面中的组件和较小规模布局。属性可以解决问题1（调整元素的边框时，不影响元素的宽高），将元素的。...
复制链接

扫一扫