前端入门（三）

🔝前端核心奇数之一 CSS

大家好，我是allubiba-H，一名大三的学生，专业是通信工程一个偏向于硬件的专业，因为较喜欢互联网行业进入了华清远见这个家庭👨‍👩‍👦‍👦，然后想记录一下我在华清远见的学习过程。由于本人刚学前端水平有限，可能避免不了一些错误，希望大家多多支持🤗。

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

div {
    width: 200px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框

属性允许你指定元素边框的样式、宽度和颜色

边框样式

border-style 属性指定要显示的边框类型。

值	描述
dotted	定义点线边框
dashed	定义虚线边框
solid	定义实线边框
double	定义双边框
groove	定义 3D 坡口边框。效果取决于 border-color 值
ridge	定义 3D 脊线边框。效果取决于 border-color 值
inset	定义 3D inset 边框。效果取决于 border-color 值
outset	定义 3D outset 边框。效果取决于 border-color 值
none	定义无边框
hidden	定义隐藏边框

效果图:

边框颜色

属性用于设置四个边框的颜色

属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

外边距(margin)

属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

p {
  margin-top: 100px;上外边距100px
  margin-bottom: 100px;下外边距100px
  margin-right: 150px;右外边距150px
  margin-left: 80px;左外边距80px
}

一些常用的简写方法：

p {
  margin: 25px 50px 75px 100px;
}

• 一个值：四周外边距
• 两个值：上下，左右
• 三个值，上，左右，下
• 四个值：上，右，下，左

内边距(padding)

属性用于在任何定义的边界内的元素内容周围生成空间。
通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

用法跟外边距一样

简单写法：

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

设置四个值用法（上、右、下和左侧）

div {
  padding: 25px 50px 75px 100px;
}

重置默认样式

重置所有元素的默认样式

我们在用一些属性的时候这些属性有默认的样式属性，为了不影响后续开发需要重置所有的元素的默认样式

*{
    margin: 0px;
    padding:0px
    font-size: 12px; /* 中文字体大小的最小值 */
}

去除列表的样式（一般去掉前面的黑点）

ol,ul {
    list-style: none; /* 去除列表样式 */
}

a标签默认会有文字的下划线：

a {
    text-decoration: none;
}

定位 position

有五个不同的位置值：

• static
• relative
• fixed
• absolute
• sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同

相对定位 relative

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

div{
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

相对定位的盒子，不脱离标准流，原有的位置保留不变，其后的元素不能占用其原有位置。
相对定位的主要用途是作为其内部元素绝对定位时的参照标准，有相对于我的含义。
相对于自己原来的位置进行定位。距离原来左边位置left的值，距离原来上边位置top的值,原来位置保留，依然占文档流

绝对定位 absolute

absolute的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动

❗❗❗相对定位总是和绝对定位一起使用，父元素为相对定位，子元素为绝对定位

固定定位fixed

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
固定定位的元素不会在页面中通常应放置的位置上留出空隙。不占文档流

z-index

和定位一起使用，值越大越在上面

• z-index属性值：整数，默认值为0
• 设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系。
• z-index值大的层位于其值小的层上方。

今天的内容到此结束，希望对你有帮助，喜欢的话支持一下😀
👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍