2022-07-10 第一组 田龙跃 学习笔记

锚点： xxx为 id 直接跳到对应ID块（同一个页面位置）《多个目录时使用》
target：blank 在新标签页中打开 href：地址

文本框属性 required（必填） placeholder（水印（提示））

div块级元素（使用时会独占一行）
span行内元素（在一行里使用）

viewport网页在手机端显示不会发生变化

层叠样式表--同名样式后声明的会把先声明的覆盖掉

内部样式表-在style中编写css样式
内联样式表-在标签中定义css样式
外部样式表-通过link标签导入（优势：代码分离，解决重复样式问题，浏览器会还存起来提高反应速度）

后代选择器 h1 p{color:red;} h1下面的所有p标签都是这个样式（h1 p）
子元素选择器div>span{font-size:900} div的第一个子元素span的样式（h1>p）
属性选择器选择页面上所有具有该属性的标签（[type=text]）（class~=font所有类包含font的类的的选择器）

css三个特性：
1.层叠性：多个样式作用在同一个元素上，同类型选择器后解析的会覆盖先解析的 ，不同类型选择器看权重
2.继承性：子元素会继承父元素的某些样式
3.优先级：行内>id>类>标签
权重：
继承 * 0，0，0，0
标签选择器： 0，0，0，1
类和伪类： 0，0，1，0
id选择器： 0，1，0，0
行内样式： 1，0，0，0
！important 无穷大
width，height 大于无穷大
贡献值是可以累加的，不过不能跨段位相加，同级相加‘不能进位’，权重不能继承(无穷大就是无穷大，如何同时有max/min-width/height时!important时会失效)

border，margin--像素顺序（上右下左）
margin-我离外面物体的距离（白话）

flex布局就是一个一个排好display: flex;（具体使用看笔记）

position：absolute：脱离文档流（脱离文档流就像是飘在了页面上方，会盖住其他东西），在页面之上（不在占据网页内的位置）定位参照父级元素---------------绝对定位（肯定有一个父级元素设置为position：relative）
position：relative：没脱离文档流，占据页面位置-----------------相对定位
position: fixed (固定定位) ?元素一直固定在一个位置无论滚轮滚到哪
z-index //使用场景：当定位的盒子重叠在起，设置显示层级越高的越显示在上面

float元素会脱离文档流

可以给整体网页设置最小宽度min-width来防止窗口大小改变flex弹性布局中的div块内的元素排布和大小！！！
line-height行高：每行的高度

rowspan="占几行" colspan="占几列" 当前位置向下后者向后

json：html属性中的name就是json字符串中的key值，value（如果有的话）市Json字符串中的value值1.

块级元素可以设置宽高
display：设置元素的展示模式， inline 行内；block块状；inlin-bolck行内块：
box-sizing盒子模型：
1.border-box：保证盒子等大小不变，压缩内容。（怪异盒子模型）
2.content-box：不保证盒子大小，只保证我的内容大小不能变。（标准盒模型）

文档流：从上到下，从左到右
position：会脱离文档流(浮在文档流之上)-父相子绝
1.static：文档流、文档流：从上到下，从左到右依次排列
2.absolute：相对于父元素
3.relative：相对定位（相对于自己原来的位置）
4.fixed：固定的(固定在页面的某个位置，不会随着滑动改变在页面中的位置)

visibility可见性：不在页面上显示，但保留自己的位置
display：none：不在页面上显示，也不保留位置
overflow溢出设置：hidden隐藏，溢出的地方不显示

float浮动：事多！！！！！！！！！慎用
clear:both:清除前面的所有浮动，防止（内容坍塌：原来占据容器的元素浮动了，致使原来未设置宽高的容器消失了，在页面上没有显示了）

display:flex设置容器内的内容排版为弹性布局