标签：flex 标签 元素 指定 笔记 Html 设置 对齐 Css
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 是指定元素的排列顺序
- flex-direction（指定容器中元素的排列方式）
-
完美视口
-
手机端视图的默认宽度像素是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)
-
标签：flex,标签,元素,指定,笔记,Html,设置,对齐,Css 来源： https://www.cnblogs.com/yumengcode/p/14848011.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。