前端第二天：选择器+盒子模型

from：Joshua-2023-06-06前端第二天课程

css引入方式

1. 内嵌式：直接将css代码写在head标签内，该方式无法复用

   • 颜色方式
     • 直接使用颜色单词【支持潘通(pantone)流行色】
     • 直接使用色号 #000000 - #ffffff
     • 三原色rgb(x,y,z) 取值范围 0-255

2. 外链式：引入一个外部独立的css文件到本页面

   • rel:stylesheet： 表示引入的是一个样式表
   • href：独立文件的路径

   <link rel="stylesheet" href="./css/***.css">
   

3. 行内式：直接将css代码书写在标签内

行内式>外链式和内嵌式谁放在后边听谁的

css基本选择器

Selector:被翻译为选择器,选择器是 css 技术中
        最重要的技术,由于其简单易学,功能强大,可以非常快速的
        从全文中精确选取一个或者多个元素,之后进行样式渲染.
        后来很多前端技术都借鉴了选择器的语法,没有任何兼容性问题 

1. 标记选择器 标记名{ }
2. 类别选择器 .class的值{}
3. id选择器 #id的值{}

css复合选择器

1. 交集选择器

   span.test{
   	一个标签后面紧跟着类别或者ID，必须同时满足两个条件才可以成功选取
   }
   

2. 并集选择器

   sel1,sel2,sle3,...selN{
   	只要符合其中任意一个选择器就可以选取
   }
   

3. 后代选择器

   sel1 sel2 sle3 ... selN{
   	根据左祖先右后代的原则，精确拿去具有特定层级关系的最右侧元素
   }
   

4. 子辈选择器

   sel1>sel2{
   	仅仅选取特定元素的子元素,注意只有子元素不含孙辈元素
   }
   

5. 紧邻兄弟选择器

   sel1+sel2{
       以下三个条件缺一不可 A:向下选取 B:必须紧邻 C:互为兄弟
   }
   

6. 兄弟选择器

   sel1~sel2{
   	以下两个条件缺一不可 A:向下选取 B:互为兄弟
   }
   

7. 全选选择器

   *{选取页面所有元素，包括隐藏的元素}
   

css伪类选择器

a:link{
	设定链接的默认样式，此伪类只有链接可以用
}
a:visited{
	表示链接被访问过之后的样式，此伪类链接独享
}
a:hover{
	鼠标滑过时的样式，任意元素可用
}
a:activite{
	鼠标点击未松开时的样式，任意元素可用
}

love hate 先爱后恨----以上四个伪类使用时顺序不可逆

页面元素类型

页面元素存在多种类型,主要有以下两种

1. 块元素(block)
   eg: div p h1-h6 ul li table tr td 布局元素 等等
   块元素是页面中的主要组成部分,块元素自带换行,一行只能书写一个从上往下排列,如果不指定宽度,则默认与父元素同宽,如果没有父元素,则与body也就是浏览器同宽,块元素可以设置盒子模型参数,可以设置内部文本 对齐方式

2. 行内元素(inline 内联元素)
   eg: a span label img input
   行内元素在页面中大多进行信息提示使用,不是页面中的主要元素, 行内元素结尾没有换行,从左往右排列,一行可以存在多个,设置盒子模型五效,设置对齐方式无效,行内元素的宽高完全依据内部嵌套的内容

   img input:这两个元素较为特殊,又被称之为内联块元素 (inline-block) 与其他行内元素不同的是可以设置盒子模型

• 隐藏元素
  • display:none; 隐藏自己，隐藏后原位置不保留
  • visibility:hidden; 隐藏自己，隐藏后原位置保留
  • opacity:0; 隐藏自己，隐藏后原位置保留
  • overflow:hidden; 溢出部分隐藏

css盒子模型

​ 标准文本流(文档流 normal document flow) 其实就是一种没有书写任何 css 下默认得html 状态 由于我们页面中大多数元素都是块元素,所以这些元素就像水流一样,从上往下排列,如果通过某种手段将某个元素挪走, 则其它元素继续维护这种从上往下的水流状态

​ 在书写页面时,首先书写 html 结构,呈现标准文本流状态之后添加 css 样式,样式书写完毕之后最终添加 js 动作，切忌边写 xxx 边写 xxx

​ 盒子模型14个参数

1. margin-top/ rigth/bottom/left

2. padding-top/ rigth/bottom/left

3. width

4. heigh

   使用简略写法
       padding/margin:上 右 下 左;
       padding/margin:上 (右左) 下;
       padding/margin:(上下) (右左);
       padding/margin:(上右下左);
   
   
   width：80px  
   heigth：100px
   <!-- 设置固定大小-->
   width：80%  
   heigth：100%
   <!-- 设置固定比例
   	但是如果想要高度的百分比奏效，需要设置
   html,body{
       height:100%;
    }-->
   width：80vw 
   heigth：100vh
   <!-- 设置固定比例
   vw:viewport width 视口宽度 
   vh:viewport height 视口高度
   -->
   

---