学习CSS的总结

qwert_qqq

已于 2023-06-28 23:33:27 修改

阅读量239

点赞数

文章标签：学习 css

于 2023-06-28 23:27:20 首次发布

本文链接：https://blog.csdn.net/qwert_qqq/article/details/131446917

版权

CSS学习总结

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

1.知识点概要：

颜色：网页选用一种耐看、易用、符合心意的配色是不容易的，尤其在没有专业设计师时。幸好，即使没有美学基础，但有一些已经调配好的配色方案我们可以直接使用。去ColorDrop 或 LOL Corlors 挑选你网站的配色。

尺寸：我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。

对齐：对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可

3.盒子模型

在这里插入图片描述

说明：

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

some details：

content 可在读取数值的js代码中见到

padding border margin 都是设计样式时常用到的属性

border常用于设置表格的样式

margin可以分为上下左右四个方位分别设置边距

4.定位

position属性用于对元素进行定位。该属性有以下一些值：

static 静态
relative 相对
fixed 固定
absolute 绝对

设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

5.溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。溢出属性有以下几个值：

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

6.浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。

如想让一张图片向右边移动只需要在设置style时加上 float: right; 即可

7.不透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。值在[0.0～1.0]之间，值越低，透明度越高

8.组合选择器

CSS有三种选择器：元素、id 和 class 。但我们也可以进行组合，以得到简洁精确的选择。

后代选择器

例如，下面这段代码表示在<div>标签内 class="haha"的<p>标签的内容背景颜色都是黄色的。

 <style>
   .haha p {
     background-color: yellow;
   }
 </style>

子选择器

也称为直接后代选择器，以>作为分隔

如：.haha > p 代表在有.haha类的元素内的直接
元素。

例如下面这段代码，虽然段落3在.haha类中，但它的直接父元素是span，不是.haha的直接后代，所以不能选择。只有段落1、2有黄色背景。

<head>
 <style>
   .haha > p {
     background-color: yellow;
   }
 </style>
</head>
<body>
 <div class="haha">
   <p>Paragraph 1 in the div .haha.</p>
   <p>Paragraph 2 in the div .haha.</p>
   <span>
       <p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
   </span> <!-- not Child but Descendant -->
 </div>
 <p>Paragraph 4. Not in a div .haha.</p>
 <p>Paragraph 5. Not in a div .haha.</p>
</body>

9.伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。

使用伪类/伪元素的语法: 选择器后使用 : 号，再跟上某个伪类/伪元素可用于设置一些特殊事件
比如鼠标移动到上面就变色或者鼠标指针变成手指样式等等…

10.flex&grid

flex 和 grid 都可以用来设置display的属性

flex 属性（多是一维的使所有子元素在一个方向上布局）

Justify Content ：控制伸缩项在其放置方向上的间距和对齐方式
Flex Wrap：决定是否在空间用完时对伸缩项进行换行。默认值是nowrap，这就是子条目不会自动移动到下一行的原因。将值设置为wrap时，可以实现上述响应行为。
Align Items：允许我们控制垂直方向的对齐。
Flex Direction：默认情况下，内部元素都被放在一行中。要将行方向更改为列，可以使用列值的flex-direction属性。可支持从左到右放置，从右到左，从上到下，从下到上。
Flex Grow：通过将flex-grow属性的值设置为大于0的数字(也称为生长因子)，可以使项目占用剩余空间(对于行方向来说是剩余宽度，对于列方向来说是剩余高度)。、
Flex Shrink：可防止元件收缩
Flex Basis：这个属性设置了伸缩项目的初始大小——在行方向的情况下是宽度，在列方向的情况下是高度。与flex-grow和flex-shrink一起，此属性有助于确定伸缩项的大小
…

grid 属性（多是二维的用于网格布局）

grid-template-columns:用于指定需要多少列以及每列的大小。这可以通过以%、px、rem或任何以空格分隔的有效宽度值指定每列的宽度来实现。
Justify Content: 用于控制网格项沿内联/行轴(即水平方向)的间距。
Align Content:用于控制网格项沿块轴(即垂直方向)的间距。
Grid Row: Grid-row-start指定项目的开始位置，grid-row-end指定项目相对于行行的结束位置。这些值通常是指定一行的正整数。
Gap: 属性gap是行间隙和列间隙的简写属性。它可以用一个或两个值指定。一个就同时指定了行和列的间隙，非常便捷，也可以用两个值指定，分别设置行间隙和列间隙。第一个值是row-gap，第二个值是column-gap。