Html5学习笔记（一）

一：常见标签类型

1. 块级标签

　　　　特点：1.独占一行

　　　　　　　　2，可以随时设置w，h

 

2.行内标签（内联）

　　特点： 1.多个行内标签能同时显示在一行

　　　　　　2.w.h取决于内容的尺寸（）

 

3.行内-块级标签

　　特点： 1.在同一行显示

　　　　　　2.w.h（input，button）

 

二:选择器的优先级

 

选择器的优先级：

　　1.标签选择器----1

　　2.id选择器----100

　　3.类选择器----10

　　4.伪类选择器/伪元素----10

　　5.复合选择器

 

 

通配符 *:----0

　　1.优先级别非常低

　　2.性能比较差

 

css样式遵循的规律：

　　1.相同类型的选择器：遵循原则：a:就近原则 b。叠加原则

　　2.不同类型的选择器：

　　　　important>内连》 id》类 伪类》标签》通配符》继承

三:css属性

　　1.可继承

　　　　1.1：父标签的属性值会传递给子标签

　　　　1.2：一般是文字、控制属性(visibility)

　　所有标签都可继承：visibility，cursoe

 

　　2.不可继承属性

　　　　1.1：父标签的属性值不能传递给子标签

　　　　1.2：一般是区块控制属性

 

/*square:矩形，去除圆圈*/

list-style: none;

/*缩进:处理超出的类容;*/

text-indent: 30px;

去除下划线:text-decoration: none;

横杠线:text-decoration: line-through;

visibility:hidden ;

display: none;都可以隐藏标签，唯一的区别是：visibility隐藏了标签，但位置还在display反之.

<!--伪类选择器-->

input:focus

 

 

四：css布局

4.1：

　　一：默认：标准流布局（从上到下，从左到右）

　　二：脱离标准流：

　　　　1，float属性：

　　　　　　常用取值有：

　　　　　　　　1.1，left

　　　　　　　　1.2,right

　　　　任何一种类型的标签，一旦脱离标准流就会被强制转行内块级标签

　　　　2.position属性和left，right，top，bottom属性 口决：(子绝父相)

　　　　　　常用取值有：

　　　　　　　　　　2.1:absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位

　　　　　　　　　　2.2:fixed绝对 生成绝对定位元素，相对于浏览器窗口进行定位

　　　　　　　　　　2.3:relative 生成相对定位元素，相对于其正常位置进行定位

　　　　　　　　　　2.4:static 默认值，没有定位

　　　　　　　　　　2.5:inherit 从父元素继承position属性的值

4.2：

　　标签的居中（水平居中，垂直居中）

　　　　让内容居中

　　　　　　1>水平居中

　　　　　　　　1.1:行内标签和行内块级标签采用：text-align: center;

　　　　　　　　而只能让块级标签的内容（字体）居中，

　　　　　　　　1.2：块级标签采用：

　　　　　　　　　　1.2.1: margin-left: auto;和 margin-right: auto;条件来设置

　　　　　　　　　　1.2.2：margin: 0px auto;

　　　　　　2>垂直居中

　　　　　　　　2.1：行内标签和行内块级标签采用：设置他内容的高度： line-height:就可以垂直居中

　　　　　　　　2.2:块级标签采用： line-height: 100px;

　　　　　　　　top: 50%;

　　　　　　　　left: 50%;

　　　　　　　　transform: translate(-50%,-50%);　　　　　　　　　　　　

 

4.3：

　　盒子模型

　　　　content（内容）--padding（填充物，内边距 盒子与内容的间距）--border（边框,盒子本身）--margin（外边距盒子与盒子之间的间距）

 

　　标准的盒子模型

　　　　/*让盒子向内扩展*/

　　　　　　box-sizing:border-box ;