CSS基础知识

基础选择器:

标签选择器

标签选择器,直接以标签名命名的选择器,

css 复制代码

/* 标签选择器 */
      p{
        color: red;
      }
      /* 选中多个标签设置相同样式 ，无法差异化同名标签的样式*/

对引入文件全局都生效

类选择器-差异化同名标签

在标签上加 class=类名 ,一个标签只能加一个class ，但一个class可以有多个选择器

html 复制代码

<style>
       .red{
            color: red;
        }
        .size{
            font-size: 30px;
        }
</style>
<body>
    <div class="red">nihao 你好年后</div>
    <p class="red size">ninniinin</p>b
</body>

id选择器

用法和类名相似,一般都是配合js使用,很少直接为标签设置样式

id名称具有唯一性,不能重复命名

html 复制代码

<style>
    /* 同一个id名只能在一个页面使用一次 */
    #id1{
        color: seagreen;
    }
</style>
<body>
    <div id="id1">你好，我是样例</div>
    <p id="id1">wosjo</p>
</body>

通配符选择器

通配符选择器不需要调用,浏览器会自动查找所有页面并设置相同样式

html 复制代码

*{
	color: red;
}

文字修饰属性

文字大小,粗细,倾斜,行高,颜色

文字大小: font-size 16px为大多数浏览器默认大小必须写单位
文字粗细: weight 为文字粗细正常粗细为400 800为加粗不写单位
文字倾斜: font-style: 控制文字姿态 normal为正常 italic为倾斜
文字行高: line-height 表示文字行高, 其中默认行高为32 可以不写单位
文字颜色: color表示文字颜色,有rgb和#xxxxxx两种表示方式

文字垂直居中,文字自已,font复合属性

文字垂直居中: 将盒子高度和行高设置成相同高度就能实现文字在盒子中垂直居中
css 复制代码
```
div{
	height:30px;
	line-height:30px;
}
```
文字字体: font-family表示文字字体
复合修饰属性: font: 是否倾斜是否加粗字号/行高/ 字体
css 复制代码
```
p{
    font: italic 700 30px/2 楷体;
}
```

文本缩径,对齐,修饰线

文本缩径: text-indent: 数字+单位 / 数字+em em为当前字号的大小
css 复制代码
```
p{
    text-indent: 2em;
    font-size: 30px
}
```
文本对齐:text-align对齐方式有左对齐右对齐居中对齐等
同样的文本对齐对图片同样适用

修饰线:text-decoration: none不修饰,underline下划线,overline上划线 line-through删除线

css 复制代码

a{
    text-decoration: none;
}
div{
    text-decoration: underline;
}   
p{
    text-decoration: line-through;
}
span{
    text-decoration: overline;
}

复杂选择器

复合选择器

复合选择器由两个或多个基础选择器组合而成

css 复制代码

div span {
    color: red;
}

html 复制代码

 <div>
    <span>我总算学会了</span>
    <div>
        <span>可惜你</span>
    </div>
</div>

子代选择器

父选择器>子选择器{css属性}

css 复制代码

 div>span{
    color:red;
}

并集选择器

并集选择器就是在类名前面加上逗号

css 复制代码

div,p,span{
    color: red;
}

交集选择器

类名之间没有间隙,直接连在一起,只有同时满足的时候才会生效\

css 复制代码

/* 交集选择器 选择器1选择器2{css} */
p.box{
color: red;
}

伪类选择器

伪类选择器一般用在为标签添加特殊效果效果的时候使用,伪类选择器有四个状态

1，:link 用于访问前
2.：visited用于访问后
3.：hover用于鼠标悬停时
4.：active用于鼠标点击时
css 复制代码
```
 a:hover{
    color:red
}
```

css特性与选择器优先级

css继承性与层叠性

子集会集成父级的修饰一般会在body中添加修饰规范全局效果,当然如果子集有子集的样式就会覆盖掉父级的样式

css 复制代码

body{
    font-size: 30px;
    color: aqua;
    font-weight: 700;
}
/* 但当标签自己有样式就不继承body的选择器，但是还是会继承一些自己没有的样式 */
p{
    color: beige;
}

html 复制代码

<body>
    <p>子集继承父级的文字控制属性，所以工作时一般使用body的控制器</p>
    <div>继承性测试</div>
    <span>继承性测试</span>
</body>

css选择器的优先级

选择器选中的范围越大优先级越低！important写在css前面，提高优先级慎用其中行内样式的优先级最高

!important>行内样式>Id选择器>类选择器-味蕾选择器-属性选择器>标签选择器-伪元素选择器>通配符

权重计算方法: 初始(0,0,0,0) 行内(1,0,0,0) id(0,1,0,0) 类选择器(0,0,1,0) 标签选择器(0,0,0,1) 不管是交集选择器还是并集选择器到时候相互叠加就行谁数量级大谁牛逼

背景修饰属性

书写方法在选择器中写background-image标签 url中填写图片地址

css 复制代码

div{
width: 400px;
height: 400px;
/* 背景图默认是平铺效果 */
background-image: url(https://b0.bdstatic.com/4bc5c9b8a9f09ceba9d43dece6d239f8.jpg@h_1280);
}

控制背景图平铺效果,位置,大小,固定

你平铺效果

使用background-repeat:no-repeat不平铺 repeat-x水平方向平铺 repeat-y垂直方向平铺

背景图位置

background-position: center right;

bgp 数字坐标或者英文centre lift right bottom top

背景图大小

background-size: contain;

关键字cover缩放图片到完全覆盖背景 contain等比缩放直到有一边完全与盒子重合

背景图固定

background-attachment: fixed; 可以让背景图固定在原地不被页面滚动影响一般用作背景大图

背景复合属性

分别是颜色图片是否平铺中心位置是否固定

background: #000 url() no-repeat center center/cover fixed;

标签显示模式转换

一帮标签的显示模式是

1 块级：典型的有div标签独占一行可以设置宽高宽度默认是父级的100%
2 行内：典型的有span标签不能加宽高宽度默认是内容的宽度高度默认是字体的大小
3 行内块：典型的有img标签可以设置宽高宽度默认是内容的宽度高度默认是字体的大小

属性名：display

属性值：block 作用：将元素显示为块级元素
属性值：inline-block 作用：将元素显示为行内块级元素特点：1.和其他元素一行内显示 2.宽度和高度可以设置
属性值：inline 作用：将元素显示为行内元素特点：1.和其他元素一行内显示 2.宽度和高度不可以设置

盒子模型组成与特殊选择器

结构伪类选择器

css 复制代码

/* 伪类选择器写法如下 */
/* E:first-child查找第一个元素 */
/* E:last-chaild查找最后一个元素 */
/* E:nth-child(n)查找第n个元素 */
/* E:nth-last-child(n)查找倒数第n个元素 */
/* 也可以按公式写 例如2n+1奇数标签 */
/* -n+x找到第x以前的标签 */
/* n+x找到第x以后的标签 */
/* li:first-child{
    background-color: green;
}
li:last-child{
    background-color: red;
}
li:nth-child(3){
    background-color: #304bbb;
} */
/* 为所有奇数行设置背景色*/
li:nth-child(2n+1){ 
	background-color: #305bb3;
}

伪类元素选择器

伪类元素选择器创建虚拟元素用来摆放装饰性内容默认是行内显示模式必须结合content使用设置伪元素的内容如果内容为空填空格

通俗解释，伪元素选择器就是在已经选中的标签里面创建一个假的标签

css 复制代码

/* E::before 在e元素里面前边添加一个伪元素 */
/* E::after  在e元素里面后面添加一个伪元素*/
div{
    height: 300px;
    width: 300px;
    background-color: pink;
    }
div::before{
    content:"杰瑞";
    /* 如果content没有 选择器会直接失效 */
}
div::after{
    content:"汤姆";
}

盒模型的组成

内容区域 width&height 组成
内边距padding在内容与盒子边缘的空间
- padding作为内边距同样可以加方位名词
- padding:10px 20px 30px; 分别表示上左右下
边框线 border: 边框线粗细样式颜色
- 线条样式 solid 实线 dashed 虚线 dotted 点线
- border+方位（top bottom等）实现单边边框线
外边距 margin出现在盒子外面
- margin 与 padding 在属性上相同可以参考padding的设置方法
- 使用后margin实现版型居中的效果前提是盒子要有宽度

css 复制代码

div{
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 内容和盒子边缘 */
    padding: 20px;
    /* 盒子的边缘线 */
    border: 5px solid #000;
    /* 盒子外面的空白 */
    margin: 20px;
    border-right: 5px dotted #000;
}

盒子尺寸的计算

字啊默认情况下盒子尺寸=内容尺寸+border尺寸+内边距尺寸

可以手动减去border和padding的尺寸也可以使用内减模式自动忽略border和padding的尺寸 box-sizing: border-box;

内容溢出

overflow: hidden溢出隐藏 scroll溢出滚动（无论是否溢出都显示滚动条的位置） auto溢出后才显示位置

css 复制代码

div{
    width: 200px;
    height: 200px;
    background-color: pink;
    overflow: hidden;
    /* hidden最常用 */
}

外边距合并与坍缩

当上下盒子的margin冲突的时候会保留最大的外边距

css 复制代码

.one{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 20px;
}
.tow{
    width: 100px;
    height: 100px;
    background-color: burlywood;
    margin-top: 50px;
}
/* 根据检擦可知，上方的margin坍缩为0 下方还是50px */

行内元素的内外边距

margin与padding其实对行内标签不管用(span...) ,想要改变行内元素的位置，只能使用line-height改变

页面布局与flex框架

标准流与浮动

标准流:

标准流就是标签在页面中默认的排布规则,如果标准流无法实现想要的效果就用浮动和flex布局

浮动布局

实现快级标签中左右对齐:float: left; 左对齐 /right；右对齐

清除浮动:

如果父级没有高度，子集无法撑开父级高度，浮动脱标，导致页面混乱

解决方法

在父级中再添一块元素添加css加clear:both
单位元素法，在父级内容最后添加块级标签在使用伪元素选择器：：after
overflow 法在父级元素css中添加overflow：hidden

flex布局方法

flex布局也叫弹性布局，不会出现脱标的情况需要给父级先设置flex 转化为弹性盒子布局然后页面布局就会沿着主轴排列主轴一般为横向可以手动设置为纵向,子元素可以自动压缩和拉伸

主轴对齐方式

justify-content:

flex-start表示弹性盒子从起点开始依次排序,
flex-end表示弹性盒子从终点开始依次排序
center表示弹性盒子从中间开始依次排序
space-between弹性盒子沿主轴均匀排列,空白在弹性盒子之间
space-around弹性盒子沿主轴均匀排列,空白在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列,空白在弹性盒子两侧

侧轴对齐方式

align-items: 当前弹性容器内所有弹性盒子的侧轴对齐方式

align-self单独控制某个弹性盒子的侧轴对齐方式
stretch侧轴沿着侧轴线被拉伸至铺满容器
center弹性盒子沿着侧轴居中排布
flex-start:从侧轴七点开始一次排序
flex-end从侧轴终点开始一次排序

修改主轴方向

flex-directino 修改主轴方向

row表示水平方向,从左向右
column表示垂直方向,从上到下
row-column表示水平方向从右到左
column-row表示垂直方向从下到上

弹性伸缩比

flex属性设置为几就是占用父级剩余空间的几分之一主要控制主轴方向的尺寸

css 复制代码

.box{
    display: flex;
    height: 300px;
    border: 1px solid #000;
}
.box div{
    height: 300px;
    background-color: pink;
}
.box div:nth-child(1){
    width: 200px;
}
.box div:nth-child(2){
    flex:1
}
.box div:nth-child(3){
	flex: 2;    
}
/* 就是将剩余盒子空间分为2/1+2 */

html 复制代码

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

弹性盒子换行

flex-warp: 当前行被铺满时就会自动换行

行对齐方式

align-content 整个弹性盒子中的侧轴对齐方式,主轴对齐是一样的对单行弹性盒子不生效

flex-start表示弹性盒子从起点开始依次排序,
flex-end表示弹性盒子从终点开始依次排序
center表示弹性盒子从中间开始依次排序
space-between弹性盒子沿主轴均匀排列,空白在弹性盒子之间
space-around弹性盒子沿主轴均匀排列,空白在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列,空白在弹性盒子两侧