CSS的作用 | 青训营笔记

Zhou某人
110 阅读3分钟
这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

今天看完课程的内容之后感觉课程的内容还是比较多的，后面没有做笔记的话会容易忘记，所以，来浅浅的记录一下学到的知识点吧。

CSS在前端的作用

我对CSS在前端的印象是给网页的内容进行布局，为内容添加上CSS样式，给用户提供友好的用户界面，再说简单点就是美化界面。接下来会从css的选择器、盒子模型、浮动和定位以及新特性来进行说明。

选择器

在课程里面讲到的，CSS通过选择器来将对应的元素选择出来为其添加样式从而达到改变标签内的页面的元素的样式。选择器的分类：基础选择器（例：id选择器，类选择器等）、伪类选择器（例：:hover、:active）、伪对象选择器（例：::before）、属性选择器（格式[attribute=value],例：a[target=_blank]）。

权重优先级：参考下图

image.png

盒子模型

所有的html元素基本上都可以看做是一个盒子有外边距(margin)、边框(border)、内边距(padding)、内容(content)

image.png

还有如果在元素中添加display:flex在块级的元素会变成弹性盒子,默认内容横向摆放,flex-direction可改变布局方式。

justify-content属性和#### align-items属性

这两个属性应用于弹性盒子模型，justify-content属性将弹性项沿着主轴对齐，align-items属性设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around

align-items: flex-start | flex-end | center

布局

课程中讲到了宫格布局以及flex布局

宫格布局

#container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-template-areas: 'item1 item1 item2'
                'item1 item1 item3'
                'item7 item7 item6'
                'item7 item7 item9'
        }

image.png

flex布局

image.png

        .container {
            width: 600px;
            height: 100px;
            display: flex;
        }

        .a {
            background-color: antiquewhite;
            flex-grow: 3;
        }

        .b {
            background-color: aqua;
            flex-grow: 2;
        }

        .c {
            background-color: blueviolet;
            flex-grow: 1;
        }

浮动和定位

有时候常规的文档流并不能满足我们的需求，这时候的浮动和定位就可以脱离原本的文档流，浮动分为左浮动和右浮动( float: left;、float: right;)，当容器的宽度不够时会被挤到下一行。但是浮动会导致后续的元素脱离文档流会导致父级元素的塌陷，此时需要清除浮动，解决方法（父元素设置高度、增加clear属性、overflow、伪对象方法）

定位： 定位常见有相对定位、绝对定位、固定定位 position: relative | absolute | fixed; 相对定位和绝对定位是相对于上一级的开启定位的元素来说，如若上级元素没有开启定位则往上层层查找，直到找到body元素，固定定位是根据浏览器的可视窗口来进行定位。 position:fixed;使用场景常见于页面的“联系客服”或者“返回顶部”按钮。

新特性

CSS的新特性比较多，只做简单介绍。圆角效果(border-radius)、阴影效果(box-shadow: h-shadow v-shadow blur spread color inset; )、颜色渐变效果(background: linear-gradient(direction,color-stop1,color-stop2,); )、动画效果（旋转、转换、过渡）(以过渡效果为例： transition: width 2s ease 1s;)、媒体查询

@media screen and (max-width: 992px) and (min-width: 768px) {
   /* 设备小于768px但小于992px加载样式  */
   body{
      background-color: pink;
   }

以上就是今天的总结。学到了之前没有仔细了解的flex弹性布局以及宫格布局，对于一些细节方面后续还要加强，继续加油。

avatar
文章
阅读
粉丝