资讯专栏INFORMATION COLUMN

HTML、CSS知识学习与整理

crelaber / 1595人阅读

摘要:命名规范类型对象如。常量命名方式全部大写。子容器在交叉轴的排列方向。交叉轴的起点对齐交叉轴的终点对齐交叉轴的中点对齐交叉轴的两端对齐,轴线间隔平均分布轴线两侧间隔相等默认值,轴线占满整个交叉轴。

命名

1.驼峰式命名法:

(1) 大驼峰命名法:首字母大写。
(2) 小驼峰命名法:首字母小写。

2.文件资源命名:

(1) 不得含有空格。
(2) 建议只使用小写字母,除了某些为说明文件的情况(如 README,LICENSE 等),一般均不使用大写字母。
(3) 包含多个单词时,单词间使用半角的连词线(-)分割。
(4) 引入资源使用相对路径,一般情况下不要指定资源所带的具体协议。

3.变量命名:

(1) 命名方式:小驼峰式命名。
(2) 命名规范:类型+对象(如:numTitle)。

4.函数:

(1) 命名方式:小驼峰式命名。
(2) 命名规则:前缀为动词(如:getName)。

5.常量:

(1) 命名方式:全部大写。
(2) 命名规范:使用大写字母和下划线组合命名,使用下划线来分割单词。

6.类的成员:

(1) 公共属性和方法:命名方式同变量命名,即小驼峰式命名。
(2) 私有属性和方法:前缀为下划线,后面为与公共属性和方法一样的命名方式,小驼峰式。

7.注释:

(1) 单行注释:双斜杠与注释文字之间保留一个空格。
(2) 代码后注释:双斜线与代码之间,与注释文字之间均保留一个空格。
(3) 多行注释:开始与结束至少三行,第一行为 /* ,最后行为 */ ,其他行为 * 开始,注释文字均与 * 保留一个空格。
(4) 函数(方法)注释:
1) 语法:

 /**
 * 函数说明
 * @关键字
 */

2) 常用注释关键字:
@param(参数)、@return(返回值)、@author(作者)、@version(版本)、@example(测试)

规范

1.HTML 规范:

(1) 文档规范:使用 HTML5 的文档声明类型 。
(2) 脚本加载:所有浏览器推荐,CSS 放在  里,JS 放在 HTML 代码下方, 内部。
(3) 语义化:根据元素被创造出的初始意义使用,不要单一的使用

和 ,灵活使用正确的标签。
(4) alt 属性不为空。
(5) 结构、表现、行为三者分离。尽量在文档和模板中只包含结构性的 HTML;表现代码移入样式表中;动作行为移入脚本中;为了使三者之间的联系尽可能小,在文档和模板中应尽量少的引入样式和脚本文件。
(6) HTML 只关注内容。HTML 只显示展示内容信息;尽量不要引入特定的 HTML 结构来解决视觉设计效果;尽量不要将 作为专门做视觉设计的元素, 与 使用时的意义为它呈现了与内容相关的信息。

2.CSS 规范:(1) id 与 class 的命名可以反映元素目的和用途。

(2) CSS 选择器中避免使用标签名。
(3) 尽量使用子选择器,如 .header>ul{...}。
(4) 尽量使用缩写属性,如:background: #ffffff url(a.png) no-repeat fixed top;。
(5) 0后尽量不带单位,如:margin: 0;。
(6) 属性顺序格式:结构性属性(display -> position -> overflow、float、clear -> margin、padding)->表现性属性(background、border -> font、text)。

CSS 布局

1.传统盒模型:

(1) 文档流布局:最基本的布局,按照文档的顺序显示。
(2) 浮动布局:使用 float 属性,使元素脱离文档流显示。
(3) 定位布局:通过 position 属性进行定位,属性值分别有:static、relative、absolute、fixed。
1) static:元素块正常生成。
2) relative:相对定位。相对于元素的原始位置进行定位。元素偏移某个距离,其原本空间仍保留。
3) absolute:绝对定位。相对于其包含块定位,也可以说是相对于除 static 定位外第一个父元素进行定位,元素在原正常文档流中所占空间会关闭,不占位。
4) fixed: 相对于浏览器窗口进行定位。

2.常用CSS布局:

(1) 固定宽度水平居中:
1) margin: 0 auto;
2) 绝对定位居中:父容器相对定位,子容器绝对定位,top: 50%;left: 50%; margin-left 和 margin-top 均设为宽高的一半的负值;
3) 使用 transform(需要注意的是浏览器兼容 ie9+ 不适宜用于移动开发):父容器相对定位,子容器绝对定位,top: 50%;left: 50%;transform: translate(-50%,-50%);
(2) 未知宽度水平居中:
子容器设为 inline-block 属性,父容器设置 text-align: center;
(3) 多个块级元素水平居中:
1) 子容器设为 inline-block 属性,父容器设置 text-align: center;
2) flex 布局:父容器设置为 display: flex;justify-content: center; 即将子元素在主轴上的对齐方式设置为居中。
(4) 单行元素垂直居中:将子元素的行高设置等于高度,即 height 与 line-height 设置为相等。
(5) 多行元素垂直居中:
table-cell 方式:父容器设置为 display: table; 子容器设置为  display: table-cell;vertical-align: middle;。

3.flex 布局:

(1) 弹性布局,使用方法是将 display 属性设置为 flex,也可以设置行内的 flex。
(2) 注意:
1) webkit 内核的浏览器要加上 -webkit 前缀。
2) 设为 flex 布局后,子元素的 float、clear 与 vertical-align 属性均失效。
(3) flex 布局,父容器属性:
1) flex-direction:主轴的方向。row(默认值,水平方向起点在左)、row-reverse(水平方向起点在右)、column(垂直方向起点在上)、column-reverse(垂直方向起点在下)。
2) flex-wrap:超出父容器子容器的排列样式。nowrap(默认值,不换行)、wrap(换行,第一行在上)、wrap-reverse(换行,第一行在下)。
3) flex-flow:flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap。
4) justify-content:子容器在主轴的排列方向。flex-start(默认值,左对齐)、flex-end(右对齐)、center(居中)、space-between(两端对齐,间隔相等)、space-around(两侧间隔相等)。
5) align-items:子容器在交叉轴的排列方向。flex-start(交叉轴的起点对齐)、flex-end(交叉轴的终点对齐)、center(交叉轴的中点对齐)、baseline(项目第一行文字的基线对齐)、stretch(默认值,未设置高度或设为auto的将占满整个容器的高度)。
6) align-content:定义了多根轴线的对齐方式,一根轴线该属性失效。flex-start(交叉轴的起点对齐)、flex-end(交叉轴的终点对齐)、center(交叉轴的中点对齐)、space-between(交叉轴的两端对齐,轴线间隔平均分布)、space-around(轴线两侧间隔相等)、stretch(默认值,轴线占满整个交叉轴)。
(4) flex 布局,子容器属性:
1) order:子容器的排列顺序。
2) flex-grow:子容器剩余空间的拉伸比例。
3) flex-shrink:子容器超出空间的压缩比例,此属性生效,父容器属性要设为nowrap。
4) flex-basis:子容器在不伸缩情况下的原始尺寸。
5) flex:子元素的 flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写。
6) align-self:允许单个项目有与其他项目不一样的对齐方式。可覆盖父容器 align-items 属性,默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。

4.grid 网格布局:

(1) 网格布局,使用方法是通过 display 属性设置属性值为 grid 或 inline-grid 或 subgrid。
(2) 注意:
1) 当元素设置了网格布局,column、float、clear、vertical-align 属性无效。
2) 设置网格布局后,网格容器的所有子元素会自动变成网格项目(grid item),然后设置列(grid-template-columns)和行(grid-template-rows)的大小,设置 grid-template-columns 有多少个参数,生成的 grid 列表就有多少列,没有设置 grid-template-columns,则默认只有一列,宽度为父元素的100%。
(3) css fr 单位:一个新出的自适应单位,被用于在一系列长度值中分配剩余空间。
(4) 创建行或列的最小或最大尺寸:minmax() 函数。
第一个参数定义网格轨道的最小值,第二个参数定义网格轨道的最大值。可以接受任何长度值,也接受 auto 值。auto 值允许网格轨道基于内容的尺寸拉伸或挤压。
(5) 创建重复的网格轨道:repeat() 属性。
创建相等尺寸的网格项目和多个网格项目。第一个参数定义网格轨道应该重复的次数,第二个参数定义每个轨道的尺寸。
(6) 创建列与列之间的距离:grid-column-gap。
(7) 创建行与行之间的距离:grid-row-gap。
(8) 定义网格区域:grid-template-areas。
grid-template-areas 布局优势:在不设置高度的情况下(父容器和 grid-template-rows 的值,或者 grid-template-rows 设置为 auto 时,slider 和 content 的高度是一致的,并且会根据其内的高度自适应)。

网格布局举例:

html部分:

header
sidebar
content
  • lists
  • lists
  • lists
  • lists
  • lists
  • lists
footer

css部分:

.grid_container {
    padding: 20px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    background-color: #FAE3D9;
    grid-template-areas: "header header" "sidebar content" "footer footer";
    grid-template-rows: auto;
    grid-template-columns: 200px;
}
.header {
    grid-area: header;
    padding: 20px;
    background-color: #61C0BF;
}
.sidebar {
    grid-area: sidebar;
    padding: 15px;
    background-color: #BBDED6;
}
.content {
    grid-area: content;
    padding: 15px;
    background-color: #FFB6B9;
}
.content>ul li {
    padding: 3px 0;
    text-align: left;
    padding-left: 30px;
    box-sizing: border-box;
}
.footer {
    grid-area: footer;
    padding: 20px;
    background-color: #61C0BF;
}

截图示意:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52319.html

相关文章

  • HTML-CSS

    摘要:但是,从字体上来说雪碧图制作,使用以及相关,图文。由于采用了编译,所以能够保证在浏览器不支持标准布局的情况下,回滚到旧版本的,保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争,但是有一件事是确定的极大的提升了移动端 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 ...

    xiaokai 评论0 收藏0
  • HTML-CSS

    摘要:但是,从字体上来说雪碧图制作,使用以及相关,图文。由于采用了编译,所以能够保证在浏览器不支持标准布局的情况下,回滚到旧版本的,保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争,但是有一件事是确定的极大的提升了移动端 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 ...

    CHENGKANG 评论0 收藏0
  • 前端开发知识整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    Blackjun 评论0 收藏0
  • 前端开发知识整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    Sike 评论0 收藏0
  • 前端开发知识整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    tracy 评论0 收藏0

发表评论

0条评论

crelaber

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<