css学习

最近工作接触前端，所以开始学习。通过慕课网学习css+html。 记录下自己的一些笔记.希望每天都能进步。

html

标签的用途、标签在浏览器中的默认样式。

<p> 标题

<h1~h6> 标题标签

<em> 斜体

<strong> 粗体

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

<q> 双引号

<blockquote>长文本

&nbsp; 空行

<addrss>地址

<code> <pre> 显示源码

<ul> <li></li></ul> 无序标签

<ol> <li></li></ol> 有序标签

<div>一些独立的逻辑部分划分出来,容器

     逻辑部分：页面上相互关联的一组元素

<table><tr> <th> <td> .... >

<ahref="mailto:[e-mail]?subject=nihao&body=dajiahao">还可以发送邮箱

在 label 标签内点击文本，就会触发此控件。

 

html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

display:block

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

 

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

display:inline

1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变

 

常用的内联块状元素有：

<img>、<input>

display:inline-block

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

三种样式的优先级别：内联式 > 嵌入式 > 外部式

                浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式

                   !important 例外

权值？标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100

选择器：

标签   html代码中的标签

    类    class=""   .className

   id     id= ""   #idName

       区别： id唯一

    子类  p>p1

    后代  p p1 

    通用   *{}

    伪类  标签的某种状态

文字排版

 

盒子模型

margin 外边界

border 边框

padding 内边距

width内容宽度

边框：border围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。Left right top bottom

宽度/高度:css内定义的宽（width）和高（height），指的是填充以里的内容范围

填充：padding元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)

padding和margin的区别，padding在边框里，margin在边框外。

 

布局模型

1、  流动模型（Flow）

块级元素:自上由下,默认宽度100%

内联元素:从左到右

2、  浮动模型 (Float)

元素并排显示： float:left, right

3、  层模型（Layer）精确定位

a.绝对定位(position: absolute)

元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口

b.相对定位(position: relative)

通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，偏移前的位置保留不动。

c.固定定位(position: fixed)

 相对移动的坐标是视图（屏幕内的网页窗口）本身

Relative与Absolute组合使用

 参照定位的元素：relative 参照元素：absolute

 

盒模型代码简写：顺时针，top right bottom left, t-b相同可以简写，r-l相同可以简写

颜色缩写：每两位的值相同，可以缩写一半

字体缩写：至少制定font-size, font-family

颜色值：color,:xxx;  color:rgb();

http://www.cnblogs.com/qixuejia/p/4190755.html 颜色参考

长度值：px   em   %

水平居中设置：

行内元素：如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center来实现的

 …..

垂直居中:设置父元素的 height 和 line-height 高度一致