黑马程序员技术交流社区

标题: 前端html、css知识点总结 [打印本页]

作者: fengli 时间: 2018-9-14 13:25
标题: 前端html、css知识点总结
Html相关知识点整理1. 常用的浏览器及其内核

IE Trident

Firefox Gecko

Safari Webkit

Chrome Blink

Opera blink

2. Web标准构成

构成部分：结构、表现、行为。

结构html：对网页元素进行整理和分类。

表现css：设置网页元素的版式、颜色、大小等外观样式。

行为Javascript：网页模型的定义及交互的编写。

3. Html

HTML：超文本标记语言。通过HTML标签对网页中的文本、图片、声音等内容进行描述。

3.1 html的骨架格式，html根标签里包含head和body标签。

3.2 html标签

双标签：段落标签p，布局盒子div span，图像标签img

单标签：标题标签h1-h6，水平线标签hr，换行标签br，链接标签a，文本格式化标签：strong（b）、em(i)、del(s)、ins(u)

⭐#a瞄点定位的方法：①将索引处的文字用a标签包裹，href链接地址为#xx；②将对应要定位到的地方的文字用span标签包裹，设置id为xx；

⭐target属性，链接是否在新页面中打开的设置方法：值为”_blank”（空白页打开），”_self”原网页中打开。

3.3 常用了解的特殊字符：空格  大于> 小于<

3.4 列表标签：有序列表ol，无序列表ul，自定义列表dl

3.5 表格table

⭐Tr不是table的子元素。

⭐合并单元格：rowspan跨行合并，值合并数量，删除后面tr中相应多余的单元格；

Colspan跨列合并：值为合并数量，删除同一行内多余的单元格。

3.6 表单 input

通过行内type属性设置实现不同功能。

text：单行文本 password：密码 radio：单选框 checkbox：复选框

button：普通按钮 submit：提交 reset：重置 image：重置 file：文件

⭐其中行内属性name为后台区分不同的表单根据。单选按钮通过其设置一组值。

Value为默认显示的文本内容。

⭐Css3中去掉input表单点击时的发亮边框用：outline:none;

⭐Textarea：文本域。文本域防拖拽属性resize=”none”;

Select：下拉菜单。多个Option里包裹下拉选项。

Form表单域：提交表单域中所填信息。

⭐Input属性里的button和button双标签的区别：

Button双标签有两点区别：①点击会跳转；②该标签里面可以嵌套图片等。

CSS相关知识点整理

CSS(CascadingStyle Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）。

4. Font字体

选择器 { font: font-style font-weight font-size/line-height font-family;}

5. CSS外观属性

5.1 color属性用于定义文本的颜色。表示方法有颜色，十六进制值，RGB代码。

5.2 text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。让盒子里的内容水平居中，不是让盒子居中。值有left, center, right。

5.3 text-indent属性用于设置首行文本的缩进。1em是一个字的宽度。

5.4 text-decoration 通常我们用于给链接修改装饰效果。

None：默认。定义标准的文本。取消下划线（最常用

Underline：定义文本下的一条线。

Overline：定义文本上的一条线。（不用）

Line-through：定义穿过文本下的一条线。（不常用）

6. 标签显示模式display

6.1 块级元素（block）

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

6.2 行内元素（inline-level）

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

6.3 行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

用display相互间转换。

⭐单行文本垂直居中：行高=上距离 + 内容高度 + 下距离

7. 背景

背景颜色：background-color:颜色值;

背景图片：background-image : none | url (url)；

背景平铺：background-repeat : repeat |no-repeat | repeat-x | repeat-y；

背景位置：background-position : length ||length

background-position : position || position

背景附着：background-attachment : scroll |fixed

背景简写：背景颜色图片地址是否平铺背景滚动背景位置。

背景透明：background: rgba(0, 0, 0, 0.3); 最后一个参数是alpha透明度取值范围 0~1之间

⭐添加多背景：逗号隔开，背景色放到最后。

⭐背景图片大小设置：background-size：百分比/具体尺寸

cover：保证宽长等比例缩放，填满盒子，可能隐藏部分图片；

contain：保证背景在盒子内，长度或宽度其中一方和盒子一样即停止。

8. CSS三大特性

8.1 层叠性

样式冲突，就近原则

8.2 继承性

text-，font-，line-这些元素开头的可以继承，以及color属性

8.3 优先级

⭐权级可以叠加，但是不能进位。

⭐继承的权重为零。

⭐判断改样式的权重的步骤：首先看样式标签有没有被选中，选中的情况下再比较权级。

9. 盒子模型

css学习三大重点： css 盒子模型、浮动、定位

11.1盒子的大小决定因素：内容+内边距+边框

⭐（因此，我们一般给盒子指定的宽高，实际为内容的宽高，如果再指定边框和内边距，盒子将被撑大。可以采用增加多少边框或内边距，宽高减去多少的方式来保证盒子本身大小不变，或者通过css3中的box-sizing属性，border-box：以盒子边框为盒子大小，不会撑大盒子。默认值为content-box。

11.2盒子边框：border :border-width || border-style || border-color

圆角边框：border-radius 可做成圆，椭圆等形状。

11.3 内边距padding：给盒子指定padding值之后，内容和边框有了距离，添加了内边距，盒子会变大了。给盒子指定内边距，从上开始，以顺时针方向给其赋值。

Padding值追加不会影响盒子大小的情况：未指定宽度，继承了父级尺寸

11.4盒子外边距margin：给盒子各个方向上外边距的指定和内边距一样，从上开始，以顺时针方向指定。

让块级盒子实现水平居中：盒子必须指定了宽度，左右的外边距都设置为auto

文字居中和盒子居中区别：盒子内的文字水平居中是 text-align: center, 而且还可以让行内元素和行内块居中对齐。块级盒子水平居中左右margin 改为 auto。

⭐使用margin定义块元素的垂直外边距时，可能会出现外边距的合并，即以指定值大的为准。所以不能给垂直方向相邻的两个盒子同时给上面的盒子指定下边距，给下面的盒子指定上边距。但是如果子元素是浮动的，不会塌陷。

⭐嵌套块元素垂直外边距的合并（塌陷）：给子盒子一个margin-top，使父盒子一起向下。

解决方法一，给外盒子一个上边框；二，给外盒一个padding；给外盒一个overflow。

11.5 盒子阴影：水平阴影垂直阴影模糊距离（虚实）阴影尺寸（影子大小）阴影颜色内/外阴影；

10. 浮动

Css的三种布局机制：普通流（标准流）、浮动和定位。

为什么需要浮动：同一行多个显示，两边对齐。

10.1 浮动的特性 浮，漏，特

浮动的元素脱标，不占有位置，下面的块级元素会浮上来，浮动的元素具有行内块的特性。例如a之类的行内块元素，设定浮动以后，可以直接指定宽高。

10.2⭐清除浮动

原因：子元素浮动以后不占有位置，父级元素没有高，影响之后的标准流盒子，布局稳定性差。清除浮动，让子盒子即使浮动，父元素也一样占有高度。

清除浮动的四种方法：隔墙法、overflow、after伪元素、before after双伪元素。

11. CSS定位

11.1 元素定位属性：定位模式+边偏移

11.2 定位模式（定位的分类）
选择器{position：属性值}
static→自动定位，静态定位，元素默认效果
relative、absolute、fixed：只有在定位中，才有top、left等指定位置
①静态定位对于边偏移无效，一般用来清除定位
②相对定位：a 通过边偏移移动位置，原位置继续占有，相对定位不脱标
         b 每次移动位置都以左上角为基点（相对于自己位置移动）
三绝对定位：脱标不占有位置
         a 父级没有定位，绝对定位以浏览器位基准点对齐
         b 父级有定位，以最近一级父级元素位基准点
子绝父相：子元素绝对定位不占有位置；父元素相对定位，占有位置进行排版，且限定子元素移动
④固定定位：a 固定定位跟父元素无关，只认浏览器可视区
         b 完全脱标，不占位置，不随滚动条滚动
⭐如果定位中有top和bottom，则忽略left和right
⭐让定位的盒子居中，lef或top 50%，再走自身盒子的负50%

11.3 叠放次序 Z-index只存在于相对、绝对、固定定位中。正负整数0，数值越大越优先。

11.4 定位模式的转换元素添加了固定、绝对定位，自动转换为行内块元素

12. 其他：CSS高级技巧

14.1  元素的显示与隐藏：①display none/block隐藏后不保留位置
                     ②visiblity visible/hidden隐藏后保留位置
                  三overflow 溢出隐藏 visible/auto/scroll/hidden

14.2 鼠标样式cursor：default小白/pointer 小手/move 移动/text文本

14.3 vertical-align 垂直居中；对块级元素无用。在行内元素或行内块元素，通常用来控制图片和表单与文字的对齐（middle、base、top）。图片是行内快元素，默认为与盒子为baseline对齐，下沿有缝隙。
解决方式为：①转换为块级元素display：block；②vertical-align：top与盒子顶部对齐

14.4 文字溢出隐藏部分以省略号显示。

①white-space：nowrap

②overflow：hidden

三test-overflow：ellipsis

14.5 精灵技术（sprite）重点

为了有效减少服务器接收和发送请求次数，提高页面加载速度。出现了css精灵技术。是一种处理网页背景图像的方式。用background-position调整位置。

14.6 滑动门技术

用a标签嵌套一个span，两个标签使用同样的背景，a的左边给定一个padding值，把左边盒子撑开，给span的背景从右开始，给定右内边距。Span随着里面文字的多少撑开盒子，达到滑动效果。<ahref="#"><span></span></a>

除此以外，可用linear-gradient()加盒子阴影来实现。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2