CSS-web端

CSS-web端这篇笔记是关于web端能够使用到的css样式语法

一.CSS基础认知

是什么？：层叠样式表
作用：专门给html设置样式
语法规则：
1.选择器 {color:red;}
2.css符号都是英文
3.键值对写完以后需要加分号
css引入方式：
内嵌式：将css代码写在html文件中
一般写在title标签下面，<style></style>

外联式：写在单独的css文件中
通过link标签在html文件中引入

行内式：写在目标标签的开始标签中，style='color:red;'

二.选择器

基础选择器

1.标签选择器

标签名 {css属性}
特点：找到页面中所有的这个标签

2.类选择器

.类名 {css属性} class的属性值成为类名
特点：
1.仅仅只找该类名的标签
2.不能以数字，中划线开头
3.类名可以有数字，字母，下划线，中划线
4.标签中可以有多个类名

3.id选择器

#id属性值 {css属性}
特点：一个id选择器只能选择到一个标签

4.通配符选择器

* {css属性}
特点：找到页面上所有标签，设置样式

选择器的进阶

复合选择器
1.后代选择器：选择器1 选择器2 { css属性 }
作用：寻找所有的后代，包括孙子
2.子代选择器：选择器1>选择器2{css属性}
作用：仅仅只寻找子代，不会找到孙子
3.并集选择器：选择器1，选择器2 {css属性} 中间逗号分隔
作用：选中选择器1和选择器2选中的标签，设置样式
4.交集选择器：选择器1选择器2 {css选择器}
作用：找到页面一个标签内同时拥有选择器1和选择器2的标签，
<p class='red'>小哥哥</p> p.red {css属性}
注意：交集选择器中如果有标签选择器，标签选择器必须写在最前面
5. hover伪类选择器：选择器:hover{css属性}
在鼠标悬停在元素上时触发
6.emmet语法 ：内部文本 ul>li{我是li的内容}，能够快速生成结构，需要的自己查一下文档。

结构伪类选择器

1.父盒子 子盒子:first-child {}
2.父盒子 子盒子:last-child {}
3.父盒子 子盒子:nth-child(n) {}

偶数  2n  even
奇数 2n-1 odd
前5个  -n+5
后五个 n+5

4.父盒子 子盒子:nth-last-child(n) {}
5.父盒子 子盒子:nth-of-type(n) {}
区别：
:nth-child → 直接在所有孩子中数个数
:nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数

伪元素

伪元素：通过css模拟出来的html标签
::before ::after
注意：
1.必须设置content属性才能生效
2.伪元素默认是行内元素
3.只有双标签才可以使用伪元素

三.字体和文本样式

字体样式

font-size        字体大小
font-weight      文本粗细    400为正常
font-family      文本字体
font-style       文本风格    normal  正常    italic  斜体
font连写方式    font:文本风格   文本粗细   字体大小/行高   字体
注意：1.必须保留font-size和font-family属性，否则font属性不起作用
	    2.要把单独的样式写在连写的下面，不然会被覆盖

文本样式

color  文字颜色
text-align  文本水平居中 只能给大盒子使用
text-decoration 下划线样式   
      1.none  默认，用于a标签的取消下划线
			2.underline  下划线
text-indent属性  首行缩进      单位em
line-height  行高

四.背景属性

背景颜色  background-color
背景图片  background-img:url()
			盒子比图片大，会出现平铺的效果
背景平铺  background-repeat
			1.no-repeat  不平铺
			2.repeat-x  水平方向平铺
			3.repeat-y  垂直方向平铺
背景位置   background-position:水平方向  垂直方向
			向右走为正值
			向下走为正值
背景属性的复合写法：background:color url() no-repeat position

五.元素的显示模式

1.块级元素

特点：
1.独占一行
2.如果不设置宽高，那么他的宽度由父元素决定，高度由内容撑开
3.可以设置宽高
如何转换？转换块级元素 display:block;
哪些是块级元素：div,p h系列，列表， 表格，form…

2.行内元素

特点：
1.不独占一行,可放多个
2.不能设置宽高
3.宽高由内容决定
如何转换？转换为行内块元素 display:inline;
哪些是行内元素：a,span,b,i,u…..

3.行内块元素

特点：
1.一行显示多个
2.可以设置宽高
如何转换？转换为行内块元素 display：inline-block
哪些是行内块元素img，input等所有表单元素

六.CSS特性

继承性

1.字体系列，文本系列控制的属性都能继承
2.width，height不能被继承
3.a标签无法继承color
4.h系列标签无法继承font-size

层叠性

1.给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上

2.给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

优先级

1.当同一个元素指定多个选择器，就会有优先级
2.！important>行类样式>id选择器>类选择器，伪类选择器>基础选择器>通配符>继承
3.!important放在声明后面，声明会变成最大优先级
4.选择器 {属性名:属性值 !important;}

七.盒子模型

组成：内容+内边距+边框+外边距
内边距 padding
1.padding一般都会撑大盒子
2.不会撑大的情况
1.不给子元素设置宽，默认是父盒子的宽
2.给子元素设置padding和border都不会撑大盒子
边框 border
外边距 margin
自动内减 box-sizing: border-box; 怪异盒子

1.外边距折叠现象

① 合并现象
1.场景：垂直布局 的 块级元素，上下的margin会合并
2.结果：最终两者距离为margin的最大值
3.解决方法：只给其中一个盒子设置margin即可
② 塌陷现象
1.场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
2.结果：导致父元素一起往下移动
3.解决办法：
3.1：给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
3.2：给父元素设置overflow：hidden
3.3：给父元素转换成行内块元素
3.4：给父元素设置浮动

2.行内元素的margin和padding无效情况

1.场景：给行内元素设置margin和padding时
2.结果：
2.1：水平方向的margin和padding布局中有效！
2.2：垂直方向的margin和padding布局中无效！

八.标准流

1.块级元素：从上往下，垂直布局，独占一行

2.行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行

九浮动

浮动的作用：1.图文环绕 ，2.网页布局
语法：float:left/right;
特点：
1.浮动元素会脱标，在标准流中不占位置
2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高

注意:浮动的元素不能通过text-align:center或者margin:0 auto

如何清除浮动？

1.单伪元素清除浮动

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

2.双伪元素清除法

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
 } 
 .clearfix::after {
     clear: both;
 }

3.给父盒子设置一个高
4.给父元素设置overflow:hidden;
5.额外标签法
5.1：在父元素内容的最后添加一个块级元素
5.2：给添加的块级元素设置 clear:both

十.定位

定位场景：1.盒子层叠，2.固定盒子位置

第一步：设置position

relative 相对定位：相对于自己之前的位置移动
特点：1.占位置，未脱标。2.配合边偏移使用。3.子绝父相

absolute 绝对定位：默认浏览器可视区进行移动
如果其祖先元素有定位的属性，就相对于最近的祖先定位元素来移动，祖先定位可以是（绝对，相对，固定）
特点：1.不占位置，脱标。2.配合边偏移使用。3.子绝父相
水平垂直居中：

left:50% ;
top:50%;
transform:translate(-50%,-50%);

fixed 固定定位：相对于浏览器可视区进行移动
特点：1.不占位置，脱标。2.配合边偏移使用。3.让盒子固定在屏幕中的某个位置

z-index：z-index：1；数值越大，越在上面。要结合定位使用，不能单独使用

第二步：设置边偏移

left right top bottom

十一.装饰

1.垂直对齐方式

语法：vertical-align:top/middle/bottom
只能设置给行内/行内块元素，设置给图片
注意：
1.行内/行内块的元素都有基线对齐的问题
2.不推荐使用行内块让div一行显示，因为可能出现基线对齐的问题
解决：方法1:使用vertical-align
方法2：将行内/行内块元素转换为块级元素

2.cursor 鼠标光标

这个自己查文档去

3.圆角边框

1.border-radius:10px; 数值越大，就越圆
2.圆形 50%
3.胶囊按钮 设置盒子高度的一半

4.overflow

处理溢出的部分

hidden  隐藏
visible  默认值  溢出的部分显示
scroll  将溢出的部分设置为滚动条，不管内容是否溢出，都会出现
auto  根据内容多少来决定，如果内容溢出才触发滚动条

5.显示与隐藏

display属性

block 显示
none   隐藏
注意：隐藏以后不占位置

visibility属性

hidden  隐藏
visible 显示
占位置

opacity元素透明度

opacity：0.5；
属性值在0-1之间
注意：opacity会让元素整体透明，包括里面的内容			

transparent 透明度

十二.链接伪类

a:link a链接未访问过的状态
a:visited  a链接访问以后的状态
a:active  选中鼠标按下
a:hover

十三.焦点伪类

input:focus

十四.精灵图

1.设置背景图片
2.设置背景位置值，负值

十五.过渡

语法：transition:all 2s;
注意：
1.过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
2.transition属性给需要过渡的元素本身加
3.transition属性设置在不同状态中，效果不同的
① 给默认状态设置，鼠标移入移出都有过渡效果
② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果