1 工作中导航应该怎么写？
- a标签 - 用来跳转页面
- 为了用户体验，我们应该将css样式设置在a标签
- li只写清除样式和浮动
2元素类型的分类：块级元素、内联/行内元素、可变元素
1.块级元素
- 块状元素是以宽高的矩形盒子在浏览器中显示
- 块状元素可以直接添加宽高
- 块状元素默认是上下进行排列的
- 块状元素默认是独占一行的
- 作用：块状元素用来嵌套内联/行内元素或者其他元素做网页布局的
2.内联/行内元素
- 内联不能直接设置宽高，宽高由当前自身决定
- 内联元素默认情况下在一行内逐个显示
- 内联元素的bug问题:在内联元素上设置margin-top/bottom可能会失效，但是行内依然是遵循盒模型布局规则
3.可变元素 - 不使用
- button
- 需要根据上下文的关系确定当前元素的类型
在浏览器书写一个文本框
- 文本框和a在一行内显示 -> 内联/行内元素
- input可以设置宽高 -> 块状元素
- input是行内块
- 可以直接添加宽高，并且会在一行内显示
- 常见的行内块：input、img
当input标签和img标签写在一起的时候出现的bug - 布局问题
解决：
- 原因:行内块的对齐方式 - 基线对齐
- 解决：img,input{vertical-align:top/middle}
3拓展1：哪些标签自带边框？
- border
- div、p、ul、li、a、hr、br、img、input、form、table、h1~h6
- 不去设置border属性，就有边框的属性
- input、textarea自带边框
拓展2：面试题 - 置换元素与非置换元素 - 变换/可变
- 有自己的固定宽高 hr、img、input
- 置换标签的属性可以改变 img、input
- 可以根据标签属性的改变显示不同的样式
- img src="地址"
- input type="类型"
4元素类型的转换:根据上下文确定当前标签是块还是行内
- 要求改写块元素的地方就写，该写行内就写行内
- a标签去写导航的时候 - 行内：无法添加宽高
如何去转化元素类型
属性：display
属性值：
- 官方给的属性值有19个，千锋后台考试有18个
- 常用的5个
常用的类型转化的属性值
- block 块 - 将当前元素转换为块级元素，使其具有块转元素的特点
- inline 行内 - 将其他元素转换为行内元素，使其具有行内元素的特点
- inline-block 行内块 - 将其他元素转换为行内块元素，使其具有行内块元素的特点
- list-item 列表项目 - 将其他元素类型转换为列表，使其具有列表元素的特点 - 块元素 - 了解
- none 无、没有 - 在当前页面将元素清除 删除的是html结构
- list-style：none
- border：none
- text-decoration：none
- background:none
浮动用处：给当前元素添加浮动之后 ，就相当于给当前元素添加display:block,但是当前元素依然是脱离文档
block和none是一对的，怎么使用？
- block转换为块元素，还可以控制当前元素显示
- none让元素显示
总结：
- 大部分块状元素默认的类型是block
- 大部分的行内默认的类型是inline
- 默认是行内块元素 img、input
- 列表默认的类型是list-item
- 重要的是掌握none和block的应用 ！
- float浮动的使用 ！
5 a标签的颜色设置一定要加在a标签上才能生效
6 图片的处理
图片的处理
- img html结构
- background css样式
- 宽高
如何让图片居中
- 千锋、卧龙、首都师范
- background:url() no-repeat center; 不是规范的 banner-定位
- 上线 seo搜索引擎 抓取页面重要部分
- img占位置
图片居中的方式- 针对img标签
- 给图片的父级容器添加text-align:center
- 给当前元素转换成行内块,添加垂直方向的对齐方式
- 在图片标签后面添加任意一个标签(span-不能有回车)
- 给span设置样式
- 转化成行内块、垂直方向居中、width/height
- 不用 麻烦
- 简单的方法 - 多着呢
7表单问题
表单遇到的问题
- 两个input对不齐、高度不一样
解决：
- 把input之间的空格给删除，不回车
- 给当前元素添加浮动
- type="button" 边框默认向内的
- 点击input的时候有一个黑色的框框 蓝色的细线
解决：
- 清除黑色方框 outline:none
- 提示文本的时候，修饰提示文本的样式
- value 占位置 - html结构的一部分
- placeholder 不占位置
