HTML+CSS总结

Web前端主要包含三部分内容：

1、Tag：HTML标签，用来装要显示的内容、数据。

2、CSS：Display，对要显示的内容进行渲染。

3、JavaScript：Behavior，交互、行为，使用户具有更好的体验。

HTML

​ HTML （Hyper Text Markup Language，超文本标记语言）是用来描述网页的一种语言，它包含了一系列的标签。

​ html：此标签可告知浏览器其自身是一个 HTML 文档。<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

​ head：此标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。下面这些标签可用在 head 部分：<base> 、<link> 、<meta> 、<style> 、<script> 和 <title> 。<title> 定义文档的标题，它是 head 部分中唯一必需的元素。

​ body：此标签定义文档的主体。包含文档的所有要进行显示的内容（比如文本<span> <p> 、上标<sup> 、下标<sub> 、超链接<a>、图像<img>、表格<table> 、列表<ul> <ol> <dl> 、逻辑语义块<header> <section> <aside> <footer> <div> 、标题<h1>~<h6> 、换行<br> 、内嵌块<iframe> 、表单元素<form> <input> <button> <select> 、音频<audio> 、视频<video>等等）。

​ 除此之外，每个标签都有自己特有的属性，例如<a> 标签有href属性、每个标签都有的class属性等等。并且还支持自定义属性，即开发人员自己定义一个不存在的属性。

CSS

​ CSS（Cascading Style Sheets，层叠样式表）是用来渲染HTML标签的显示样式的一种语言。根据CSS在HTML页面的位置的不同，可以分为三类：

​ 内部样式表：写在<head>的<style>标签内，多用于首页。加载快。

​ 外部样式表：脱离HTML页面，写在外部，可以用于其他页面。所有页面可以共享同一个样式，便于风格统一；使内容和显示分离。

​ 内嵌（行内）样式表：写在每个标签的style属性内，不常用。不易于扩展。

CSS选择器

通配符选择器： *

标签选择器： <标签名>

类选择器： .class

id选择器： #id

并列选择器：selector1 , selector2

后代选择器： 父 空格(所有后代)、父>(儿子后代)

兄弟选择器： ~ (所有兄弟)

相邻兄弟选择器： + (必须是相邻兄弟)

标签使用哪个CSS样式进行渲染的三个原则：

​ 1、就近原则： 哪个样式里标签更近就用哪个

​ 2、具体性原则： #id选择器 > .class选择器 > 标签选择器 > 通配符选择器

​ 3、重要性原则： !important

CSS盒子模型

CSS模型：Box Model （盒模型 ） —— 由内到外：

内容 - padding - border - background-image - background-color - margin

标签常用的CSS样式

边框

border 设置对象边框的特性

border-color 设置或检索对象的边框颜色

字体

font-size 设置字体大小

font-family 规定文本的字体

font-style 规定文本的字体样式

font-weight 规定字体的粗细

文本

color 指定文本的颜色

line-height 设置行高

text-align 规定文本的水平对齐方式

text-decoration 规定添加到文本的装饰效果

内外边距

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值 padding-top padding-right padding-bottom padding-left

margin 在一个声明中设置所有外边距属性，该属性可以有1到4个值 margin-top margin-right margin-bottom margin-left

背景

background-color 设置或检索对象的背景颜色

background-image 设置或检索对象的背景图像

display

display: none 此元素不会被显示。

display: block 此元素将显示为块级元素，此元素前后会带有换行符。

display: inline 此元素会被显示为内联元素，元素前后没有换行符。

display: inline-block 此元素会被显示为行内块元素，可以设置宽度、高度等，元素前后没有换行符。

具有hidden 属性的元素是不可见的。

CSS 定位

position: static 正常文档流

position: relative 相对定位（相对于元素原来的位置，没有脱离文档流，对周围元素没有影响）

position: absolute 绝对定位（相对于父元素来设定位置，脱离了文档流，对周围元素有影响）

position: fixed 固定定位（相对于浏览器窗口来设定位置，脱离了文档流）

CSS 设置字符集

@charset : utf-8

CSS 设置字体：

1
2
3
4
@font-face {
  font-family： ‘字体名称’
  src：url(字体资源路径)
}

CSS hack technology （CSS黑科技）

z-index 索引，当脱离文档流时，元素显示优先级冲突，设置元素z-index属性值越大就渲染在越上方

在有浮动的情况下 ，为了让父级元素计算出它的高度的方法：

1、clear:both 清除浮动

2、在父元素的样式中加入 overflow：auto