《学习笔记》-- 温故而知新

2022-07-1 第二小组 宋雨 学习笔记

html三大件：HTML，CSS，JS

1.1.1初识CSS

在我的认知里面 CSS 的作用就是对页面的色彩，图片，位置等等进行美化。

1.1.2 盒子模型（重点）

盒子模型：每一个标签都是一个矩形，像一个盒子，所以HTML页面的布局可以理解为多个盒子组合嵌套排序而成。

①. padding内边距

padding可以给1-4个值，顺时针赋值，从上开始：

<style>
    div{
        padding: 30px 50px 70px 90px;
        padding-left:90px;
    }
</style>

② border边框

border 是一个复合边框。
其中 border-width 是设置边框的粗细，
border-style 边框的样式,【有三个参数：olid实线 dashed虚线 dotted点状线条】
border-color 边框的颜色。
border-radius设置边框的圆角，后面的值，就是距离四个角的位置为圆心画弧

<style>
    div{
        border-right: 2px solid gold;
        border-top: 5px dashed pink;
        border-top-color: red;
        border-radius：5px;
    }
</style>

③ margin外边距

margin 设置外边距同 padding，只不过 margin 是距离外边距的距离。

1.1.3 定位 （页面布局使用）

①、static（静态定位）：

是默认值，就是没有定位，当我们没有指定定位方式的时候，这时默认的定位方式就是static。

②、relative（相对定位）：

定位元素设置为 relative 的元素离开了原本应该在的位置，但其在底层模版上中的位置依然是占用的，只是视觉上相对原来的位置有移动。

它是可以通过设置left、top等值，使得指定元素相对其正常的位置进行偏移。

③、absolute（绝对定位）：

定位元素设置为 relative 的元素离开了原本应该在的位置，但其在底层模版上中的位置已经变为了空它是不占用底板的位置的，它不只只是视觉上的移动，而是底板也会移动到指定位置。

这种定位通过设置top、right、bottom、left这些偏移值。

④、fixed（固定定位）：

生成绝对定位的元素，相对于浏览器窗口进行定位。只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，脱离文档流；

总结：

对于一个搞后端的人来说的话，css的话说实话不是很重要，稍作了解即可。