Front end summary HTML+CSS

html

What is html?

html Hypertext Markup Language, used to describe the language of web pages. Not a programming language but a markup language.

web standards:

Web standards are a collection of a series of standards developed by the W3C organization and other standardization organizations.

The composition of web standards:

Structure: used to organize and classify web page elements ---- html

Performance: Used to set the appearance, color, size, etc. of web page elements ---- css

Behavior: the definition and interaction of web page model ---- Javascript

The best experience solution proposed by Web standards: separation of structure, performance, and behavior

Simple understanding: the structure is written in the HTML file, the performance is written in the CSS file, and the behavior is written in the JavaScript file

label:

Semantic tags:

<h1></h1> Title tags h1-h6

<p></p> Paragraph tags

<hr /> Horizontal line label

<br />Newline label

Text formatting tags:

<b></b><strong></strong>加粗

<i></i><em></em>倾斜

<s></s><del></del> strikethrough

<u></u><ins></ins>下划线

Image label:

Attribute value description

src url path, required

Alternative text that cannot be displayed in alt text image

title text where the mouse is hovering over

width controls the image width

height height controls the height of the image

border border to add a border to the picture

path:

Absolute path:

The absolute path refers to the path where the file actually exists on the hard disk

D:\Java\JavaWeb\day01\a.jpg

http://www.baidu.com/b.jpg

relative path:

The position of one file relative to another

"File name" The file and the html file are in the same path.

The "./file name" file is in the next level directory of the html file. 　　

The "../file name" file is in the upper directory of the html file. 　　

Link label:

//<a href=”url” target=”window pop-up method”>

_blank opens the linked document in a new window.

_self default. Open the linked document in the same frame.

Link classification:

1. External links: such as <a href="http:// www.baidu.com "> Baidu</a>

2. Internal links: the mutual links between the internal pages of the website. Just link the internal page names directly, such as <a href="index.html"> homepage</a>. 3. Empty link: If the link target is not determined at that time, <a href="#"> home page</a>

4. Download link: If the address in href is a file or a compressed package, this file will be downloaded. 5. Web page element links: You can add hyperlinks to various web page elements in the web page, such as text, image, table, audio, video, etc. Link. 6. Anchor link: Click on the link to quickly locate a certain position on the page.

In the href attribute of the link text, set the attribute value to the form of #Name, as in Episode 2
Find the target location tag, add an id attribute = the name just now, such as: <h3 id="two">Introduction to Episode 2</h3>

Special characters: (There is no space between the & and the letter, so a space is added for display)

& nbsp;Space

& lt; Less than

& gt; greater than sign

Form label:

<table>

<tr> <td>The text in the cell</td> ... </tr> ... </table> 1. <table> </table> is the label used to define the table

2. The <tr> </tr> tag is used to define the rows in the table and must be nested in the <table> </table> tag

3.<td> </td> is used to define the cells in the table and must be nested in the <tr></tr> tag

4.<th></th> is used for the header cell set in the table, and the text content in the header cell is displayed in bold and centered

5. The letter td refers to the table data (table data), that is, the content of the data cell

Table attributes:

align left center right Alignment of the table relative to surrounding elements

border 1 or "" the border of the table is "" no border by default

cellpadding The distance between the pixel value table box and the content

Cellspacing pixel value cell distance between cells

width The pixel value or percentage specifies the width of the cell

hright pixel value or percentage specifies the height of the cell

Merge Cells:

1. Determine whether to cross rows or columns

2. Find the target cell and write the merge method

3. Delete the extra cells

Merge across rows: rowspan="the number of merged cells"

The top cell is the target cell, write the merge code

Merge across columns: colspan="the number of merged cells"

The leftmost cell is the target cell, write the merge code

to sum up

<thead></thead>: Used to define the head of the table.

<thead> must have a <tr> tag inside. It is generally located on the first line.

<tbody></tbody>: Used to define the main body of the table, mainly used to put the data body.

The above tags are all placed in the <table></table> tag.

The overall table learning can be divided into three parts:

Related tags for the table

table thead body tr th td

Related attributes of the table

cellspacing cellpadding width height border

Merge cells: rowspan collspan

List

Unordered list

<ul>

...

</ul>

There is no order level between the items in the unordered list, they are side by side
<ul></ul> can only be nested in <li></li>, directly entering other tags or text in the <ul></ul> tag is not allowed
Between <li> and </li> is equivalent to a container, which can hold all elements
Unordered lists will have their own style attributes

Ordered list

<ol>

...

</ol>

<ol></ol> can only be nested in <li></li>, directly entering other tags or text in the <ol></ol> tag is not allowed
Between <li> and </li> is equivalent to a container, which can hold all elements
Ordered lists will have their own style attributes

Custom list

<dl>

<dd>Noun 1 explanation 1</dd>

<dd>Noun 1 explanation 2</dd>

</dl>

The <dl> tag is used to define the description list (or definition list), this tag will be used with <dt> (define item/name) and <dd> (describe each item/name)

Form:

<form action="url address" method="submission method" name="form field name">various form element controls</form>

Form control

Failed to re-upload and cancel

<label> tag

The <label> tag defines the label (label) for the input element.

The <label> tag is used to bind a form element. When you click on the text in the <label> tag, the browser will automatically turn the focus (cursor) to or select the corresponding form element to increase the user experience. Syntax : <label for="sex">Male</label> <input type="radio" name="sex" id="sex" /> Core: The for attribute of the <label> tag should be the same as the id attribute of the related element .

<select> form element

<textarea> form element

The <textarea> tag is a control used to define multi-line text input. This control is commonly found in message boards and comments.

cols="the number of characters in each row", rows="the number of rows displayed"

div	Mainly used for layout without semantics, a div occupies a line
span	No semantics, multiple spans are displayed in one line
h1 - h6	Title tag
p	Paragraph tag
a	The hyperlink href attribute writes the path to jump
img	The picture tag src links to the address of the picture
ul li	Unordered list ul can only nest li li can nest any label
ol li	Ordered list
dl dt dd	Custom list
form	The form attribute action represents the jump address method submission method
input	The default type is text
input type=“button”	Button
input type=“text”	text
input type=“password”	Password box
input type=“image”	Picture of form type
input type = “fifile”	file
input type=“radio”	Single selection is checked by default
input type=“checkbox”	Check checked by default
select	Drop down box
option	Nested in select, select to add selected to option
label	The label element does not present any special effects to the user. However, it can improve the user experience. The for attribute corresponds to the corresponding id in the input.
table	form
tr	Row
td	Column
colspan	Table attributes are merged across columns
rowspan	The attributes of the table merge div across rows
cellspacing	The distance between the attribute cell of the table and the cell is the distance between td and td
cellpadding	The distance between the attribute cell of the table and the text is the distance between td and the text
b	Bold
strong	Bold
i	tilt
in	tilt
u	Underscore
ins	Underscore
s	Strikethrough
of	Strikethrough

css

1.布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）

2.自身属性：width / height / margin / padding / border / background

3.文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

4.其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

行内引入：<div style="这里写样式">我是一个块级的标签</div>

嵌入式：将CSS样式表放到head中用<style>标签包裹起来

转存失败重新上传取消

选择器：

标签选择器：

标签选择器{ 属性：属性值 ... }作用：标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

类选择器：

.类名 { 属性1: 属性值1; ... }

1.如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。 2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。 3.类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。 4.可以理解为给这个标签起了一个名字，来表示。 5.长名称或词组可以使用中横线来为选择器命名。 6.不要使用纯数字、中文等命名，尽量使用英文字母来表示。 7.命名要有意义，尽量使别人一眼就知道这个类名的目的。

多类名选择器：

1.在标签class 属性中写多个类名

2.多个类名中间必须用空格分开

3.这个标签就可以分别具有这些类名的样式

ID选择器：

id选择器{

属性：属性值 ... }

1.类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

2.id 选择器好比人的身份证号码，全中国是唯一的，不得重复。

3.id 选择器和类选择器最大的不同在于使用次数上。

4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

通配符选择器：

 * {
        属性1: 属性值1;  
        ...
    }

复合选择器:

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器

后代选择器：

元素1 元素2 {样式声明}

1.元素1 和元素2 中间用空格隔开

2.元素1 是父级，元素2 是子级，最终选择的是元素2

3.元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可

4.元素1 和元素2 可以是任意基础选择器

子选择器：

元素1>元素2{样式声明}

1.元素1 和元素2 中间用大于号隔开

2.元素1 是父级，元素2 是子级，最终选择的是元素2

3.元素2 必须是亲儿子，其孙子、重孙之类不可以

并集选择器：

元素1，元素2{样式声明}

1.元素1 和元素2 中间用逗号隔开

2.逗号可以理解为和的意思

3.并集选择器通常用于集体声明

伪类选择器：

特点是用冒号（:）表示，比如 :hover

链接伪类选择器：

a:link 没有点击过的(访问过的)链接a:visited 点击过的(访问过的)链接a:hover 鼠标经过的那个链接a:active 鼠标正在按下还没有弹起鼠标的那个链接

:focus 伪类选择器用于选取获得焦点的表单元素(焦点就是光标，一般情况 <input> 类表单元素才能获取)

input:focus{样式声明}

转存失败重新上传取消

元素显示模式分类

写出常见的块元素和块元素的特点？

特点：1、独占一行显示

2、可以设置宽高

3、在不设置宽度的时候其宽度是父元素的100%

常见的块级元素：

div，p(不可以嵌套div),h1-h6,ol,ul,li,dl,dt,dd

转换成行内元素的方法：display：block;

写出常见的行内元素和行内元素的特点？

特点：1、多个在一行显示

2、不可以设置宽高

3、在不设置宽度的时候其宽度是有内容撑起

常见的块级元素：

a(可以嵌套除自身以外的其他标签）,span

转换成行内元素的方法：display：inline;

写出常见的行内块元素和行内块元素的特点？

特点：1、多个一行显示

2、可以设置宽高

3、在不设置宽度的时候其宽度是有内容撑起

常见的块级元素：

td ,img

转换成行内块元素的方法：display：inline-block;

css设置字体样式：

font-size :字号

font-weight：字体粗细

font-style：字体风格（加粗，倾斜）

fonnt-famliy：字体样式（微软雅黑，宋体…）

合写方式：font：font-style font-weight font-size/line-height font-family

color:设置字体颜色

text-

text-align:center 文字居中行内元素和行内块元素

text-decoration：none 取消下划线 underline下划线

text-indent：首行缩进

line-height：文字垂直居中

css设置背景颜色：

backgrond-color：背景色

backgrond-image：背景图

background-repeat：背景平铺方式（repeat默认值，no-repeat不平铺，repeat-x,repeat-y)

background-attachment :背景是否随滚动条滚动（fixed固定不动，scroll滚动默认值）

background-pasition：背景定位（1、当背景定位xy两个值都是方位名词的时候前后顺序无所谓2、当只写了一个方位名词的时候第二个值默认为center3、当两个都是准确数值的时候两者的前后顺序不可改变4、当xy使用方位名词和数值混合书写是X的方位名词只能用left right center Y的方位名词只能用top bottom center

合写方式：background：color url() repeat attachment pasition;

例子：background：pink url(images/bg.png) no-repeat fixed center 40px;

background: rgba(0, 0, 0, .3) 背景半透明

css三大特性：

层叠性:就近原则

继承性：（继承父元素的特性）父元素高度不会继承

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

行高的继承性：

body { font:12px/1.5 Microsoft YaHei； }

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为 1.5
*此时子元素的行高是：当前子元素的文字大小 * 1.5*
body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级：!important>行内>id>class hover >通配符*

important声明无穷大
行内样式 1,0,0,0
ID选择器 0,1,0,0
类选择器，伪类选择器0,0,1,0
标签（元素）选择器 0,0,0,1
继承，通配符选择器 0,0,0,0

优先级注意点:

权重是有4组数字组成,但是不会有进位。
可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

盒子模型

盒子模型本质就是个盒子，它包括：外边距、边框、内边距、实际内容

边框：border

border-width 定义边框粗细，单位是px

border-style 定义边框的样式

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

border-color 定义边框颜色

边框简写：border：border-width border-style border-color；

表格的细线边框：

border-collapse: collapse; 表示相邻边框合并在一起

内边距：padding

padding: 盒子中内容距离盒子边框的距离，标签里面嵌套的都是内容(padding不会撑开盒子的)

合写：

padding：

一个值代表上下左右内边距一致

两个值的时候第一个值是上下第二个值是左右

三个值代表的顺序是上，左右，下

四个值代表顺序上，右，下，左

分写：

padding-top:上内边距

padding-bottom:下内边距

padding-left:左内边距

padding-right:右内边距

内边距会影响盒子大小

1、当我们给盒子指定 padding 值之后，发生了 2 件事情：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。

2、内边距对盒子大小的影响：

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3、解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

外边距:margin

margin 属性用于设置外边距，即控制盒子和盒子之间的距离

margin：

一个值代表上下左右内边距一致

两个值的时候第一个值是上下第二个值是左右

三个值代表的顺序是上，左右，下

四个值代表顺序上，右，下，左

分写：

margin-top:上外边距

margin-bottom:下外边距

margin-left:左外边距

margin-right:右外边距

外边距可以让块级盒子水平居中的两个条件：

盒子必须指定了宽度（width）
盒子左右的外边距都设置为 auto

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

外边距塌陷

可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加 overflow:hidden。
可以给设置浮动
可以设置绝对定位
可以设置固定定位

清除内外边距：

*{padding:0; /* 清除内边距 */margin:0; /* 清除外边距 */ }

css其他样式

border-radius 属性用于设置元素的外边框圆角。

参数值可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

box-shadow 盒子阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow（必需）水平阴影位置，正值居右负值居左

v-shadow（必需）垂直阴影位置，正值居下负值居上

blur（可选）模糊距离

spread （可选）阴影的尺寸

color（可选）阴影的颜色

inset（可选）可以将外部阴影（outset）改为内部阴影

text-shadow 文字阴影

text-shadow: h-shadow v-shadow blur color;

h-shadow（必需）水平阴影位置，正值居右负值居左

v-shadow（必需）垂直阴影位置，正值居下负值居上

blur（可选）模糊距离

color（可选）阴影的颜色

浮动

普通流（标准流）

标准流: 就是标签按照规定好默认方式排列

块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等

浮动

浮动可以让多个块级元素一行内排列显示

第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

选择器{float:属性值;}

none 元素不浮动，默认值

left 元素向左浮动

right 元素向右浮动

特性：1.浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)

2.浮动的元素会一行内显示并且元素顶部对齐

3.浮动的元素会具有行内块元素的特性，浮动元素的大小根据内容来决定浮，动的盒子中间是没有缝隙的

浮动布局注意点

1、浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

清除浮动

原因：子盒子浮动，脱标，父盒子没有高度，不会被撑开，下盒子移动到下侧

清除浮动

本质：清除浮动的本质是清除浮动元素脱离标准流造成的影响，浮动的子标签无法撑开父盒子的高度

策略：闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子

额外标签法：隔墙法, 就是在最后一个浮动的子元素后面添

注意：

如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
父级有了高度，就不会影响下面的标准流了

清除浮动的方式

1、额外标签法

选择器{clear ：属性值}

left 不允许左侧有浮动元素

right 不允许有侧有浮动元素

both 同时清除左右两侧浮动的影响

2、父级添加 overflow 属性

overflow:hidden | auto | scroll;

3、父级添加after伪元素

.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; }

4、父级添加双伪元素

.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }

定位

定位 = 定位模式 + 边偏移

定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

边偏移属性

top 定义元素相对于其父元素上边线的距离。

bottom 定义元素相对于其父元素下边线的距离。

left 定义元素相对于其父元素左边线的距离。

right 定义元素相对于其父元素右边线的距离。

通过 position属性定义元素的定位模式

选择器 { position: 属性值; }

属性值

static 静态定位

relative 相对定位 相对定位并没有脱标

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的

absolute 绝对定位

完全脱标 —— 完全不占位置；

父元素没有定位，则以浏览器为准定位

父元素要有定位元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

子绝父相：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

fixed 固定定位 固定于浏览器可视区的位置

固定定位的特点：（务必记住）：

1.以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
2.固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型）
- 完全脱标—— 完全不占位置；
- 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
  - 跟父元素没有任何关系；单独使用的
  - 不随滚动条滚动。

Sticky 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合

选择器 { position: sticky; top: 10px; }

粘性定位的特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加 top 、left、right、bottom 其中一个才有效

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否 (占有位置)	相对于自身位置移动	基本单独使用
absolute绝对定位	是（不占有位置）	带有定位的父级	要和定位父级元素搭配使用
fixed 固定定位	是（不占有位置）	浏览器可视区	单独使用，不需要父级
sticky 粘性定位	否 (占有位置)	浏览器可视区	当前阶段少

固定定位小技巧：固定在版心左侧位置

1.让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。

2.让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了

堆叠顺序（z-index）

选择器 { z-index: 1; }

属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

绝对定位的盒子居中

加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left: -100px;：让盒子向左移动自身宽度的一半。

定位的特殊性

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

前面我们讲过， display 是显示模式，可以改变显示模式有以下方式:

可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

元素的显示与隐藏

display 设置或检索对象是否及如何显示

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： display 隐藏元素后，不再占有原来的位置。

visibility 属性用于指定一个元素应可见还是隐藏。

visibility：visible ; 　元素可视

visibility：hidden; 　元素隐藏

特点：visibility 隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来位置，就用 visibility：hidden

如果隐藏元素不想要原来位置，就用 display：none (用处更多重点）

overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

属性	区别	用途
display 显示（重点）	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility 可见性（了解）	隐藏对象，保留位置	使用较少
overflow 溢出（重点）	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

精灵图

为什么使用精灵图（目的）：

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

总结：

精灵图主要针对于小的背景图片使用。
主要借助于背景位置来实现---background-position 。
一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

字体图标

把下载包里面的 fonts 文件夹放入页面根目录下

@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; }

span { font-family: "icomoon"; }

css三角

我们用css 边框可以模拟三角效果
宽度高度为0
我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;

鼠标样式

cursor: default ; 小白鼠标样式(默认)cursor: pointer; 鼠标小手样式cursor:move ; 鼠标移动样式cursor:text ; 鼠标文本样式cursor:not-allowed ; 鼠标禁止样式cursor:help ; 鼠帮助样式

轮廓线

表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框

防止拖拽文本域 resize

textarea{ resize: none; }

vertical-align 属性应用

vertical-align : baseline | top | middle | bottom

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

解决图片底部默认空白缝隙问题

1.给图片添加 vertical-align:middle | top| bottom 等。（提倡使用的）

2.把图片转换为块级元素 display: block;

溢出的文字省略号显示

/1. 先强制一行内显示文本/ white-space: nowrap; （默认 normal 自动换行）

/2. 超出的部分隐藏/ overflow: hidden;

/3. 文字用省略号替代超出的部分/ text-overflow: ellipsis;

多行文本溢出显示省略号

/*1. 超出的部分隐藏 */overflow: hidden;

/*2. 文字用省略号替代超出的部分 */text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;

margin负值运用

1. Move the margin of each box to the left by -1px just to press the border of the adjacent box

2. When the mouse passes over a box, you can increase the level of the current box (if there is no positioning, then add relative positioning (reserve position), if there is positioning, add z-index)

Text around floating elements

float

Clever use of inline blocks

Convert these link boxes into inline blocks, and then specify text-align: center;
Use the gap between the inline block element, and add text-align:center to the parent; the inline block element will be centered horizontally

Front end summary HTML+CSS

html

css

Guess you like