做完登录页的收获

任务四：登录页

定位：

  1. static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

  2. relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　

  3. absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

  4. fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

区分absolute和relatve

relative：
定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。

无论父级存在不存在，无论有没有TRBL（top\right\bottom\left），均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。

absolute:
定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。

  • 如果没有TRBL(top、right、bottom、left)，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方
  • 如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
  • 如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由 TRBL决定。父级的padding对其没有影响。

什么是文档流？

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

只有三种情况会使得元素脱离文档流，分别是：浮动绝对定位和相对定位。

z-index属性

z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系 的，一定是子级在上父级在下。

PS：使用static定位或无position定位的元素z-index属性是无效的。

表单:一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等,常常被用到的是表单标签是输入标签<input>

  • <input type="text"> 文本域（Text Fields）
  • <input type="password"> 密码字段密码已星号和点表示
  • <input type="radio"> 单选按钮（Radio Buttons）
  • <input type="checkbox">复选框（Checkboxes）
  • <input type="submit"> 提交按钮(Submit Button)

其他一些常用的标签

  • <textarea> 定义文本域 (一个多行的输入控件)
  • <label> 定义了 <input> 元素的标签，一般为输入标题
  • <select> 定义了下拉选项列表
  • <option> 定义下拉列表中的选项
  • <input type="reset">定义重置按钮
  • <inputtype="hidden">隐藏域的作用

表单属性

  1. name: 表单提交时的名称
  2. action: 提交到的地址
  3. method: 规定用于发送 form-data 的 HTTP 方法，提交方式：get和post
  4. enctype:规定在发送表单数据之前如何对其进行编码
  5. application/x-www-form-urlencoded：在发送前编码所有字符（默认）
  6. novalidate 属性是一个 boolean(布尔) 属性.规定在提交表单时不应该验证 form 或 input 域

input属性

  1. name定义input 元素的名称
  2. type： button/checkbox/file
    hidden/image/password
    radio/reset/submit/text规定 input 元素的类型
  3. checked加checked属性会默认选上
  4. placeholder 用于在输入框中显示提示信息
  5. value 规定 input 元素的值
  6. disabled 当 input 元素加载时禁用此元素,就是禁止输入
  7. autofocus规定输入字段在页面加载时是否获得焦点
  8. required 属性是一个 boolean 属性.规定必须在提交之前填写输入域

type中的一些参数设定可检验输入框中输入的内容是否符合格式

  • 邮箱 <input type="email">
  • 域名 <input type="url">
  • 电话 <input type="number">
  • 日历 <input type="date pickers">
  • 搜索 <input type="search">
  • 范围 <input type="range">
  • 颜色 <input type="color">

深度思考

哪些css属性可以设置百分比，其计算原则是什么？

可以使用百分比的样式属性:

  • 定位：top,right,bottom,left;
  • 盒模型：height,width,margin,padding,
  • 背景：background-position,background-size(css3),
  • 文本：text-indent，字体：font-size;
定位属性的包含块一定是父元素吗？

定位属性的百分比的参考系是包含块。关于包含块（containing block）的概念，不能简单地理解成是父元素。如果是静态定位和相对定位，包含块一般就是其父元素。但是对于绝对定位的元素，包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。

如何理解Web语义化？

语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。

  • 正确的标签做正确的事情
  • 页面内容结构化
  • 无CSS样子时也容易阅读，便于阅读维护和理解
  • 便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO

html 语义化标签

html语义化标签包括 body, article, nav, aside, section, header, footer, hgroup, 还有 h1-h6 address等。

  • header代表“网页”或者“section”的页眉，通常包含h1-h6 元素或者 hgroup, 作为整个页面或者一个内容快的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者相关logo。
  • hgroup 元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题组合
  • footer元素代表“网页”或任意“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。
  • nav 元素代表页面的导航链接区域。用于定义页面的主要导航部分
  • article 代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。
  • section 元素代表文档中的“节”或“段”，“段”可以是指一片文章里按照主题的分段；“节”可以是指一个页面里的分组。
  • aside 元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料，标签，名词解释等。在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏。

CSS语义化

class和ID命名的语义。class属性作为HTML与CSS衔接的纽带，其本意是用来描述元素内容的。指用易于理解的名称对html标签附加的class或id命名。如果说HTML语义化标签是给机器看的，那么CSS命名的语义化就是给人看的。良好的CSS命名方式减少沟通调试成本，易于理解。

首先要满足W3C的命名规范和团队的命名规范。其次是高效和可重用性。

使用fixed的时候，在手机上查看是否会有问题，怎么解决？

苹果会对position: fixed的元素位置做调整
iPhone 的 IOS 系统为了用户体验，在键盘唤起的时候，会将页面的元素的 Fixed 元素取消掉，也可以理解为变成了 absolute 定位，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。

这便是 iOS 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。

  • 在 android 手机下 fixed 表现要比 iOS 更好，软键盘弹出时，不会影响fixed元素定位；
  • 不要在 fixed 元素中使用 input / textarea 元素。
  • 在开发项目时，可以考虑分为两个版本：iOS下使用 iScroll的解决方案，Android下使用 position:fixed。
其他的问题：失效的 position:fixed

下述 3 种方式目前都会使得 position:fixed 定位的基准元素改变

  • transform 属性值不为 none 的元素
  • perspective 值不为 none 的元素
  • 在 will-change 中指定了任意 CSS 属性

当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先position:fixed 将会失效。原因是什么呢？

Stacking Context -- 堆/层叠上下文

堆叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
image

如何触发一个元素形成 堆叠上下文
  • 根元素 (HTML),
  • z-index 值不为 "auto"的 绝对/相对定位，
  • 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
  • opacity 属性值小于 1 的元素（参考 the specification for opacity），
  • transform 属性值不为 "none"的元素，
  • mix-blend-mode 属性值不为 "normal"的元素，
  • filter值不为“none”的元素，
  • perspective值不为“none”的元素，
  • isolation 属性被设置为 "isolate"的元素，
  • position: fixed
  • 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
  • -webkit-overflow-scrolling 属性被设置 "touch"的元素

清除浮动

为什么要清除浮动？

要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

清除浮动的方法
  1. 对父级设置适合高度样式清除浮动
  2. 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
  3. 父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
  4. 使用after伪元素清除浮动（推荐使用）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
  1. 使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
posted @ 2019-11-28 09:10  Hou-Sheng  阅读(165)  评论(0)  编辑  收藏  举报