前端CSS（层叠样式表）是一种用于控制网页或应用程序外观和布局的标记语言。以下是一些常见的前端CSS用法：

CSS用法分类简介

选择器：
- 元素选择器：通过HTML元素名称选择元素，例如 p 选择所有段落元素。
- 类选择器：通过类名选择元素，例如 .my-class 选择具有 my-class 类的所有元素。
- ID选择器：通过ID选择唯一的元素，例如 #my-id 选择具有 my-id ID的元素。
样式属性：
- 例如文本p标签有 color、font-size、background-color 等。
样式规则：
- 使用 {} 大括号包围样式规则集合，例如：
```
p {
  font-size: 16px;
  color: blue;
}
```
继承：
- 某些样式属性会默认继承，你不设置子元素的值，它们将继承自其父元素，
  - 例如 font-family、font-size。color、line-height行高，text-align文本水平对齐方式等
- 默认情况下，是自动继承的，特殊情况下，对子元素设置，如：font-size:inherit
盒子模型：
- CSS 中的每个元素都被视为一个矩形框，具有内边距、边框和外边距。
- 使用 width 和 height 来定义元素的大小。
- 使用 margin 和 padding 来控制边距和内边距。

定位：
- 使用 position 属性来定义元素的定位方式，例如 relative、absolute、fixed。
- 使用 top、bottom、left、right 来精确定位元素。
浮动：
- 使用 float 属性将元素浮动到其容器的左侧或右侧。
- 常用于创建多列布局。
响应式设计：
- 使用媒体查询（@media）根据不同设备尺寸应用不同的样式。
- 例如，根据屏幕宽度调整字体大小或布局。
伪类和伪元素：
- 使用伪类（如 :hover、:active）和伪元素（如 ::before、::after）选择元素的特定状态或部分。
动画和过渡：
- 使用 @keyframes 创建动画序列，例如渐变、旋转、缩放。
- 使用 transition 属性平滑过渡元素状态的变化。
字体：
- 使用 font-family 指定元素的字体。
- 使用 @font-face 导入自定义字体。
背景：
- 使用 background 属性设置元素的背景，包括颜色、图像、平铺等。
定制样式：
- 可以通过修改现有的CSS框架（如Bootstrap、Materialize）或使用CSS预处理器（如Sass、Less）来定制样式。
排版：
- 使用 text-align、line-height、letter-spacing 等属性控制文本排版。
选择器优先级：
- 根据选择器的权重（ID选择器 > 类选择器 > 元素选择器）来确定样式的优先级。
- 使用 !important 可以覆盖其他样式。
模块化CSS：
- 使用BEM（块、元素、修饰符）或其他命名约定来创建模块化的CSS样式。
CSS预处理器：
- 使用CSS预处理器（如Sass、Less、Stylus）来

样式属性

文本样式

font-family：定义字体系列。（即某种字体）
font-weight：定义字体粗细。
font-style：定义字体是否斜体。
font-size:文字大小
text-decoration：定义横划线或删除线样式。
text-align：定义文本对齐方式（左对齐、右对齐、居中、两端对齐）。
line-height：定义行高。

12345可复合定义 (顺序要对)：

(粗细，倾斜) 、字体大小、family

字体大小、family必给 
font: 30px "微软雅黑";    /* 必填项 */

字体大小后面可以给行高
font : 10px/10px "微软雅黑"

1. `font-size`

略

2. `line-height`：定义行高。

p.small {line-height:70%;}
p.big {line-height:200%;}
-----
或者：10px  如果行高的值与容器的高度相等，就会居中

3. font-family

第一个没有找第二个
两个单词的打引号

{
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;         
    }

4. font-weight定义字体粗细

可以接单词，默认为normal=400、bold、bolder等
可以接100 到 900 整数

    p.lighter {font-weight:lighter;}  
    p.normal {font-weight:normal;}   
    p.bold {font-weight:bold;}
    p.bolder {font-weight:bolder;}
    p.thicker {font-weight:900;}    /*100,200,300,400(normal),500,.700(bold)..900*/

5. font-style定义是否斜体

italic 和oblique 用一样，都是斜体， normal为正常的
font-style可以用font-style:inherit 来继承父元素的是否斜体

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

text-decoration定义文本装饰（如下划线、删除线）

第一个参数为横线位置，第二个可选（线的颜色）、第三个可选 (是否波浪用wavy)

{text-decoration:underline  red  wavy ;}

第一个参数：

位置分上、中、下，或者为none就没有
可以组合，或全部设置

h1.under {
    text-decoration: underline;     /*文本下一条线*/ 
}
h1.over {
    text-decoration: overline;     /*文本上一条线*/
}
p.line {
    text-decoration: line-through;   /*穿过文本一条线*/
}
a.none {
    text-decoration: none;            /*无*/
}
p.underover{
text-decoration:underline overline line-through;    
}

text-align定义文本对齐方式（左对齐、右对齐)

定义文本对齐方式（左对齐、右对齐、居中、两端对齐

h1 {text-align:center}  
h2 {text-align:left}
h3 {text-align:right}
h4 {text-align: justify;}   /*多行时会撑满，两端对齐*/

`color`

略

`text-indent` 首行缩进

 text-indent: 32px;
 text-indent: 2rem;   /*两个字符*/

`letter-spacing` 字母的间距

`word-spacing` 单词的间距

`white-space` 强制不换行

正常情况下，字体装到容器的宽度，就会换行

如果给容器的元素设置white-space: nowrap; 里面的内容就全部是一行了

字母和数字的换行word-break

因为英文和数字如果没有结的话，就算一个 “字”, 如果要换行就要把这个“字”断开

`text-overflow`文本溢出处理方式

它与 white-space 和 overflow 属性一起使用，以控制当文本超出容器时应如何处理

  .ellipsis {
    white-space: nowrap; /* 防止文本换行 */
    width: 200px; /* 限定容器宽度 */
    overflow: hidden; /* 溢出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */    /* 不加或为  clip ，就是剪切 */
    border: 1px solid #ccc; /* 添加边框，以便更好地看到效果 */
  }

补充:以下还能悬停并展示完整

盒子模型样式

margin：定义外边距。
padding：定义内边距。
border：定义边框。
width：定义宽度。
height：定义高度。

盒模型大小：宽度： border(左右)+width+padding(左右) ---因为padding要撑开的高度：略 margin：在和盒子外面，不用计算

通用：

4个就是上右下左边
3个上右左下
2个上下右左

margin 外边距

外边距在 border边框外面（理解成元素与元素之间的缝隙）
也可以单独设置某一边： margin-top:100px
单位可以是cm，可以是px，也可以是%（基于父元素宽带的百分比-占不知道用法）
auto 自动计算（默认）
可inherit 可以从父元素继承外边距

margin 的问题

情况1：假如：父（国家）没有边框，子标签的magin会传递给父标签（只有上下会）
- 子会把自己的margin-top 和 margin-bottom传给父用（如下图的理解）
- 想取消这种情况，就给父加boder
情况2：外边距会合并，当两个相邻的元素都具有外边距时，它们的外边距会交叉重叠成一个外边距，其大小取两者之间大的。这种外边距合并通常出现在垂直方向上，（也是上下）如图的房子1的 margin-bottom 和房子3的margin-top会重叠(取其中大的)

margin控制元素居中

居右：magin-left:auto;
居左：magin-right：auto;
居中 magin: 0 auto; (或者同时设置magin-left:auto和magin-right：auto;)

padding 内边距

在边框 border 里面， background-color可以填充到
容器内的东西，在padding里头了，相当于盒子中的泡沫。内填充，会撑大
可以设置4个方向的单一样式 paddding-top 等

padding 和margin什么时候用

border边框

可以设置边框形式；宽度；颜色；是否圆角

必须属性1：solid实线、dotted虚线、dotted点划线

属性2：宽度

用1px
medium

属性3：颜色

补充：可以这么写

border-right：表示右边框
border-color：定义边框颜色。
border-top-color: 边框_上_颜色
border-width：定义边框宽度。
border-radius：定义边框圆角（如下图）。

width和height

单位可以时 auto 、 px 或者用 % （基于父元素宽度的百分比宽度）。

p.ex
	{
	height:100px;
	width:100px;
	}

它是边框里的东西：如下

box-shadow盒子阴影：

box-shadow是和color写一起的。

	{box-shadow: 30px 30px 1px 20px #888888;}

背景样式

background-color：定义背景颜色。
background-image：定义背景图片。
background-repeat：定义背景图片的重复方式。
background-position：定义背景图片的位置。
background-attachment: 背景图是否随内容滚动
复合写法（颜色，图片，重复方式，位置）没有顺序

`background-color`

它相当于气球上的颜色，但它不会撑开容器

书写方式：

单词
rgba(128, 195, 66,0.5) 最后一个表示透明度
十六进制，如 #fff 白色
~~transparent 背景透明(默认值)不用这个~~
opacity: 0.5; /* 设置透明度为 50% */

`background-image`：是background-color的升级，可以多种颜色、或图片。

默认会铺满整个容器，不是撑开容器
一般是直接设置在body里面（也不一定，这里面就相当于一个大背景）
设置为none，就是没有
图片：可以使用url() ,渲染一个图片
多种颜色直线渐变：可以设置成linear-gradient() 直线渐变，还能设置角度
多种颜色径向渐变：可以设置成radial-gradient() 径向渐变
还可以重复的线性渐变、径向渐变
如果浏览器不支持imgage，前面可以用 background-color打底

body
{
     /*使用背景图*/
    background-image:url('paper.gif');     
    
    /* 颜色线性渐变 */
    background-image: linear-gradient(black, yellow, blue,red);   /*4种颜色，比例各自25%*/
    background-image: linear-gradient(red,yellow 7%, blue 50%) ;   /* 自己定义比例 */
    /* 重复线性渐变*/
    background-image: repeating-linear-gradient(red, yellow 7%, green 20%)    
   
    
    /* 径向渐变，从中向外， 用border-radius: 50%;变成圆好看点 */
     background-image: radial-gradient(red, green, blue);          
    /* 重复径向渐变----晃眼看像棒棒糖*/
     background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

linear-gradient 和repeating-linear-gradient还能控制角度，添加第一个参数 ,单位为deg。

当`background-image`关联的重复方式、尺寸、位置

设置的是图片时，要设置尺寸和重复方式，和位置

background-repeat结合background-image使用的

可以关闭背景图的重复 no-repeat
可以指只在 x 或y 轴重复repeat-y

如果不设置，默认为repeat重复

{ 
background-image:url('paper.gif'); 
background-repeat:repeat-y;         /*只重复y轴方向*/
background-repeat:no-repeat;       /*关闭重复*/
}

background-size设置图片尺寸

background-repeat: no-repeat; 一般先设置成一个图片

background-size: 100px 100px; 给一个宽高
background-size: 100% 100%; 撑满（假如容器的宽高不合理就会变形）
background-size: cover; 不变形的覆盖完容器，但会超出部分
background-size: contain; 这种可能是先满足小的一边，（图片不会超出，或者变形）

`background-position`：定义背景图片的位置。

注意：这个东西是屏幕的上中下右

方式1：需要接收两个单词，表示x方向，和y方向
background-position:center top 表示中间的上面 (如果只写一个单词or数值，y就默认为center)，
- x方向有三种：left right center
- y方向有三种: top bottom center
方式2（更自由）。左上角是0％0％。右下角是100％100％
方式3 左上角是0 ，用30px 30px，其他css单位也可以（可以和%的混用，如x用px单位，y轴用%），还可以搞负值。
补充-- 因为background-attachment默认值为 scroll。背景图像会随着元素内容滚动。当元素的内容滚动时，背景图像也会跟随滚动 -------（即位置是相对是内容来设置的）
- 另一个background-attachment：fixed 位置是相对于屏幕的，(背景图不会随内容动，有点像一个水印一样，一直留在那里)

background-attachment是否固定背景图,见上。

{
background-position:center top
background-position:30% 70%; 
background-position:30px 30px
}

有序无序列表

list-style-type （是ul标签本身的样式，只是对它进行样式重置）

ul.circle {list-style-type:circle} 空心圆圈、无序列表

ul.square {list-style-type:square} 实心方块、无序列表

ol.upper-roman {list-style-type:upper-roman} 大写罗马数字、有序列表

ol.lower-alpha {list-style-type:lower-alpha} 小写字母、有序列表

~~其他等~~

color：定义文本颜色。
background：定义背景。
animation：定义动画效果。不知道是啥
transition：定义过渡效果。不知道是啥

定位和布局

position：定义元素的定位方式（absoluete(绝对于其他元素)，relative(相对与本身)）。
top、bottom、left、right：用于精确定位。
display：定义元素的显示方式（如块级元素、内联元素）。
float：定义元素的浮动方式。

`position`：定义元素的定位方式结合 `top`、`bottom`、`left`、`right`

absolute（相对其他元素移动）

假如父级或爷爷及以上级没有，position属性，是相对第一个父元素即html标签(左上角)进行定位，（如爷爷级别有position,他就相对与爷爷）
- 下图可以看html的位置
特点1：定位使元素的位置会【完全脱离】文档流也就是下面图片的例子，没有留坑、本属于它的位置，后续元素会来使用
特点2：对于行内元素如span，如设置了position: absolute; 就支持所有样式了，如设置weight， heiget也会生效了（见笔记二，有对块元素，行内元素做介绍）
- （加上浮动和inline-block是一样的效果）
使用1：通过 "left", "top", "right" 以及 "bottom" 属性进行规定如下图。
使用2：想要相对父来移动，就可父级添加position属性
absolute触发BFC ？？

fixed(相对窗口-固定)

和absolute区别是，它是相对于窗口固定
用br 把高度撑起来有滚动条才有效果
【完全脱离文档流】
行内元素支持所有样式了，如width，heihgt
提升层级
触发BF?/
IE6 不支持

relative(相对于"其正常位置"移动)

不会改变元素的位置（没有脱离文档流），只是展示的样子变了（如下的例子） （坑留着的，人跑了）

absolute和relatvie的区别：

static (默认，即没有设置 position)

可视区

height:100% 的作用，可以撑满父级所以说，要想让一个元素的宽高撑满整个屏幕，就要给这个元素的所有父级宽高都设置100%

层级（元素的上下关系）

positon的 relative 和fixed 能提升层级
一般情况下：层级的大小由顺序决定（后面的更高）
层级可以更改，用 z-index:1 , 数字越大，层级越高(兄弟元素之间)

【子元素相对父元素定位】小案例

提示： opacity:(0到1) 时透明度

写法2（css3的，有些浏览器适合） rgba(0,0,0,0.5)

top,right,left ,bottom定位属性

几种居中的方式

`第一种（需要知道元素的左上角到中心的位置才行）`

用**absolute ，left 50% ，top50% **，但由于只是元素左上角居中了，还需要 margin-left 和margin-top

`第二种（推荐）`

用如下方式

{
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

`第三种`（不对，这个是背景图的居中方式，和以上的是不同的，以上是元素的定位，这个是背景图在元素里的定位）

方式：用background-position (详细在文档中背景样式中)

top,right等的使用（案例）

.a3{} 的形式，第一种，第二种，都可以实现。

给div添加样式 resize: both; overflow: auto; 实现可改变宽高的东西（css3的）

display 隐藏、行内、块、行内块

行内块，可以设置宽高（参考CSS笔记二的块元素和行内元素）

p.ex1 {display: none;}  
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {
	display: inline-block;
	   width: 3px;
	}

`float`：定义元素的浮动方式。

{
	float:right;   /*浮动到右边*/
        float:left;   
        float:none;   /*不配置，就是这个， 默认不浮动*/
}

`特征1：可以让块元素浮到一行`

遇到`父级的边界`或`相邻的浮动元素`就会停下来。

`特征2，可以让行内元素设置宽高` ，如span，如下图

特征3，浮动特征、

他是浮动的，但是会影响正常的文档

特点：

[浮动元素A]后跟的 [没有浮动的块元素B] 的（如下 “我没有浮动的p标签”）
- 位置是从 [浮动元素位置A] 那一行开始的，
- 内容，会在浮动元素后面. 留出浮动元素的盒模型
块元素如div添加了浮动后，如果没有设置width（即auto）, 它的显示宽由内容撑开，不是占一行
父级高度塌陷（如下图，红线挤到上面一坨了，因为子级元素浮动起来了）

针对这种，因为给子加了浮动，父坍塌的问题，有如下处理方式。

`第7个，相对比较主流的`

after伪类清除浮动
after 代表选择到元素内容的最后固定写法，先记住就行。

下一个：如果是多个div都是浮动，换行不会被解析成空格（display:inline-bolck 这种换行会被解析成空格）

远离浮动（远离其他浮动元素）

clear:left 表示 div2元素的左边不能有浮动的元素（如果有它就会另起一行） clear:both 元素两边都不能有浮动的元素 clear:right 如下图

浮动 float 和行内块的 inline-block 区别

向左浮动（2有点长，4在浮动时，被2挡住了）

行内块（4会从下面开始）

使用上

css选择器

用来选择文档中的html元素，然后添加样式

元素选择器（Element Selector） ：它选择文档中所有匹配元素的样式。例如，p 会选择所有段落元素。
类选择器（Class Selector） ：通过指定一个类名，您可以选择拥有该类的元素。例如，.button 会选择所有使用 class="button" 的元素。
- 如果class="box border" 一个class有多个，再设置.box{} 和设置.border{} ,标签会结合两个样式
ID 选择器（ID Selector） ：通过指定一个唯一的 ID 名称，您可以选择具有该 ID 的元素。例如，#header 会选择 ID 为 header 的元素。
- 批量添加样式, 中间用逗号隔开**如
```
div,p.class, #myid{}
```
属性选择器（Attribute Selector） ：它可以根据元素的属性和属性值来选择元素。例如，[type="text"] 会选择所有 type 属性为 "text" 的元素。
- CSS3的东西：可以 div[id="box"]{}
后代选择器（Descendant Selector） ：它选择某个元素的后代元素。例如，ul li 会选择 ul 元素下的所有 li 元素。
子元素选择器（Child Selector） ：它选择某个元素的直接子元素。例如，ul > li 会选择 ul 元素的直接子元素中的所有 li 元素。
伪类选择器（Pseudo-class Selector） ：它选择元素的特定状态或位置。例如，:hover 会选择鼠标悬停在元素上的状态。
伪元素选择器（Pseudo-element Selector） ：它允许您选择元素的特定部分，如元素的第一个字母或最后一个行。 - 例如，:first-letter 会选择元素的第一个字母。 - p:first-line 会选择p标签的第一行 - h1:before 可以在每个h1前面插入新内容。 - :after 同before - :first-child 找所有的第一个如图：为伪元素选择器

否定选择器 如下：

   /* 这将选择不是其父元素的第一个子元素的所有段落元素，并应用样式规则 */
p:not(:first-child) {
   /* 样式规则 */
 }
 
 /* 选择所有段落，但不包括带有类名 "special" 的段落 */
     p:not(.special) {
         color: blue;
     }

通配符选择器（没啥用，且不建议用）

* {}    /*会选到html 和 body 标签*/
body * {}   /*这么写就是选到body下的所有*/

选择器的优先级(用的少，了解就行)

行间样式 > id 选择 > class类选择 > 标签选择

包含选择的优先级

基本样式重置

body中有margin
h1 中也有margin
dd 和 dt也有margin
ul 有margin 和 padding
- list-style:none 表示没有符号了
img有border，可以border:none vertical-align:top (顶端对齐)
a标签的下划线去掉，用text-decoration:none

CSS笔记(一)