今天把整个html和css的总结了一遍。可能还有疏忽之处，共同学习吧

【行为样式三者分离】

不加行内css样式，不加行内js效果

【标签】
1》单标签
<!doctype html> 文档头，告诉浏览器这是一个网页
br 换行
img 插入图片，src属性 默认有图片上方3像素，间距

2》双标签
body 主体，默认margin
span
div
h1-h6 标题标签，默认字体加粗，间距，字体大小
p 段落标签，默认有间距
a 超链接，可添加width、height属性，如果给定的高度或者宽度比例不合适，图片会扭曲或者拉伸，如果只给定一个值，浏览器会自动计算等比；href属性可添加链接、路径、锚点或javascript：；默认样式下划线，字体颜色
traget属性 traget='_blank'; 从新页面中打开
traget='_self'; 从本页中打开
b 默认字体加粗 有强调的含义
strong 默认字体加粗
i 默认字体倾斜
em 默认字体倾斜 有强调的含义
ul/ol/li 列表，默认文本样式小圆点，间距
dl/dt/dd 描述列表，默认dt、dd有间距
link 外联样式表，包含rel属性（属性值为stylesheet），href属性

<iframe src="广告的网址接口" width="300" height="250" scrolling="no" marginwidth="0" frameborder="0"></iframe>
scrolling="0" 去掉广告条
marginheight="0" 内容边距上边距为0
marginwidth="0" 内容边距左边距为0
frameborder="0" 去掉边框

【表单标签】
input text文本输入框 value='默认文字，输入时需要删除' placeholder='默认文字，输入时不需要删除'
button按钮 value='按钮的名称'
password密码框
radio单选框 checked默认选中 实现单选功能需要选项中的name的值一样
submit 提交按钮
rersect 重置按钮
<secelt>
<option></option> 下拉菜单 selected默认选中的
</select>
checkbox 复选框 checked默认选中
<label></label> 标记标签 使用id和for属性来相互关联
<texteara></texteara> 文本域 默认样式

<form action="提交地址"></form> 表单元素提交数据的外框

清除表单元素的默认样式
border：none；
padding:0;
outline:none; 清除焦点框
background:none; 清除背景颜色
resize:none; 清除文本域的默认拖拽

【表格元素】
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

表格垂直居中的方式：
vertical-align:top;顶部
vertical-align:middle;中部对齐
vertical-align:bottom;底部对齐

表格边框的合并：
table{border-collapse:collapse;};

表格的属性
cellpadding="0";
cellspacing="0";
rowspan="2" 行合并
colspan="2" 列合并

【属性】

属性=‘属性值’

href="链接地址"
src
type
name
value
title 提示文本 鼠标移上去的时候显示的文字
alt='替换文本' 图片加载失败的时候显示的文字
traget="_blank" 从新窗口打开连接
traget="_self" 从本窗口打开连接

【css样式】
width
min-width:最小宽度（一般都等于网页的内容宽度）
height
border：2px solid/dashed/dotted red; 点线（dotted）在ie火狐中显示为圆点
border-top/right/bottom/left;
border-width:边框粗细
border-style:边框线性
border-color:边框颜色
border-radius:50%; 圆角，百分数相当于对应长或者宽的比例 四个值得方向是左上、右上、右下、左下
text-align:left;（默认）
line-height：对于单行文本，行高与高度相等时，文本是垂直居中的
font
font-style:italic/normal;字体倾斜
font-weidth:bold/normal;
font-size 字体的大小
font-family:'Mircosoft Yahei';
简写：font：italic bold 12px/20px 'Mircosoft Yahei';
字体简写至少存在字体大小和字体系列
background
background-image：url('图片的地址')；
background-repeat:no-repeat/repeat-x/repeat-y;
background-position:如果只写一个值，第二个默认为center；如果是数值表示，第一个是x轴
简写：background:url() no-repeat position color;不区分先后顺序
background-position:50% 50%;图片在中间位置
padding：内边距（内容与边框之间的距离）
padding:10px; 四个方向的内边距都未10px
padding:10px 20px; 上下内边距为10px，左右内边距为20px
padding:10px 10px 30px; 上边距为10排序，左右边距各为20px，下边距为30px
padding:10px 20px 30px 40px; 上、右、下、左的内边距分别为10px/20px/30px/40px
分写方式：
padding-top:
padding-right:
padding-bottom:
padding-left:
margin:外边距
外边距的简写和分写方式和内边距的完全相同
margin的问题：
margin的拖拽：子集的margin-top给了父级
解决：
给父级加一个边框
给父级加overflow:hidden;
用父级的padding-bottom代替子集的margin-top
margin的合并：两个相邻元素如果都有margin的话只会执行最大的一个
解决：只给一个元素添加margin，margin的值为两个元素margin值的和
margin负值：如果盒子不设置宽，margin负值可以使盒子变大

text-decoration:none/underline/overline/line-through; 下划线
text-indent:2em; 首行缩进
opacity：透明度（值为0到1）；自己会继承父级的opcity
cursor:pointer; 手型

overflow:hidden;溢出隐藏
overflow:scroll;一直显示滚动条
overflow:auto;自动显示滚动条

white-space:nowrap;不换行
overflow:hidden;溢出隐藏
text-overflow:ellipsis;省略号

【css选择器】
1》群组选择器 h1,h2,h3,h4
2》嵌套选择器 p span a 也叫包含选择器
3》筛选选择器 div.span.img
4》直接自己选择器 ul>li
5》伪类选择 a:link{} 访问之前
a:visited{} 访问之后
a:hover{} 鼠标移上去
a:active{} 鼠标按下去
6》ID选择器 #box
7》类选择器 .box
8》标签选择器 box
9》通配符选择器 *


【优先级】：选择范围越小，优先级越高
important>行内样式>#id>类选择器>标签选择器>通配符*

自己有的样式就不会继承父级的样式（比如a不继承父级的字体颜色）；文本样式可以继承

【清除默认样式】
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dt,dd,input,textarea{
padding:0;
margin:0;
}
li{
list-style:none;
}
a{
text-decoration:none;
color:#666;
}
img{
vertical-align:top;
border:none;
}
input,textarea{
border:none;
outline:none;
background:none;
}
textarea{
resize:none;
}
body{
font-size:12px;
color:#666;
}
.w{
width:960px;
margin:0 auto;
}
.clearfix:after{
content:'';
display:block;
clear:both;
}
.fl{
float:left;
}
.fr{
float:right;
}

【盒模型】
盒子模型：一个盒子模型占据的实际大小

盒子模型的实际大小是 width/height+padding+border
盒子模型不包括margin

【浮动】
float:right; 左浮动
float:right; 右浮动

浮动的特性：
浮动都有方向
浮动使行内变成块
浮动后，宽度窄到内容的宽度（没有设置宽度的情况下）
浮动元素是半脱离文本流
父级宽度不够，子集掉下来

浮动的要素：
一个元素浮动，它的同级尽量都浮动
浮动元素尽量都给宽高
有了浮动就要清除浮动

清除浮动的三种方法：
给浮动元素的父级加overfloat:hidden;
在浮动元素同级加一个div；并且设置css样式clear：both；（也可以浮动元素向哪里浮动，就清除那个方向）
给浮动元素的父级添加样式content:'';
display:block;
clear:both;

【定位】
position:relative/avsolute/fixed; 相对定位、决定定位、固定定位
position:relative;
相对定位的特性：
参照物是自己
不脱离文档流（和普通元素是一样的）
不能让行内变成块
相对定位的用途：
给绝对定位做父级
提高层级
position:absolute;
绝对定位的特性：
参照物是有定位的父级，如果没有，参照物是body
完全脱离文档流
绝对定位使行内变成快
宽度靠内动撑大（在没设置宽度的情况下）

让一个盒模型垂直水平居中的方法
position:absolute;
top:50%;
left:50%;
margin-top:负的高度的一半；
margin-left:负的宽度的一半；
position:fixed;
固定定位的特性：
参照物是可视区
完全脱离文档流
固定定位使行内变成块
内容靠宽度撑大（在不设置宽度的情况下）

层级：z-index：自然数
子集的层级永远高于父级（不管如何给父级和自己设置层级）
后面的元素的层级大于前面元素的层级
z-index只对定位元素起作用

【块标签与行内标签】

块标签：h1-h6 div p ol ul li dl dt dd
特性：
宽度默认是父级的宽度
块标签可以设置宽高
块标签独占一行
不受空格影响
可以设置四个方向的margin和padding
用来布局和分块

行内标签：span a i em b strong
特性：
宽度靠内容撑大
行内标签不能设置宽高
行内标签共处一行
受空格影响
只能设置水平方向的margin和padding
用来小修饰和装饰细节

块标签和行内标签的嵌套规则为：
块标签可以嵌套任意，但是p标签不能嵌套块标签
行内标签只能嵌套行内标签，但是a可以嵌套任意标签，不过a不能嵌套a标签

【居中方式的总结】
有宽度的盒子和图片水平居中：margin:0 auto;
文字和插入图片水平居中：text-align:center;
表格和插入图片水平位置调整：vertical-align:top/middle/bottom

【兼容性问题】
a包img:有边框
img{border:none;}

双倍边距：
给浮动元素加display:inline;

清浮动:
给父级加zoom:1; zoom:1;可以触发父级的haslayout,然后让盒子正常显示

透明度:opcity:0.2;
filter:alpha(opcity:10); 或者 filter:alpha(opcity=20);

png透明图片：
用js解决

单像素：
用双数

margin负值：
给元素加position:relative;

最小高度：
元素加overflow:hidden;

【一些基本的小东西】
em单位：
首行缩进两个字符 text-indent:2em;
搜索优化： text-indent:-999em; 用于网站logo和标题
div的宽度可以容纳三个字： width：3em；

&gt; >
&lt; <
&nbsp; 空格

rgb三原色：红绿蓝

文件路径
绝对路径：从盘符开始找
相对路径：相对于当前编辑的文件的路径

html和css知识总结的更多相关文章

  1. CSS知识回顾--读《CSS 那些事儿》笔记

    由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...

  2. 你该学点HTML/CSS知识的9大理由

    每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢? 好吧,下面我会告 ...

  3. WEBBASE篇： 第五篇， CSS知识3

    CSS知识3 框模型: 一,外边距(上文) 二, 内边距    1,什么是内边距? 内边距就是内容与元素边缘之间的距离: 注: 内边距会扩大元素边框内所占的区域的 语法: padding: 四个方向的 ...

  4. WEBBASE篇： 第四篇， CSS知识2

    CSS知识2 一, 尺寸 与 边框 CSS单位 1,尺寸单位:(1)px 像素   (2)%   (3) in 英寸  lin = 2.54cm (4)pt 磅 1pt = 1/72in    ppi ...

  5. WEBBASE篇： 第三篇， CSS知识1

    第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用 ...

  6. 《HTML与CSS知识》系列分享专栏

    收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站 ...

  7. Web前端基础怎么学？ JavaScript、html、css知识架构图

    以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...

  8. css知识总结

    ---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...

  9. 我收藏的技术知识图（每张都是大图）关于XX背后的知识、技术图，例如：Linux、Nginx架构、PHP知识卡、机会、HTML5移动、Android系统架构、YII架构的典型流程、Css知识表

    我收藏的技术知识图(每张都是大图) HTML5Linux/Unix系统设计思想读书笔记 LinuxMVCJava线程MVCSpring MVCCSS3Nginx架构VimCliCommandsPHP知 ...

  10. 网页制作常用的CSS知识

    在制作网页中,我们会用到很多CSS的知识,在这里我简单的总结了一些. div    划分区块 ul,li 无序列表(配合划分区块) ol,li 有序列表 a 超链接标签 p 段落标签 h 标题标签 i ...

随机推荐

  1. CKEditor与CKFinder的配置

    CKEditor与CKFinder的配置使用(一) 将CKEditor 与 CKFinder 的包含在项目中 从http://cksource.com网站上下载CKEditor与CKFinder,并将 ...

  2. andriod 获取电池的信息

    <?xml version="1.0"?> <LinearLayout android:orientation="vertical" andr ...

  3. Spark中的RDD操作简介

    map(func) 对数据集中的元素逐一处理,变为新的元素,但一个输入元素只能有一个输出元素 scala> pairData.collect() res6: Array[Int] = Array ...

  4. Android--Apache HttpClient

    前言 上一篇文章介绍了使用HttpURLConnection来完成对于HTTP协议的支持.现在介绍一个新的方式来访问Web站点,那就是HttpClient. HttpClient是Apache开源组织 ...

  5. [Android]IllegalStateException: Could not find method onBind(View)

    FATAL EXCEPTION: main Process: org.diql.aidldemo, PID: 2274 java.lang.IllegalStateException: Could n ...

  6. STL--集和多集（set/multiset）

    与基本容器相比,关联容器更注重快速和高效地检索数据的能力.这些容器是根据键值(key)来检索数据的,键可以是值也可以是容器中的某一成员.这一类中的成员在初始化后都是按一定顺序排好序的. 本文地址:ht ...

  7. 多线程在iOS开发中的应用

    多线程基本概念 01 进程 进程是指在系统中正在运行的一个应用程序.每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内. 02 线程 2-1 基本概念 1个进程要想执行任务,必须得有线程 ...

  8. iOS之UI--CAGradientLayer

    1.CAGradientLayer 简介 如果说CAShapeLayer是用于提供设置形状的,那么CAGradientLayer是用于提供设置颜色的 英语单词:Gradient:梯度,渐变 那么Gra ...

  9. Swift面向对象基础（上）——Swift中的类和结构体（下）

    学习来自<极客学院> import Foundation class User { var name:String var age:Int init(name:String,age:Int ...

  10. [docker] 管理docker容器中的数据

    之前我们介绍了Docker的基本概念(前面的没翻译...),了解了如何使用Docker镜像进行工作,并且学习了网 络和容器之间的链接.这一节我们将讨论如何管理容器中及容器之间的数据. 我们将查看下面两 ...