Day03
css：层叠样式表
给页面中的html标签设置样式
style标签写在head标签里面title标签下面
CSS 标点符号都是英文状态下的
常用引入方式：注意作用范围
link标签写在title下面 是一个标签
标签选择器：
- 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签
类选择器 .开头：（一对多 多对一）姓名可重复
- 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
- 一个标签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签（常用）
id选择器 #开头：（一对一）身份证号唯一
- 所所有标签上都有id属性
- id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
通配符选择器 *开头：通通选中
文本样式 ：
- 文本缩进：text-indent
- 文本水平对齐方式：text-align
如果需要让文本、span标签、a标签、input标签、img标签水平居中，text-align属性给文本所在标签 （文本的父元素） 设置
如果需要让div、p、h（大盒子）水平居中？
可以通过margin : 0 auto ; 实现
如果需要让 div、p、h（大盒子） 水平居中，直接给 当前元素本身设置即可
- 文本修饰：text-decoration
行高：line-height
让单行文本垂直居中可以设置 line-height : 文字父元素高度
网页精准布局时，会设置 line-height : 1 可以取消上下间距
行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题
font : style weight size/line-height family ; （s w s/l f）
height和line-height的区别：
height：指定区域的高度
line-height：一行的高度，简称行高。
height定义了一个盒子的高度，这个盒子的背景是浅绿色，当height的值发生变化时，浅绿色的背景也会随之做高度上的变化。
line-height：定义的是每一行的高度，即为输入的内容。
当height和line-height相等时，即盒子的高度和行高一样，内容居中
Day04
复合选择器：
后代选择器：空格
作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
选择器语法：选择器1 选择器2 { css }
注意点：
- 后代包括：儿子、孙子、重孙子……
- 后代选择器中，选择器与选择器之前通过 空格 隔开
子代选择器：>
作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
选择器语法：选择器1 > 选择器2 { css }
注意点：
- 子代只包括：儿子
- 子代选择器中，选择器与选择器之前通过 > 隔开
并集选择器：
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ， 选择器2 { css }
注意点：
- 并集选择器中的每组选择器之间通过 , 分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
hover伪类选择器 ：
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover { css }
注意点：
- 伪类选择器选中的元素的某种状态
emmet语法：
背景颜色：
background-color（bgc）
background-color：red；
格式：
color:red;
color:#f00;
color:rgb(0,0,0);
color:rgba(0,0,0,.5);
背景图片：
background-image（bgi）
background-image：url（图片的路径）；
背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的（文本也算内容）
背景平铺：
background-repeat（bgr）
背景位置：
background-position（bgp）
方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
background：连写
推荐：background：color image repeat position
连写中省略的属性会覆盖上面的对应属性
img标签和背景图片的区别：
需求：需要在网页中展示一张图片的效果？
方法一：直接写上img标签即可
img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二：div标签 + 背景图片
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
（给图片设置块元素即可去除图片底部小空白）
元素显示模式：
块级元素：
属性：display：block
显示特点：
- 独占一行（一行只能显示一个）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
行内元素：
属性：display：inline
显示特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签：
a、span 、b、u、i、s、strong、ins、em、del……
行内块元素：
属性：display：inline-block
显示特点：
- 一行可以显示多个
- 可以设置宽高
代表标签：
input、textarea、 button、select……
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
元素显示模式转换
HTML嵌套规范注意点
-
块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
但是：p标签中不要嵌套div、p、h等块级元素* ***
-
a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签* *
CSS三大特性：
一、继承性
常见应用场景：
- 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
- 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
继承失效的情况：
如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
- a标签的color会继承失效
其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
- h系列标签的font-size会继承失效
其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
- div的高度不能继承，但是宽度有类似于继承的效果 ，实际上是块级元素独占一行的特性
宽度属性不能继承，但是div有独占一行的特性
二、层叠性
特性：
- 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
- 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
三、优先级
Day05* *
优先级：
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
（行内样式
最帅的李狗蛋
）注意点：
- !important写在属性值的后面，分号的前面！
- !important不能提升继承的优先级，只要是继承优先级最低！
- 实际开发中不建议使用 !important 。
权重叠加计算：
场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
比较规则：
- 先比较第一级数字，如果比较出来了，之后的统统不看
- 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
- ……
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
注意点： !important如果不是继承，（如果是继承，那优先级最低）则权重最高，天下第一！
权重计算题解题步骤：
- 先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
- 通过权重计算公式，判断谁权重最高
注意点：
实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，
只要没有直接选中，都按照继承最近原则。
Chrome调试工具：
PxCook基本使用：
-
通过软件打开设计图
① 打开软件 ② 拖拽入设计图 ③ 新建项目
-
常用快捷键
-
放大设计图：ctrl + +
-
缩小设计图：ctrl + -
-
移动设计图：空格按住不放，鼠标拖动
-
常用工具
-
量尺寸
-
吸颜色
-
从psd文件中直接获取数据
-
切换到开发界面，直接点击获取数据
盒子模型：
CSS 中规定每个盒子分别由：内容区域（
content）、内边距区域（padding）、边框区域（border）、外边距区域（margin
）构成，这就是 盒子模型
内容的宽度和高度
作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性：width / height
常见取值：数字+px
边框（border）- 单个属性
作用：给设置边框粗细、边框样式、边框颜色效果
属性值：单个取值的连写，取值之间以空格隔开
如：border : 10px solid red;
宽度 样式 颜色 顺序
快捷键：bd + tab
盒子实际大小初级计算公式：
盒子宽度 = 左边框 + 内容宽度 + 右边框
盒子高度 = 上边框 + 内容高度 + 下边框
内边距（padding）- 取值
作用：设置 边框 与 内容区域 之间的距离
属性名：padding
常见取值：
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
盒子实际大小终极计算公式：
盒子实际大小终极计算公式：
盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
解决方法 ① ：手动内减
操作：自己计算多余大小，手动在内容中减去
缺点：项目中计算量太大，很麻烦
解决方法 ② ：自动内减
操作：给盒子设置属性 box-sizing : border-box ; 即可 （box-sizing默认属性值是contebt-box）
#笔记 box-sizing : border-box CSS3盒模型 box-sizing : content-box 标准盒模型
优点：浏览器会自动计算多余大小，自动在内容中减去
外边距（margin）- 取值
作用：设置边框以外，盒子与盒子之间的距离
属性名：margin
常见取值：
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
外边距margin不计入盒子实际大小
左上自己动，右下别人动
场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的
margin和padding，后续自己设置
比如：body标签默认有margin：8px
比如：p标签默认有上下的margin
比如：ul标签默认由上下的margin和padding-left
对于块元素居中方法： margin：0 auto；
场景：水平布局 的盒子，左右的margin正常，互不影响
结果：最终两者距离为左右margin的和
外边距折叠现象 – ① 合并现象
场景：垂直布局 的 块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：避免就好
只给其中一个盒子设置margin即可
外边距折叠现象 – ② 塌陷现象
场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
结果：导致父元素一起往下移动
解决方法：
- 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
- 给父元素设置overflow：hidden
- 转换成行内块元素 inline-block
- 设置浮动
行内元素的margin和padding无效情况
场景：给行内元素设置margin和padding时
结果：
- 水平方向的margin和padding布局中有效！
- 垂直方向的margin和padding布局中无效！
前提：不设置宽度的块级元素
Day06
结构伪类选择器：
目标：* 能够使用* 结构伪类选择器 在HTML中定位元素
作用与优势：
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减少对于HTML中类的依赖，有利于保持代码整洁
- 场景：常用于查找某父级选择器中的子元素
nth-of-type结构伪类选择器
伪元素：
目标：* 能够使用* 伪元素 在网页中创建内容
伪元素：一般页面中的非主体内容可以使用伪元素
区别：
- 元素：HTML 设置的标签
- 伪元素：由 CSS 模拟出的标签效果
注意点：
-
必须设置content属性才能生效 （不然伪元素不生效） 伪元素必写属性 content: ’ ’;
(伪元素写两个冒号)
-
伪元素默认是行内元素（不能直接设置宽高，除非转换显示方式，display）
标准流：
又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
浮动：
早期的作用：图文环绕
现在的作用：网页布局
浮动的代码
属性名：float
属性值：left 左浮动 right 右浮动
浮动的特点
- 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
相当于从地面飘到了空中
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素 （标准流里面没有文字，会被浮动元素完全覆盖）
- 浮动找浮动， 下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素会受到上面元素边界的影响
- 浮动元素有特殊的显示效果
一行可以显示多个
可以设置宽高
注意点：
浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中
浮动的目的：为了让多个元素在一行上显示(或者一左一右显示)
-
浮动的元素会脱离标准流: 不占之前的位置
-
一个元素浮动了，其余的兄弟元素也要浮动(一浮全(兄弟)浮)
-
浮动的父元素可以设置尺寸限制浮动的范围
-
浮动的块级元素会失去独占一行的特性，默认的宽高由内容撑开
-
行内元素浮动，会隐式转换成块级元素，无需db dib可以直接设置宽度和高度
清除浮动的方法：
① 直接设置父元素高度
② 额外标签法
操作：
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 clear:both
特点：
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
③ 单伪元素清除法
操作：用伪元素替代了额外标签
优点：项目中使用，直接给标签加类即可清除浮动
④ 双伪元素清除法
可以解决margin的 塌陷问题
优点：项目中使用，直接给标签加类即可清除浮动
— ⑤ 给父元素设置overflow : hidden
Day07
定位：
静态定位：
介绍：静态定位是默认值，就是之前认识的标准流。
代码： position：static；
注意点：
- 静态定位就是之前标准流，不能通过方位属性进行移动
- 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
相对定位：
介绍：自恋型定位，相对于自己之前的位置进行移动
代码： position：relative；
特点：
- 需要配合方位属性实现移动
- 相对于自己原来位置进行移动
- 在页面中占位置 → 没有脱标
应用场景：
- 配合绝对定位组CP（子绝父相）
- 用于小范围的移动
绝对定位：
拼爹型定位，相对于非静态定位的父元素进行定位移动
代码： position：absolute；
特点：
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置 → 已经脱标
应用场景：
- 配合绝对定位组CP（子绝父相）
固定定位
介绍：死心眼型定位，相对于浏览器进行定位移动
代码： position：fixed；
特点：
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置 → 已经脱标
应用场景：
- 让盒子固定在屏幕中的某个位置
绝对定位相对于谁移动？
- 祖先元素中没有定位 → 默认相对于浏览器进行移动
- 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动
子绝父绝特殊场景
场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！
原因：
父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局
（内边距不会影响定位）
子绝父相水平居中案例-解决方法
1.子绝父相
- 先让子盒子往右移动父盒子的一半
left：50%
- 再让子盒子往左移动自己的一半
普通做法：margin-left：负的子盒子宽度的一半
缺点：子盒子宽度变化后需要重新改代码
优化做法：transform：translateX(-50%)
优点： 表示沿着X轴负方向（往左）始终移动自 己 宽度 的一半，子盒子宽度变化不需要更改代码
（margin-left取值的百分比相对于父元素而言）
子绝父相水平垂直都居中案例-解决方法
- 子绝父相
- 让子盒子往右走大盒子一半
left：50%
- 让子盒子往下走大盒子一半
top：50%
- 让子盒子往左+往上走自己的一半
transform：translate(-50%，-50%)；
不同布局方式元素的层级关系：
标准流 < 浮动 < 定位
不同定位之间的层级关系：
相对、绝对、固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素（更改html结构顺序）
更改定位元素的层级：
场景：改变定位元素的层级
属性名：z-index
属性值：数字
数字越大，层级越高
装饰：
垂直对齐方式
属性名：vertical-align
属性值：
项目中 vertical-align 可以解决的问题
- 文本框和表单按钮无法对齐问题
- input和img无法对齐问题
- div中的文本框，文本框无法贴顶问题
- div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题 （常见）
- 使用line-height让img标签垂直居中问题
注意点：
学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
推荐优先使用浮动完成效果
光标类型：
场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
边框圆角：
场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px 、百分比
赋值规则：从左上角开始赋值， 然后顺时针赋值，没有赋值的看对角！
溢出部分显示效果
溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
属性名：overflow
元素本身隐藏
场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
常见属性：
- visibility：hidden
- display：none
区别：
- visibility：hidden 隐藏元素本身，并且在网页中 占位置
- display：none 隐藏元素本身，并且在网页中不占位置
注意点：
开发中经常会通过 display属性完成元素的显示隐藏切换
dispay：none；（隐藏）、 display：block；（显示）
（拓展）元素整体透明度
场景：让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1之间的数字
1：表示完全不透明
0：表示完全透明
注意点：
opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
链接伪类选择器
场景：常用于选中超链接的不同状态
LVHA 顺序 !
