随手笔记（1）

html+css 随手笔记

全局属性:是所有的html都可以使用的属性

• class 一个或多个类名

• id 规定元素的唯一

• data-* 自定义属性 设置私有属性

• accesskey 制定快捷键

• style 规定元素的行内 CSS 样式

• 关系型选择器

> 父子

• 空格 子孙

• ~普通兄弟

• +相邻兄弟

盒子模型

组成元素：magin 边框 与其它盒子的距离 magin变大 盒子不会变化 盒子与盒子之间的距离会变大

​ padding 是边框与内容区域的距离 标准盒子 padding变大 盒子变大

​ border 盒子的边框

​ content 标准盒子 为 width 和 height

IE盒子：

​ content= width - padding-left - padding-right - border-left - border-right

​ 在IE盒子中border与padding变化不会改变盒子大小，会改变内容大小

相对定位

• 相对自身起始位置进行定位 自身脱离了文档流

• 定位后原来位置不被其他元素所占据

• 应用 适合用于元素微调

绝对定位 absolt

• 相对祖籍元素中具有 position属性的元素 且值不是static的元素，进行绝对定位，如果所有祖籍都没有该属性，那么该属性相对于body进行绝对定位

• 定位后元素本身脱离文档流 位置被其他元素所占据 元素大小有默认百分之百为内容大小（默认无外边距）

固定定位 fixed

• 相对于浏览器视图窗口进行定位；

• 元素自身脱离文档流

• 原来的位置被其他元素所占据

• 元素有原来默认宽度百分之百，变为内容大小 尽可量小（行内块）

• top 目标元素距离视图窗口顶部 如果小于0 则往上走

• bottom 目标元素距离视图窗口低部 如果小于0 则往下走

• left 目标元素距离视图窗口左边 如果小于0 则往左走

• right 目标元素距离视图窗口右边 如果小于0 则往右走

弹性布局

弹性布局的规律是什么呢？有哪些特点？

1.从父元素角度看，首先自身内部流 发生了改变，从流式布局变为弹性布局（文档流变为弹性流）

• 本身已然处于流式布局中，没有发生变化，（在他的父容器中布局）

2.从子元素角度分析，以什么为主进行布局?进行怎么样的排列

• 子元素在父容器中沿着主轴进行布局，主轴上对齐方式，从起始位置。结束位置 两端对齐…

• 交叉轴与主轴垂直 默认起点与主轴一直

• 子元素在交叉轴对齐方式 不是一个一个子元素排列 而是已经在主轴上排列好的子元素 部分整体在交叉轴上进行排列

display：flex；

flex-flow 确定主轴方向以及是否换行

jusify-content 确定子元素在主轴对齐方式

align-item 决定子元素在交叉轴对齐方式

字体图标引入

1.找到图片网站 https://www.iconfont.cn/

2.搜索对应图片 并下载

3.下载字体图标库 https://fontawesome.com/

4.解压安装包

5.引入对应的文件 css 文件

6.使用

• 进入网站搜索图标：点击复制 图标列表

• 复制贴贴类名

显示隐藏

显示 display:block

隐藏 display：none

​ visibility：hidden

两个隐藏有什么区别

display：none 元素隐藏 不在文档流 但是元素节点依然存在

visibility：hidden 隐藏的是样式 元素依然在文档流在 元素节点也存在

图片精灵

针对：多个小图片合成大图片使用背景属性获取大图片中的一个小图片

优点 提高网站性能 减少资源加载 减少网络请求次数

使用方式

1.background-size:100*横向图片的个数，100%纵向图片的个数

2.background-position

3.background-repeat：no-repeat

浮动 float

1.浮动后：元素本身脱离文档流，原来的位置被其他元素所占据 （由自身的块元素变成行内块）

2.浮动后：在同一个父元素中，目标元素会占据一个浮动后位置

​ 注意：浮动只能是，子元素在容器中进行位置移动，如果父元素剩余宽度不能容纳两个一样的子元素，就会换行

** 目标元素的浮动范围：父容器

4.同一位置多个元素；具有浮动属性的元素；层级高于不具有浮动属性的元素

总结：浮动规律；第一步元素在布局流中的起始位置，第二步；沿自身水平方向进行浮动，如果水平方向空间不够 那么自动换到下一行

背景属性 background

背景：可以想象成为盒子的底面，我们可以给这个底面任何涂鸦 例如颜色，图片 多个图片 颜色+图

background-image: url() 设置背景图片 值可为多个 用逗号分开

background-size 设置背景图片大小 值一横向 值二纵向

background-position 设置背景图片位置 值一 水平方向移动 值二竖直方向移动

background-repeat 是否平铺 适用于 背景大于图片时候

background-attachment：fixed 固定背景图片