css学习

未分类

一、HTML中三种使用css方法的优先级

三种方法：
1.外联一个css文件
2.嵌入css代码，如下：

<style type="text/css">  span{color:red;} <p>慕课网，<span style="color:pink">超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>

3.内联式，如下：

<p>慕课网，<span style="color:pink">超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>

一般情况下的优先级是：内联>嵌入>外联
嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。

选择器学习

一、子选择器
子选择器用大于符号(>),用于选择指定标签元素的第一代子元素。例如：.free>hi{}
注意：只用于指定第一代的子元素

二、后代选择器
后代选择器在父元素和子代元素之间加空格，可以实现对所有后代的选择。例如：.free h1{}/.free h2{}
也就是说，后代选址器的可选择性比子选择器的强。

三、通用选择器
用*来对HTML中的全部元素进行选择。

css定位

一、display
使用display可以改变生成的框的类型。一般情况下，内联元素的display的值是inline，块状元素的display的值是block。但是，可以使用display来改变框的类型。如：p{dispaly:inline;},块状元素变成了内联元素。

display:none;使得元素没有框，即元素和元素的内容都不会显示。

二、css中的三种定位

1、position的属性值
（1）absolute（绝对定位）：position:absolute;left:100px;top:200px;
绝对定位就是把一个元素固定放在某个地方，需要你给出明确的值，例如上面的代码就是将元素放在距离页面左边界和上边界分别100px和200px的地方。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。

（2）relative（相对定位）：position:relative;left:-20;top:20;
相对定位是相对于元素原来位置的定位。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

（3）fixed(固定定位）
元素正常显示，块状元素按照正常的元素流显示，行内元素则置于块状元素中，形成一行或者多行。
（4）裁剪照片：clip：rect(xpx xpx xpx xpx);
上下左分别设置的是往图片里面裁剪，而右设置的是往右边留出多少像素的宽度。

当把css写在HTML中时，如果css代码里面有双引号的，要把双引号改为单引号。

只有外边距可以为负值
如果将width设置成auto的话，此时替换元素的width是元素本身的大小，如图片的话此时会是图片本身的宽度，但是如果是替换元素的话，例如文本，此时的宽度就会根据父元素的大小来调整。
当元素的高度设置未固定后，若此时高度无法容纳内容，则会生成滚动条
只有width、height、margin可以设置为auto，padding、border的属性都得设置具体数字。
正常流中一个块的margin-top或者margin-bottom设置为auto时浏览器会默认为零。
将元素垂直居中的办法是将height的上下值设置为：25%。
垂直格式化中，相邻的外边距会合并，留下最大的外边
负的外边距同样存在重叠的特性，选择绝对值最大的那一个

列表项中，列表内容前面会出现数字或者是图片，可以使用list-style-type来设置列表前面标志的类型，如：list-style-type：square；将其设置为正方形
使用list-style-image：URL（照片路径）来使用自己想要的标志图片
list-style-position：inside/outside;设置标志的位置。设置成inside时，标志就被包含在列表里面，若为outside，则没有被包含在列表里面，一个最明显的现象改变列表的padding时，inside的标志与内容之间的距离不会改变，而outside的则会。

行内元素

1、匿名文本：没有包含在行内元素中的字符，包括空格。
例如：<p>i am <em>so</em> happy</p>中的i am 和happy。
2、行间距：font-size和height-line之差分成两半分别放在上下。之运用于非替换元素。
3、

二、行内格式化
1、行的高度是相对于行内的内容的，如果一个行没有内容，设置了行高和颜色之类的，会没有任何显示。
2、行内非替换元素
行内框高度：内容区高度+（line-height——font-size）
其中（line-height——font-size）会平均分成两部分放在行的上下。

浮动和定位

浮动 float

值：right，left，none,intherit

使用浮动时要注意的事：
1、浮动时，外边距不会合并
2、浮动非替换元素时，必须为元素设置一个宽度
3、元素浮动时元素会从文档的正常流中删除，本身变成块级元素，其他内容会围绕在浮动元素的周围。
4、浮动元素的包含块离其最近的块状祖先元素。

浮动规则：
1、浮动元素的左（或右）边界不可以超出包含块的左（右）内边界。
2、在没有特殊的声明情况下，浮动元素是不会互相重叠的。
3、浮动元素的顶端不会高于父元素的内顶端，
4、浮动元素的顶端不可高于之前所有浮动元素或者块级元素的顶端高5、如果在浮动元素的包含块之前有块级元素，那么浮动元素的最高高度为包含块的内边界。
6、除非包含块的宽度小到无法包含一个浮动元素，否则浮动元素不会超出包含块的宽度，若一个包含块里面同时有多个浮动元素，那么就会按照先后顺序排列直到宽度不够时自动换行排列。
7、浮动元素相对于包含块的下边界没有明确的限制,也就是说，浮动元素可以超出包含块的下端。

负外边距的使用：
可以使用负边距使浮动元素跑到父元素的外边。

重叠现象：
发生重叠时的显示规则：
1、行内框与一个浮动元素重叠时，其边框、背景和内容都在浮动元素上面显示
2、块框与浮动元素重叠时，框和背景在浮动元素之下，内容在浮动之上。

定位

属性：position
值：fixed、absolute、relative、static、inherit
无继承性，可运用于所有元素
static：元素按照正常的流分布
relative：相对于原来位置分布
absolute：原来的位置消失，重新根据所给的样式分布
fixed：类似于relative，不过其包含块是视窗本身。

包含块
根元素的包含块是视窗大小的矩形
非根元素，若其值是relative或者static，其包含块是最近的块级框、表单元格或者行内块祖先框的内容边界
对于position值为absolute的非根元素，其包含块为最近的position不是static的祖先元素。如果这个祖先元素是块级元素，那么就是由它的外边距界定区域，如果该祖先元素不是块级元素，那么就以其内容区的边界界定区域。

偏移属性：top、right、bottom、left
值:长度、百分比、auto、inherit
只适用于定位元素
四个属性分别表示元素的top、right、bottom和left相对于包含块的距离。

限制宽度和高度
最大：max-width、max-height
最小：min-width、min-height
不可用于非替换的行内元素和表元素。

元素可见性：visibility
值：visibility、hidden、collapse、inherit
具有继承性
使用hidden是元素隐藏后，元素还在原来的地方，只不过不可见到而已。

绝对定位
绝对定位的包含块是最近的position不为static的祖先元素。
若要指定某个元素为其子元素的包含块，可以对这个元素设置position：relative，但是不做偏移，这样就可以达到目的。

自动边偏移：

z-index
值：正负整数，auto，0
具有继承性。

颜色和背景

前景色可以继承，背景色没有继承性

背景：background-color
默认值：transparent（透明）

背景图像：background-image
无继承性
设置背景图像时最好将背景图像放在指定的背景颜色上，不过，有alpha格式的图像例如png格式的图像有可能会与图像结合。

背景图像的位置：background-position
值：length\percentage\left\center\right\top\bottom
使用关键字时，若只使用一个，另外一个默认是center
background-position：top right（右上角）
background-position：top（=top center）
若没有指定，一般情况下是默认定一个值是指定水平方向，第二个值是垂直方向。
可以使用百分数和长度值结合实现想要的结果
可以使用background-position将图形设置在某个位置，然后再设置其在某个方向上的重复。例如：
{background-position：50% 50%；
background-repeat：repeat-x;}

##表布局
###表格式化
单元格没有外边距，只有边框、内边距和内容