HTML

属性是一个名值对
标签是帮浏览器和搜索引擎解析
Meta 标签设置的是字符集，避免乱码,设定网站的元数据。
- keyword：表示网站的关键字
- content：指定数据的内容
- name: 指定数据的名称
- description：指定网站的描述，会显示在搜索结果下面
- http-equiv=“refresh”：网站重定向
header标签头部
nav标签导航
aside标签跟主题内容相关的内容（侧边栏）
article标签表示一个独立的文章
section标签表示一个独立的区块上面用不了的标签用这个
audio 标签向页面引入一个外部的音频，默认不允许自动播放
- controls 控制用户自动播放
- autoplay 音频是否自动播放
- loop 音乐是否循环播放
source标签指定文件
video标签和autio用法相同
如果IE8不兼容，用embed 标签
iframe标签引用别人的页面

CSS

语法：选择器：声明块
伪类用来描述一个元素的特殊状态比如：第一个子元素，被点击的元素，鼠标移入的元素
伪类一般情况用来：开头
伪元素指不存在的元素
em：是相对于元素字体的大小来计算的
- 1em= 1font-size
- em会随字体的大小而改变
rem : 相对于根元素的字体大小来计算的（一个font-size）
HSL值 HSLA值
- H 色相
- S 饱和度，颜色的浓度%
- L 亮度，颜色的亮度%
元素有两种状态
- 在文档流中
- 不在文档流中
布局
- 水平方向居中：设定宽度，marigin : 0 auto
- overflow
  - scroll 生成滚动条
  - auto 根据需要生成滚动条
- Margin塌陷问题，父元素包着子元素，子元素想要设置margin-top到父元素的左下方，就造成了margin塌陷
  - 完美解决方案就是给父元素添上定位
  - 给父元素加上boder
  - 使用padding-top达到目的
visibility 用来设置元素的显示状态
- visibility默认值，元素在页面上正常显示
- hidden 元素在页面中隐藏不显示，但是依然占据页面之中的位置
行内块元素边框贴着字
Box-sizing
- content 盒子内容区的大小
- border-Box 盒子内容区加上内边距的大小，内边距往内容区挤，就不用再计算边框改变，然后去调整宽度、高度。
outline 轮廓线用法和border一样，然后outline不会影响布局，border会把下面的元素挤开
Box-shadow 也不会影响布局
- 第一个值：水平偏移量，正值向右移动
- 第二个值：垂直偏移量，正值向下移动
- 第三个值：模糊半径
- 第四个值：阴影颜色
border-radius
- 设置一个圆形值为50%
浮动：脱离文档流
脱离文档流：
- 块元素不会独占一行。
- 脱离文档流后，块元素的宽度和高度被元素的内容撑开，也不分行和块了
高度塌陷问题
- 父子元素，父元素被子元素内容默认撑开，子元素设置了浮动，就脱离了文档流，导致后面的元素就挤上来了。
- 解决问题：
  - 1、设置inline-block
  - 2、设置元素的浮动
  - 3、设置父元素overflow:hidden
  - 4、设置父元素的伪类，::beforer,::after clear:both,display:table,content”
clear（清除浮动流）
- 让浮动元素带来影响的元素给清除浮动带来的影响
相对定位
- 相对定位会提升元素的层级
- 相对定位不会脱离文档流
- 相对定位不会改变元素的性质块还是块
绝对定位
- 绝对定位会脱离文档流
- 绝对定位会使元素提升一个层级
- 绝对定位设置了没设置宽高就会被内容撑开
- 绝对元素是相对于最近的包含块元素进行定位的（最近的开启定位的祖先块元素）
粘滞定位
- 下拉过首屏可以让元素吸顶
设置水平垂直居中的方式
- 设置元素绝对定位，设置margin:auto ,left:0,bottom:0,left:0,right:0
设置元素的层级, z-index
- 祖先元素永远在子元素的下面
background-clip: content-Box
- 将背景颜色值设置到内容区，边框和内边距不再有背景颜色
@font-face
- 指定字体的名字：font-family:”myfont”;
- src: url(“”)
通过伪元素来设置图标字体
- 1、找到设置图标的元素通过before或after选中
- 2、在content中设置字体编码
- 3、设置字体的样式
  - fab
  - font-family:”Font Awesome 5 Brands”
字体框实际上是字体所占的格子，设置font-size相当于设置字体框的高度
vertical-align 设置元素垂直对齐的方式
- 块元素包着img,可以用vertical-align 解决漏缝
- baseline 默认值基线对齐
- top 顶部对齐
- bottom 底部对齐
- middle 居中对齐
省略多行文字三件宝
- white-space: Nowrap;
- overflow:hidden
- text-overflow:ellipsis
设置二级菜单
- 给二级菜单的父元素添加:hover + 上二级菜单元素的类名,并让其脱离文档流
设置背景范围:background-clip
- boder-Box,背景会出现在边框下边
- padding-Box 背景不会出现在边框，只出现在内容区和内边距
- content-Box 背景只会出现在内容区
form表单元素
- action 表单要提交的服务器的地址
- 数据提交到服务器中，要为元素指定一个name值
- 单选框指定value,value最终是是用户填写的值
- autocomplete=“off”自动补全关闭
- readonly 只读
- disabled 禁用
弹性盒子
- flex-direction（指定容器中元素的排列方式）
  - row 从左到右水平排列
  - row reverse 反向水平排列
  - column 从上到下纵向排列
  - column reverse从下到上纵向排列
- flex-grow（指定弹性元素的伸缩系数）
  - 按比例分配
- flex-shrink（指定弹性元素的收缩系数）
- flex-basis 指定的是元素在主轴上的基础长度
  - 如果主轴是横向的则该值指定的就是元素的宽度
  - 如果主轴是纵向的则指定的是元素的高度
  - 默认auto
- flex-wrap（设置元素自动换行）
  - Now-wrap 不会自动换行，
  - wrap 元素沿着辅轴方向自动换行
- flex-flow（wrap和direction的简写属性）
- justify-content（常用设置元素水平居中）
  - 如何分配主轴上的空白空间（主轴上的元素如何排列）
  - 可选值：
    - flex-start 元素沿着主轴起边排列
    - flex-end 元素沿着主轴终边排列
    - center 元素居中排列
    - space-around 空白分布到元素两侧
    - space-between 空白均匀分布到元素间
    - space-evenly 空白分布到元素的单侧
- align-items:（元素在辅轴上如何对齐）
  - streach，将元素的长度设置为相同的值
  - flex-start 元素不会拉伸，沿着辅轴起边对齐
  - flex-end 沿着辅轴的终边对齐
  - center 居中对齐
  - baseline 基线对齐
- align-content: 辅轴空白空间的分布
- flex：增长缩减基础
- order 是指定元素的排列顺序
完美视口
- 手机端视图的默认宽度像素是980px
- 将网页的视口设置为完美视口
  - ```
  <Meta name=“viewport” content=“width=device*width,initial-scale=1.0”
```
- 结论：以后再写移动端的页面，就把上边写上
- vw表示视口宽度
  - 100vw=1个视口的宽度
- 设计图的宽度一般是750px 1125px
- vw适配
  - 0.1333333vw = 1px
  - 5.33333vw = 40px
  - font-size: 5.3333vw(公式：=100vw/750(设计图宽度) * 40)

Html加Css学习笔记

HTML

CSS

相关推荐