css基础｜青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第2天

一、css简介

1.css的使用

2.css工作

二、选择器

h1(选择器){
    color：white 属性
    font： 声明
}

作用：找出页面中的元素给他们设计样式
通配选择器：*{css}
类选择器:.类名{css}
标签选择器：标签{css}
属性选择器:属性{css}

a[href^="#"]{css}表示以#开头的属性都起作用

a[href$=".jpg"]表示以jpg结尾的属性会起作用

id选择器:#id{css}

1.1后代选择器

作用：根据html的嵌套关系，选择父元素后代中满足条件的元素。
选择器语法：选择器1 选择器2{css}

2.2子代选择器

作用：根据html的嵌套关系，选择父元素子代中满足条件的元素。
选择器语法：选择器1>选择器2{css}

2.并集选择器

作用：选择多组标签，设置相同样式。
选择器语法：选择器1,选择器2{css}

3.交集选择器

作用：选中页面中同时满足多个选择器的标签。
选择器语法：选择器1.选择器2{css}

4.伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式。
选择器语法：选择器:hover{css} -link（默认） visited(访问后变) active(鼠标点击后变) focus(聚焦文本框) first-chirld last-chirld

**n可以取数学

<a href="#">这是个超链接</a>
a:hover{
    color:red;<a href="#">这是个超链接</a>
}

三、文本样式

1.颜色

rgb表示法
hsl:Hue色相 Saturation：饱和度 Lightness：亮度
alpha：透明度

2.字体

1.字体大小

2.字体粗细

3.字体样式

4.字体系列font-family

5.常见字体

font-family:微软雅黑,黑体,非衬线字体

表示若电脑无第一个字体,依次向后询问,直到有某种字体后,页面就显示这种字体

6.央视层叠问题:后面的覆盖前面的属性

7.字体font相关属性的连写

8.文本样式

文本缩进:text-indent

1em表示一个字的大小,所以一般把缩进表示为2em

文本水平对齐方式:text-align

文本修饰:text-decoration

9.行高

颜色取值

color

background-color

标签水平居中的方法margin:0 auto

10.white-space

11.继承

某些元素在没有设置特定值时，会继承父亲的值

12.显示继承

inherit

四、布局

1.常规流

块级元素

行内元素

行内块元素

元素显示模式转换

改变元素默认的显示特点，让元素符合布局要求

padding:指定元素四个方向的内边距，百分数相对于容器宽度,可单独设置四个值(上右下左)
margin:设置外边距 auto表示居中
优先级：

先看第一行，第一行相同，再看第二行……

盒子模型

页面中的矩形区域就叫一个盒子，内容区域、内边距区域、边框区域、外边距区域
border: 宽度线的种类颜色单方向border:border-方向单词
自动内减：box-sizing:border-box
清除默认的内外边距

*{
    margin:0
    padding:0
    }
    或者

垂直的margin会合并,取两个块级的最大值

塌陷问题

行内元素无法通过padding margin改变行内标签的垂直位置，无法生效,可以改变行高来解决问题。

弹性盒子

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
作用：

section {
  display:flex
}

flex模型

主轴（main axis） 是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis） 是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素（在本例中是 <section>）被称之为 flex 容器（flex container）。
在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）（本例中是 <article> 元素。
flex-direction: column;利用它来实现列布局
- 设置每个元素宽度

flex: 200px;
flex-wrap: wrap

article {
  flex: 1;
}

设置flex项占用的比例

align-items 控制 flex 项在交叉轴上的位置。
justify-content 控制 flex 项在主轴上的位置。

button:first-child {
 order: 1;
}

排序作用

网格

将容器的display属性设置为grid来定义一个网络。与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项。

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    加入三个宽度为200px的列
}

fr这个单位来灵活地定义网格的行与列的大小，fr 单位按比例划分了可用空间使用 grid-column-gap (en-US) 属性来定义列间隙；使用 grid-row-gap (en-US) 来定义行间隙；使用 grid-gap (en-US) 可以同时设定两者。

grid-template-columns: repeat(3, 1fr);

第一个传入 repeat 函数的值（3）表明了后续列宽的配置要重复多少次，而第二个值（1fr）表示需要重复的构建配置，这个配置可以具有多个长度设定。
minmax()函数定义了一个长宽范围的闭区间

多列布局

.container {
  column-count: 3;
  这段代码会将container里面的内容分为三列
}

使用 column-gap 改变列间间隙。
用 column-rule 在列间加入一条分割线。
这份规范提供了一些属性来控制 multicol 和多页媒体中的内容拆分、折断

    break-inside: avoid;
    page-break-inside: avoid;

响应式布局

一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；
一个媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试；
一组 CSS 规则，会在测试通过且媒体类型正确的时候应用。

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

表示屏幕大小小于等于400px时，字体颜色变为蓝色。

2.浮动流

伪元素：通过css创建标签。::before放在父标签的最前面，::after放在最后面

浮动作用

浏览器解析行内块或者行内标签时候，如果代码换行会产生一个空格,所以使用浮动布局。
图文环绕、布局
用法：float:left/right
浮动的特点：脱离标准流位置，类似飘起来了。可以覆盖元素，下一个浮动元素会在上一个浮动元素排列。 css书写的顺序:1.浮动2.盒子模型3.文字样式
清除浮动:清除浮动带来的影响在父元素内容的最后添加一个块级元素并且添加元素clear:both

.clearfix::after{
content:"";
display:block;
clear:both;
height:0;
visibility:hiden;
}

.clearfix::before,
.clearfix::after{
    content:'';
    display:table;
}
.clearfix::after{
    clear:both;
   }
   给父元素添加overflow:hiden

假如你想设置行内元素为 flexible box，也可以置 display 属性的值为 inline-flex。

3.定位

可以让元素自由的摆放在网页的任意位置,一般用于盒子之间的层叠情况。
定位方式
- 属性：position

设置偏移值
- 水平和垂直方向各选一个，原则为就近原则

相对定位：1.相对于自己原来的位置移动2.占有原来的位置3.仍然有自己原有的特点 (relative) 水平以left垂直以top为准
绝对定位：absolute 先对于非静态定位的父元素进行定位,如果父级没有定位，以浏览器窗口为基准。
- 脱离标准线
- 改变标签的显示特点，具备了行内块的特点
- 子绝父相：子级相对定位，父级绝对定位
- 不能使用margin居中
- translate:translate(-50%, -50%)移动自己宽度高度的一半
固定定位，相对于浏览器进行定位移动
- position:fixed
- 脱离标准流，具备行内块特点
元素层级关系
- 标准流<浮动<定位
- html写在下面的元素层级更高
- z-index：取值越大显示顺序越向上,默认值为0。