告别年代

阳光里闪耀的色彩真美丽

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

本文内容主要是HTML和CSS基础知识的杂乱无章的回顾,所以知识点的出现无序的。

1. inline、block和inline-block

    一个block元素单独占据一行,默认填满其父元素宽度,即使为其设置了width也仍然占据一行;而相邻inline元素在一行内连续显示,直到该行满[注]。一般来说,block元素内可以包含block和inline元素,但inline元素内只能包含inline元素。

    inline元素只能设置横向的width、padding和margin,上下方向无效。

    可以通过display属性修改元素的默认布局。

    [注]该行满是一个比较口语化的说法。具体就是:如果相邻inline之间有间隙(空格),那么到达浏览器窗口边界就换行;如果没有空隙,那么即使到达窗口边界也不换行,直到遇到间隙。

    有时候我们需要将元素按inline方式布局(不占整行),但又要可以设置其高度:即相邻元素按inline布局,而元素内容以block呈现。典型的例子就是下拉菜单栏。菜单项之间按inline布局(不开新行),但菜单项本身需要是个block,以便设置其高度等布局参数。这个时候就要将菜单项的显示方式设置为inline-block:相邻元素布局inline,元素内部内容block。这种布局也可以用于自动调整block元素宽度,比如这样:

<p style="display: inline-block; border-bottom: 1px solid orange;">inline-block段落</p>

效果如下:

inline-block段落

如果不使用inline-block布局,border-bottom就会占据整行。

    注意:设置block属性仅改变元素显示方式,但不改变其“等级”。例如,对某个inline元素设置display为block,只是令浏览器开新行显示,但不能在其内嵌入block元素。

2. em和strong

    em用于口语强调,比如标记文章中某人说的一句话里的某个词;strong用于书面强调,比如标记某个关键的词。

3. <a>标签使用title属性添加标题。

4. <img>标签使用alt在需要时显示替代文字,同时也可使用title添加标题。

5. ul、ol和dl分别是un-ordered list、ordered list和description list的意思。

6. 当超链接指向下载资源时,使用download属性提供默认文件名 :<a href="..." download="use_this_name.exe">some description</a>

7. img是inline标签。

8. 表单使用value提供默认值,使用placeholder提供输入提示。disabled将不会发送表单数据,readonly禁止用户修改内容。

9. Dropdown widget使用<select></select>,ComboBox使用input text + datalist模拟。

    <input type="text" name="name" placeholder="Enter your name here"/>

(嗯,好像cnblogs的编辑器屏蔽了placeholder属性?)

9. 使用<optgroup></optgroup>来给表单分组:

<form>
<select>
  <optgroup label="China">
    <option>Chang Cheng</option>
    <option>DOng Feng</option>
  </optgroup>
  <optgroup label="International">
    <option>Bie Mo Wo</option>
    <option>Fa La Li</option>
  </optgroup>
</select>
</form>


10. CSS伪类nth-of-type(...)

      表达式内的n从0开始计数,元素从1开始索引。因此,下面的表达式分别表示首个,第二个和第三个指定类型元素:

      nth-of-type(3n+1), nth-of-type(3n+2), nth-of-type(3n+3)

      与之类似的有nth-child(...)。区别在于,nth-of-type只对同级同类型子元素计数,nth-child对同级所有子元素计数。

11. rgba .vs. opacity

      background-color:rbga()透明背景,opacity透明整个元素。

12. viewport

      viewport指的是你当前能在browser里看到的部分,滚动条以外的部分不计入内。

12. 限制图片宽度不超过其父元素

      默认情况下,如果下级元素size超过父元素,就会溢出到父元素外面。我们可以设定下级元素的max-width来防止溢出。比如某个div box的width为200px,但想要放在里面的图片的原始宽度为400px,可以这样:

      img {
          max-width: 100%;
      }

13. 我们知道不同的浏览器的默认风格以及在解析HTML和CSS的时候会有稍许不同;所以我们最好需要一个规格化的CSS给予不同浏览器一个统一的初始style。

      参见:http://necolas.github.io/normalize.css/

14.

posted on 2018-08-19 08:14  告别年代  阅读(203)  评论(0编辑  收藏  举报