前端笔记-css

html-css

一个网页主要就三部分内容，样式，标签，功能（自己的理解），样式对应css，标签对应界面元素，功能对应js语法。这里就是前端开始的地方-css。
在我的理解中，网页是什么？就是一个个元素放在一个空白的文档上面，构成了我们所看到的网页，就相当于拼图是由一个个小卡片拼装而成的，一个小卡片可能看不出什么东西，但是许多小卡片拼装在一起就构成了一副美丽的图画。window就相当于拼图的底板，元素就相当于卡片。
这里我主要介绍卡片（元素）的样式简单写法规则。

盒模型:

• 一个元素分为，
  外边框 边框 填充 内容 四个部分 分别对应
  margin dorder padding content
  //盒子大小 即 背景范围 等于后三者之和

• 边框:
  实线:solid
  虚线:dashed
  点状线:dotted
  eg: border: 1px solid red;

• 填充:
  padding: % 和 width % 是一个参照物
  padding: 10px 20px; 上下10px填充 左右20px填充

• 外边框(边距):
  二个标签：
  水平方向标签会相加
  竖直方向标签会融合
  其中竖直方向,子元素有上边框时,会把没有边框的父元素带着往下移动
  内容:开始标签和结束标签里面的内容

缩骨功:

开启:box-sizing:border-box;
没有开启缩骨功的元素:
width + border =元素所占据的大小
开启缩骨功的元素:
width =元素所占据的大小
box-sizing 即从什么地方开始机算盒子的的尺寸
正常盒模型:box-sizing:conetent-box; 默认 width=内容
怪异盒模型:box-sizing:border-box; width=边框+填充+内容

三种定位方法:

浮动 定位 弹性模式
float position display

1. float 浮动
   浮动看兄弟
   哥哥开了浮动,弟弟开浮动跟着哥哥走
   哥哥没开浮动,弟弟开浮动弟弟在哥哥的下面走
   eg：float:left; //靠左边浮动
   浮动只有左右
2. position定位
   当一个元素想进行定位的时候,需要给元素开:position
   position: static 普通文档流没有开定位
   position:fixed开定位了 以窗口为参照物
   position:relative开定位了 相对自己原有的位置进行定位
   position:bsolute开定位了 在某一定的定位范围之内进行定位
   元素一旦开启定位之后,就会脱离普通文档流,来到定位文档流这一层
   当一个元素开启定位置后,该元素的上下左右就管用了
   position定位的一般用法
   给大元素开相对定位:position: relative;
   给小元素开绝对定位:position: absolute;
3. 弹性布局
   使用步骤:
   1. 给大盒子开弹性模式display: flex;
flex-direction: column;修改主轴方向
   2. 给小盒子开弹性比例flex: 1;
   3. 弹性布局的方向称为主轴justify-content
      另外一个方向称为次轴align-item
      特别强调:弹性布局是可以嵌套的
      space-between 中间空间一样多

圆角

border-radius: 50%;
同理,四个角度可以分开做圆角
border-top-left-radius: 10px;等等…

边框

边框的本质是一个三角形,
可以分别给四个方向做四条不同的边框:
border-left: 100px solid red;
border-right: 100px solid green;
border-top: 100px solid blue;
border-bottom: 100px solid orange;

颜色的三种表示方式

1. 单词: red , blue , orange , pink , purple.....

2. rgb:r :红色 g:绿色b:蓝色
   每个颜色通道的取值范围:0~255rgb(255 , 0 ,0) —> 红色
   rgba: r:红色 g:绿色 b:蓝色 a:透明度
   a:透明度的取值范围0~10:完全透明1:不透明
   eg: rgba(0,0,0,0) //透明

3. 十六进制
   解释:`#rrggbb用法:#00OOFF简写:#00f
   注释:十六进制的取值范围:O~f
   0 , 1 ,2 , 3 , 4 , 5 , 6,7 , 8 , 9 , a , b , c , d ,e , f

变形 transform

(视觉效果,不会修改或占据元素的位置即 变形 layer 层上的变形)
transform:四种变换:
1．平移 translate(100px , 100px)
2．旋转 rotate(23deg)
3．缩放 scale(0.4 ,1.2)
4. 拉伸 skew(15deg , 23deg)

字体设置:

字体加粗:font-weight:bold;
文字居中:text-align: center;
文字大小: font-size: 30px;
文字颜色: color: red;

渐变背景

• 线性渐变:
  background: linear-gradient(180deg , red 50% , blue 0%);
  解释:
  background: linear-gradient(渐变方向,第一个渐变颜色所占比例,第一个渐变颜色,所占比例);
• 径向渐变:
  background: radial-gradient(red , blue);
  解释:
  中心为红色,向四周逐渐过渡为蓝色

背景图片

    `background-image: url(图片地址);`

背景尺寸

background-size: 100px 100px; //具体大小模式
background-size: cover; //覆盖模式
background-size: contain; //包含模式

背景重复

background-repeat : repeat; // x和y 两个方向都重复,默认值
background-repeat : repeat-x; // x方向重复
background-repeat: repeat-y; //y方向重复
background-repeat : no-repeat; //不重复

背景位置坐标

backgrounnd-position: 10px 10px;

动画

1. 创建或者自定义一套动画

            @keyframes zhuan{
                0%{
                    transform: rotate(Odeg);
                }
                100%{
                    transform: rotate(3600deg);
                }
            }

2. 使用动画

   在需要使用动画的元素的样式中增加animation样式:

   • 解释:
     animation:动画名称持续时间速度延迟次数(infinite无数次);
animation: move 1s linear 0s 1;
   • 让动画停止在100%的状态:
     animation: move 1s linear 0s 1 forwards;
   • 让动画分割成一定的步数:
     animation: move 1s steps(8) 0s 1;

w和h单位

v: view: 界面
w: width:宽度
width: 100vw; //占据整个屏幕100%的宽度
height: 100vh; //占据整个屏幕100% 的高度

阴影的用法

box-shadow: -16px 21px 90px red;
解释:box-shadow:x偏移量 y偏移量模糊度阴影颜色;

overflow

父元素里面有个小元素
但是因小元素太大,或者位置太偏而导致其超出父元素了
给父元素增加:overflow: hidden;
超出父元素的部分就会隐藏
给父元素增加:overflow: scorll;
元素就可以滚动了

按照显示display方式

分三类: display:inline-block

1. 行标签行元素 inline 元素沾不满一行 不能改变宽高 span
2. 块标签块元素 block 元素能沾满一行能够改变宽高默认宽度为父元素100% div
3. 行内块标签行内块元素 inline-block
   • 对内:能够改变宽高的行元素
   • 对外:显示为行元素的特点对内:显示为块元素的特点

vertical-align 基线对齐方式
比如开启行内块元素后,对其方式为底部基线对齐,这时候使用vertical-align进行对其基线修改达到我们想要的目的

选择器

: class 选择器, 选择标签的class
,: 组合选择器
>:下一级选择器
空格: 下N级选择器
#: id 选择器, 选择标签的id

优先级问题: (行内样式>id>class>标签名>继承)

• 选择器的继承问题:块元素会默认继承父元素穿透属性:长,宽,字体颜色,字体大小…

• 权重: id:100 class:10 div:1 可以相加 (数字只是代表,不代表一个class等于10个div)
  例如:
  div .class{ *** } 优先级11
  .class{ *** } 优先级10
  .class .div .div{ *** } 优先级30
  当优先级一样时,用后写的样式
  (标签内的样式优先级最高 比id还高 eg:<div style='' class='name' id='id'>)

• 总结: 行内样式 > id > class > 标签名 > 继承

标签

1. 标签一共分三部分:

   1. 标签名称: 开始标签结束标签多一个/
   2. 标签内容: 开始标签与结束标签之间的东西
   3. 标签的属性:
      • 必须在开始标签上
      • 属性与标签名属性与属性之间要用空格隔开
      • 一个标签身上可以有无数个属性
      • 属性名=“属性值”
        • 固定属性
        • 额外属性

2. 常见的标签
   <div>内容</div> 块级无意义标签
   <span>内容</span> 行级无意义标签
   <p>内容</p> 段落标签 双标签
   <hr /> 分割线标签 单标签
   <br /> 换行标签 单标签
   <img src="图片地址"/> 图片标签 单标签
   <a href="跳转地址">百度</a> 跳转标签 双标签
   <h1>内容</h1> 标题标签h1~h6 双标签
   <input type="text" /> 输入框标签
   <button class="an" >设置 </button> 点击按钮标签

样式的写法

选择器{
	样式名称:样式值;
	样式名称:样式值;
	}

"选择器解释"∶

• div:直接按照标签名去选择
• .one: .语法,是按照标签的类名进行选择

居中

1. 普通排版:

   • 块元素: 给自己增加 margin: 0 auto；
   • 行元素: 给父元素增加 text-align:center; 具有穿透属性 即可以继承

2. 定位局居中:

   • 开定位
     • 让元素蒙: top:0; bottom:0;
     • margin:auto

3. 弹性布局；

   • 给大盒子开 display:flex；
     不能开比例
   • 给大盒子 开 主轴或 次轴 居中样式
     主轴:justify-content: center;
     次轴: align-content:center;
     开主轴方向:flex-direction:row;

4. 定位+变形:

   • 开定位
     • left:50%
     • transform:translate(-50%,0);

5. 字体垂直居中:

   • line-height:100%
   • 让字体行高等于所在行里的高度 字体就默认居中了

css的第三种引入方式

1. 外部文件引入方式：<link rel="stylesheet" href="./xxx.css">

2. 标签： <style>选择器{***}</style>

3. 行内样式：标签内增加style属性（优先级: 3 > 2 > 1）

选择器

1. 通配符选择器
   选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:
   *{margin: 0;}

2. 爱恨原则 伪类选择器
   链接伪类选择器
   :link /* 未访问的链接 /
   :visited / 已访问的链接 /
   :hover / 鼠标移动到链接上 /
   :active / 选定的链接 */
   注意写的时候,他们的顺序尽量不要颠倒 按照 lvha (love hate 爱恨) 的顺序。

eg:

a:link{
	color: red;
}
a:visited{
	color: green;
}
a:hover{
	color: yellow;
}
a:active{
	color: orange;
}

3. 结构选择器
   :first-child:选取属于其父元素的首个子元素的指定选择器
   :last-child :选取属于其父元素的最后一个子元素的指定选择器
   :nth-child(n): 匹配属于其父元素的第 N 个子元素,不论元素的类型
   :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
   n 可以是数字、关键词或公式

4. 属性选择器
   [属性名=值] {}
[属性名] {} //匹配对应的属性即可
   [属性名^=值] {} //以值开头
   [属性名*=值] {} //包含
   [属性名$=值] {} //以值结束

5. E::first-letter文本的第一个单词或字(如中文、日文、韩文等)

6. E::first-line 文本第一行；

7. E::selection 可改变选中文本的样式；

8. E::before和E::after
   在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。

   E:after、E:before 在旧版本里是伪元素,CSS3的规范里“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before,这样做的目的是用来做兼容处理。

   ":" 与 “::” 区别在于区分伪类和伪元素
   之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。是伪元素在html代码机构中的展现,可以看出无法伪元素的结构无法审查
   注意
   伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性,表示伪元素的内容,设置:before和:after时必须设置其content属性,否则伪元素就不起作用。

文本常见样式

1. text-indent:首行缩进

2. text-decoration 通常我们用于给链接修改装饰效果

    | 值 	       | 描述 									  |
    | ------------ | -----------------------                  |
    | underline    | 定义文本下的一条线。下划线也是我们链接自带的 |
    | overline     | 定义文本上的一条线           			  |
    | line-through | 定义穿过文本下的一条线					  |
    | none         | 默认,定义标砖文本						  |
    
    text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
    | 值	   | 描述                		  |
    | -------- | ---------------- 			  |
    | h-shadow | 必须, 水平位置的阴影, 允许负值 |
    | v-shadow | 必需, 垂直位置的阴影, 允许负值 |
    | blur     | 可选, 模糊的距离              |
    | color    | 可选, 阴影的颜色              |
   

3. font-family:字体
   font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:
   p{ font-family:"微软雅黑";}
   可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
   常用技巧:
   1. 现在网页中普遍使用14px+。
   2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
   3. 各种字体之间必须使用英文状态下的逗号隔开。
   4. 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
   5. 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如
   font-family: “Times New Roman”;。
   6. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

4. font-weight:字体粗细

z-index

1. z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。
2. 如果取值相同,则根据书写顺序,后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位,绝对定位,固定定位有此属性,其余标准流,浮动,静态定位都无此属性,亦不可指定此属性。

过渡

    `transition: all 2s;`

鼠标样式

    `cursor :default ` //小白  
    `cursor :pointer`  //小手   
    `cursor :move` //移动    
    `cursor :text`  //文本

轮廓

    轮廓 `outline`
    (跟边框写法一样)

超出的文字隐藏

1. word-break:自动换行
   normal 使用浏览器默认的换行规则。
   break-all 允许在单词内换行。
   keep-all 只能在半角空格或连字符处换行。
   主要处理英文单词

2. white-space
   white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
   normal :　默认处理方式
   nowrap :　强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。
   可以处理中文

3. text-overflow 文字溢出
   设置或检索是否使用一个省略标记(…)标示对象内文本的溢出
   text-overflow : clip | ellipsis
clip :　不显示省略标记(…),而是简单的裁切
   ellipsis :　当对象内文本溢出时显示省略标记(…)
   注意一定要首先强制一行内显示,再次和overflow属性 搭配使用

样式前缀, 不同浏览器内核处理问题

    常见的浏览器兼容性处理方法
    `animation:zhuan 1 s liner 0s 1;`
   ` -webkit-animation` 谷歌 apple
    `-ms-animation `
    `-o-animation `
    `-moz-animation` 火狐
    为了兼容 写五遍

---