CSS基础知识02

咔咔库奇
38 阅读14分钟

​

一、盒模型

1.1.盒模型的组成部分

由内到外：内容区域、内边距、边框、外边距

​编辑

网页图：position定位

​编辑

属性
内边距padding:0 0 0 0;上 右 下 左padding：0 0； 上下   左右
padding-top   上
padding-left 左
padding-bottom 下
padding-right 右
属性属性值
边框border:边框宽度 边框类型 边框颜色（简写）
border-width可以是具体的长度单位（如px、em、rem、%等），或者是相对单位（如thin、medium、thick）如：2px
border-stylesolid（实线）、dotted（点线）、dashed（虚线）、double（双线）、groove（3D凹槽）、ridge（3D垄状）、inset（3D内嵌）、outset（3D外嵌）以及none（无边框）和hidden（隐藏边框，但hidden值在表格上与其他元素不同，它用于解决表格边框的冲突）。
border-color可以是颜色名称（如red、blue）、十六进制颜色值（如#ff0000、#0000ff）、RGB函数（如rgb(255, 0, 0)）、RGBA函数（如rgba(255, 0, 0, 0.5)）或HSL函数（如hsl(0, 100%, 50%)）等
border-radius设置边框圆角，可以是像素px或者百分比%
border-image允许使用图像作为边框的样式，为元素定义图像边框，非常适合创建复杂的视觉效果。

margin 外边距 容器与页面或者容器与容器之间的距离

margin:20px 0 0 0; 上 右 下 左

margin: 20px 0; 上下 左右

margin: 20px; 上下左右

margin-top: 30px;margin-bottom:0 ;

margin-left: 30px;margin-right: 0;

margin: 0 auto;

auto 自动计算在可用空间里 左右边距距离相等

同级margin塌陷，

如果上面的盒子和下面的盒子外边距相遇，则取最大值，不是相加

父子之间 margin塌陷

父元素的第一个子元素的上边距 如果碰不上有效的border 或者padding 就会不断一层一层的向外影响父级元素，父级的父级等

解决方案：

1、设置有效的padding 或者 border

2、overflow:hidden

关于塌陷问题的详细说明会在【css问题】中描述

1.2.盒模型的两种计算方式

盒模型：

盒子是用来存放文本或图片的，而页面又是由盒子堆叠起来的

盒模型就是我们网页设计当中 常用到的一个思维模型

标准盒模型= margin(外边距)+border(边框)+padding(内边距) + 内容 组成的

标准盒模型

真实容器宽度 = 左边框+左内边距+内容+右内边距+右边框

真实容器高度 = 上边框+上内边距+内容+下内边距+下边框

怪异盒模型(IE盒模型)

真实容器宽高 = width 设置多少就是多少

总宽度 = 设置的宽度（包含内容、内边距和边框） + 左外边距 + 右外边距；

总高度 = 设置的高度（包含内容、内边距和边框） + 上外边距 + 下外边距。

box-sizing:content-box 标准盒模型(默认)

通过box-sizing:border-box 来使用 IE盒模型

浏览器会帮我们将边框和内边距自动减去，使容器宽高不变

1.3.盒模型的其他特性

外边距合并（Margin Collapsing）

当两个垂直方向相邻的盒子的外边距相遇时，它们会合并为一个外边距。

合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。

需要注意的是，只有普通文档流中块级元素的外边距才会发生合并。行内元素、浮动元素或绝对定位元素之间的外边距不会合并。

内边距和外边距的区别

内边距是内容区域与边框之间的空间，它会使盒子变大。

外边距是边框外的空间，它用于在盒子之间创建距离，但不会使盒子本身变大。

边框的样式和颜色

边框的样式可以是实线、虚线、点线、双线等。

边框的颜色可以是任意颜色，包括纯色、渐变色等。

边框的宽度可以是绝对单位（如像素）或相对单位（如百分比）。

二、背景图和精灵图

背景图

背景图是通过CSS的background-image属性来设置的。你可以为HTML元素指定一个图像文件作为背景，并控制其位置、大小、重复方式等。

.element {
  background-image: url('path/to/your/image.jpg');
  background-size: cover; /* 使背景图覆盖整个元素 */
  background-position: center; /* 将背景图居中 */
  background-repeat: no-repeat; /* 不重复背景图 */
}

精灵图（雪碧图）

精灵图是一种将多个小图像合并成一个大图像的技术，然后通过CSS的background-position属性来显示所需的部分。这种方法减少了HTTP请求的数量，从而提高了网页的加载速度。

使用精灵图时，你需要创建一个包含所有小图像的大图像文件，并在CSS中设置正确的背景位置来显示所需的部分。

.icon {
  width: 50px; /* 图标宽度 */
  height: 50px; /* 图标高度 */
  background-image: url('path/to/your/sprite.png'); /* 精灵图路径 */
  background-repeat: no-repeat; /* 不重复背景图 */
}

.icon-home {
  background-position: 0 0; /* 显示精灵图中(0,0)位置的小图像 */
}

.icon-search {
  background-position: -50px 0; /* 显示精灵图中(-50,0)位置的小图像，假设每个图标宽度为50px */
}

/* 以此类推，为每个小图像设置正确的背景位置 */

三、版心布局、浮动和伪类元素

3.1.版心布局

3.1.1版心

版心 指的是 页面布局中 外面最大的盒子

 比较常见的版心 1200px 或者填充整个浏览器的宽度

3.1.2布局

案例1一列固定宽度且居中
<html>
<head>
<style>
/* 初始化所有元素的内外边距为0 */
*{padding:0;margin:0;}
/* 设置top, banner, main, footer的宽度，并使其水平居中 */
.top, .banner, .main, .footer{width:960px;margin:10px auto;text-align:center;}
/* 分别设置top, banner, main, footer的高度和背景色 */
.top{height:100px;background-color:pink;}
.banner{height:120px;background-color:skyblue;}
.main{height:500px;background-color:red;}
.footer{height:150px;background-color:#ccc;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>

案例2：两列左窄右宽
<html>
<head>
<style>
/* 初始化所有元素的内外边距为0 */
*{padding:0;margin:0;}
/* 设置top, banner, main, footer的宽度，并使其水平居中 */
.top, .banner, .main, .footer{width:960px;margin:10px auto;text-align:center;}
/* 分别设置top, banner, footer的高度和背景色 */
.top{height:100px;background-color:pink;}
.banner{height:120px;background-color:skyblue;}
.footer{height:150px;background-color:#ccc;}
/* 设置main部分的左右两列，左列宽度360px，右列宽度590px，并设置背景色 */
.main .left{width:360px;height:500px;float:left;background-color:white;}
.main .right{width:590px;height:500px;margin-left:10px;float:left;background-color:white;}
/* 设置main部分的高度和背景色 */
.main{height:500px;background-color:red;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>

案例3：通栏平均分布
<html>
<head>
<style>
/* 初始化所有元素的内外边距为0 */
*{padding:0;margin:0;}
/* 去除ul的默认列表样式 */
ul{list-style:none;}
/* 设置top, banner, main, footer的宽度，并使其水平居中 */
.top, .banner, .main, .footer{width:960px;margin:10px auto;text-align:center;}
/* 分别设置top, banner, main, footer的高度和背景色 */
.top{height:100px;background-color:pink;}
.banner{height:120px;background-color:skyblue;}
.main{height:500px;background-color:red;}
.footer{height:150px;background-color:#ccc;}
/* 设置main部分的li元素，使其平均分布，并设置背景色 */
.main ul li:nth-child(odd){width:240px;height:240px;background-color:deeppink;float:left;}
.main ul li:nth-child(even){width:240px;height:240px;background-color:hotpink;float:left;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>

3.2.浮动

float: left;
/*left 左浮动*/
/*right 右浮动*/

标准文档流

标准文档流：元素会默认自动的从左往右。从上往下流式的排列方式

浮动带来的问题

1.会脱离标准文档流（元素不再分块级行内块 行内等特性了）

正常标准文档流情况下，容器的内容可以撑开父级的高度（前提是父级不设置高度）

2.浮动的元素不能有效的撑开父级

3.浮动的元素和标准文档流一块使用会覆盖

总结：

1.脱离标准文档流

2.元素浮动后不会再撑开父级的高级

3.浮动的元素只会影响当前元素和后面的标准文档流元素，不会影响前面的标准文档流

4.浮动不会覆盖标准文档流的文字和图片，会挤到可以显示的区域

解决浮动发带来的问题

1.给父级设置有效高度

2.隔墙法

<div class="box clearfix">
  <div class="child"></div>
  <!-- 内墙法 -->
  <!-- <div class="clear"></div> -->
</div>
<!-- 相当于在标准文档流和浮动元素之间建立一堵墙，隔开他们，进而解决互相产生的影响 -->
<!-- 外墙法 -->
<!-- <div class="clear"></div> -->
<div class="one">正常的</div>

3.给浮动元素的父级设置overflow：hidden（超出隐藏）

4.伪元素配合隔墙法

.clear{
  clear: both;
}
/*clear 设置是否允许有浮动*/
/*left 不允许左侧有浮动
right 不允许右侧有浮动
both 不允许左右有浮动*/
/*::before*/
/*::after*/
/*伪元素清除浮动带来的影响：重点记常用*/
.clearfix::after{
  content:"";
  /*伪元素必填属性 可以向页面写入内容*/
  clear: both;
  display: block;
  visibility: hidden;
  /*隐藏 但是占据空间  兼容IE*/
}

3.3.伪类元素

3.3.1.定义与特点

定义：CSS伪类元素用于创建一些不在文档（DOM）树中的元素，并为其添加样式。

特点：

  1. 伪类元素不是文档树中的实际元素，而是由CSS创建的虚拟元素。
  2. 它们通常用于向元素的特定部分（如首字母、首行或元素前后）添加样式。
  3. 伪类元素在CSS3规范中使用双冒号（::）表示，以区分伪类和伪元素。

3.3.2.常见的伪类元素

1、::before

  • 在元素的实际内容之前插入一个虚拟元素
  • 需要使用content属性来指定要插入的内容
  • 常用语在元素前添加图标、文字等
/* 在段落前添加一个小图标 */
p::before {
  content: url('icon.png');
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

2、::after

  • 在元素的实际内容之后插入一个虚拟元素
  • 同样需要使用content属性来指定要插入的内容
  • 常用于在元素后添加装饰性内容或用于清除付浮动等
/* 在段落后添加装饰性文字 */
p::after {
  content: ' - 装饰性文字';
  color: gray;
  font-size: 0.8em;
}

3、::first-letter:

  • 用于选择并样式化元素的第一个字母。
  • 常用于对标题或段落的第一个字母进行特殊处理，如增大字体、改变颜色等。
/* 对段落的首字母进行特殊处理 */
p::first-letter {
  font-size: 2em;
  color: red;
}

4、::first-line

  • 用于选择并样式化元素的第一行文本。
  • 常用于对段落的第一行进行特殊处理，如改变字体、颜色或添加下划线等。
/* 对段落的第一行进行特殊处理 */
p::first-line {
  font-weight: bold;
  color: blue;
}

5、::selection

  • 用于选择并样式化用户已选择的文本部分。
  • 常用于改变用户选中文本的背景色和字体颜色等。
/* 改变用户选中文本的背景色和字体颜色 */
::selection {
  background: yellow;
  color: black;
}

3.3.3注意事项

1、兼容性：虽然现代浏览器普遍支持伪类元素，但在一些旧版浏览器中可能存在兼容性问题。因此，在使用伪类元素时，最好进行兼容性测试。

2、内容属性：对于::before和::after伪类元素，必须使用content属性来指定要插入的内容。如果省略该属性，则伪类元素不会显示。

3、样式继承：伪类元素会继承其父元素的某些样式属性，但也可以对其进行覆盖和修改。

四、定位

4.1.概念

CSS的定位属性（position）用于设置元素在页面中的定位方式。它决定了元素是相对于其正常位置、父元素、其他元素还是浏览器窗口进行定位的。通过合理设置定位属性，可以实现复杂的布局效果。

4.2.定位属性的值及其行为

1.static（静态定位）

默认值，元素按照正常的文档流进行排列

top、right、bottom、left属性在静态定位中不起作用

/* 静态定位（默认） */
.static-box {
  width: 100px;
  height: 100px;
  background-color: lightgray;
  /* 默认是 static，无需显式设置 */
}

2.relative（相对定位）

元素相对于其正常位置进行偏移

仍保留在文档流中，占据原始空间

可以使用top、right、bottom、left属性来指定偏移量

偏移后的元素仍然会影响周围元素的布局，但视觉上会移动

/* 相对定位示例 */
.relative-example {
  position: relative;
  top: 10px; /* 向下偏移10px */
  left: 20px; /* 向右偏移20px */
}

3.absolute（绝对定位）

元素脱离文档流，不再占据原始空间。

相对于最近的已定位祖先元素进行定位（即设置了position属性且值不为static的祖先元素）。

如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位。

使用top、right、bottom、left属性来精确定位。

绝对定位的元素不会影响周围元素的布局。

/* 绝对定位示例 */
.absolute-container {
  position: relative; /* 为子元素提供定位参考 */
}
 
.absolute-example {
  position: absolute;
  top: 50px; /* 相对于父元素顶部偏移50px */
  left: 100px; /* 相对于父元素左侧偏移100px */
}

4、fixed（固定定位）

元素脱离文档流，不再占据原始空间。

相对于浏览器窗口进行定位，无论页面如何滚动，元素始终保持在指定位置。

使用top、right、bottom、left属性来精确定位。

固定定位的元素不会影响周围元素的布局。

/* 固定定位 */
.fixed-box {
  position: fixed;
  bottom: 20px; /* 相对于浏览器底部偏移20px */
  right: 20px; /* 相对于浏览器右侧偏移20px */
  width: 150px;
  height: 50px;
  background-color: lightgreen;
  text-align: center;
  line-height: 50px;
}

5、sticky（粘性定位）

根据用户的滚动位置进行定位。

在特定阈值（如top、right、bottom或left属性设置的阈值）之前，元素表现为相对定位；之后，表现为固定定位。

粘性定位的元素在相对定位和固定定位之间切换。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性定位示例</title>
<style>
  .sticky-box {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: blue;
    color: white;
    padding: 10px;
    font-size: 20px;
  }
  .content {
    height: 2000px;
    padding-top: 60px;
  }
</style>
</head>
<body>
  <div class="sticky-box">粘性定位</div>
  <div class="content">
    <p>滚动页面查看效果。</p>
  </div>
</body>
</html>

4.3.定位注意事项

1、元素脱离文档流的影响：当元素使用绝对定位或固定定位时，它们会脱离文档流，不再占据原来的空间。这可能会导致其他元素的布局发生变化。

2、祖先元素的定位：绝对定位的元素是相对于最近的已定位祖先元素进行定位的。如果没有已定位的祖先元素，则相对于浏览器窗口进行定位。因此，在使用绝对定位时，需要注意祖先元素的定位属性。

3、z-index属性：z-index属性用于确定元素在三维空间中的堆叠顺序（即哪个元素在上面，哪个元素在下面）。它只对定位元素（即position属性值为relative、absolute、fixed或sticky的元素）有效。

码字不易，亲们！！动动小手点点赞呗！！

上述内容若有遗漏或不足之处，恳请各位大佬不吝赐教，指正并帮助美化，以期更加完善。

​

avatar
文章
阅读
粉丝