css基础总结（一）

1.关于文本一些属性
2.边框
3.列表
4.浮动
5.权重
6.层叠和继承
7.em单位
8.outline
9.resize
10.padding内边距
11.margin外边距
12.块级元素和内联元素以及行内块元素
13.渐变transition
14.内容溢出
15.white-space空白处理
16.text-overflow
17.置换元素和非置换元素
18.vertical-align
19.定位
20.水平垂直居中
21.重叠
重点内容

1. 关于文本

``` font-size:文字大小、

color：文字颜色

font-family：字体（“中文 多个英语单词” 单个英语不加）

font-weight：文本加粗 100-900 blod bloder normal

font-style：文本倾斜 italic oblique

text-align：文本水平对其方式 left center right  justify

vertical-algin：垂直对其方式-一般标签使用无效 input img top  middle  bottom

line-height：文本行高   垂直居中性

text-decoration：文本修饰   none  

text-indent：首行缩进   px  %  正负值

text-transform：文本大小写 

letter-spacing：字母  汉字 的间距

word-spacing：单词的间距

font：简写
font：size/line-height 字体；
font：style weight  size/line-height 字体；

<p id="c2">2.边框</p>

border:简写 width color style
border-style
border-width
border-color
border-top/bottom/left/right
border-top/bottom/left/right-color/style/width
三角形的写法
transparent-透明色

<p id="c3">3. 列表</p>

list-style-type:none
list-style:none
去掉列表符号

	
	
<p id="c4">4.float:浮动</p> 

 解决块状元素并列显示的问题（默认情况下，块状元素自占一行不会并列显示）；
(1)正确写法：给所有需要并列显示的元素都添加浮动，这时可以实现块状元素并列显示

(2) 给元素设置浮动之后。元素会脱离正常文档流

(3) 子元素浮动之后，父元素在没有设置高度的情况下。高度为0--高度塌陷
  解决高度塌陷：clear:left right both
  需要在浮动元素的下面添加一个空div，给div设置clear:both  
  
块状元素：默认情况下继承父级元素的宽度，如果添加了浮动，宽度与内容同宽(没有设置width)
行内元素：设置浮动之后，具有了块状元素的特征（width height）
文字环绕图片-float

	  
<p id="c5">5.权重</p>

权重：
* 继承的样式（0）< 类型选择符(1) < class 伪类(10) < id(100) < 内联(1000)


子选择符--权重是0
选择符1 > 选择符2{}  2必须是1的子类

<p id="c6">6.层叠和继承</p>
	

层叠性：不同的选择符给同一个元素设置样式
            冲突：权重大
            不冲突：都会执行
继承性：border   background  margin   padding
             文本的
             行内元素：text-indent  text-align

<p id="c7">7.em单位</p>

em
em:1em=font-size:16px=16px--当前元素的文字大小
line-height:2  默认解释的单位是em -倍行高的写法 

<p id="c8">8.outline</p>

outline：可起到突出元素的作用
区别：
border可应用于几乎所有有形的html元素，
outline是针对链接、表单控件和ImageMap等元素设计
border占据空间，outline不占据空间

<p id="c9">9.resize</p>

属性规定是否可由用户调整元素的大小;
none-不能调整|both-宽度和高度都可以|horizontal-宽度可以|vertical-高度调整
异常解决：

	
<p id="c10">10.padding:内边距</p>
	属性需要添加在父元素上。
	padding值是额外加在元素原有大小(width和height)之上的
	想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值
	padding值不能设置负值
	padding:20px  四个方向的填充
	padding:20px-上下 40px-左右
	padding:20px-上    40px-左右  10px-下
	padding:20px-上   30px-右   40px-下   50px-左
	padding-left/top/bottom/right:30px	
	
	
	
<p id="c11">11.margin外边距</p>

同级元素之间   父与子之间.margin 可以负值。
margin:1 -四周都一样
margin:1上下 2左右
margin:1上 2左右 3下
margin:1上2右3下4左
margin-left/right/bottom/top;
margin:0 auto；子元素在父元素内水平居中
margin:auto ;子元素在父元素内水平居中	

重要：
	1）给子元素设置margin-top时，父元素会跟着向下移动；
	解决方法：给子元素或者父元素浮动；
	2）
	两个没有浮动的同级元素都设置了margin值，之间的margin值会重叠
	两个浮动的同级元素都设置了margin值，之间的margin值不会重叠

<p id="c12">12.块级元素、内联元素，行内块元素

display:设置元素类型的 block-块状元素 inline-行内元素

XHTML元素被分为三种类型:  块状元素，内联元素，可变元素
p--不能嵌套块级元素
h1-h6 标题标签不能嵌套标题标签

快状元素特征：
（1）块的形式显示  （2）自占一行  （3）设置宽度和高度 （4）作为容器使用

行内元素特征
（1）并列显示 （2）不能设置宽度和高度（3）矩形的形式显示块的形式显示（4）遵循盒模型的显示特征（border margin padding 上下显示错误的 content）

可变元素
块状  行内  可变
块状级元素：block list-item table
行内级元素：inline inline-block inline-table

display:none完全隐藏元素
display:block;将元素设置为块元素
display:inline;将元素设置为行内元素
display:inline-block;行内块元素（能设置宽度和高度能并列显示）
								img input select   textarea button
display:list-item:列表项-li
display:table;-table-表格


重要：块级的子集是块状。内联块元素是内联元素的子集。

<p id="c13">13 渐变transition

transition:属性名称 time； 或 属性名称 tim1 time2 :time1:开始见效时间，time2从开始到结束时间。

<p id="c14">14.内容溢出

内容溢出：overflow	
visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 
hidden : 　不显示超过对象尺寸的内容
scroll : 　总是显示滚动条

	
<p id="c15">15.white-space:

设置元素内的空白如何显示
    normal : 　默认处理方式 
	pre : 　用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象 
	nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br对象	

		
<p id="c16">16.text-overflow

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
clip : 　不显示省略标记（...），而是简单的裁切 
ellipsis : 　当对象内文本溢出时显示省略标记（...） 
	
满足四个条件：可以设置文本显示省略号
 1）width  2)overflow:hidden 3)white-space:nowrap  4)text-oveflow：ellipsis

<p id="c17">17.置换元素和非置换元素：

根据元素的在浏览器里面显示的效果是否是否是根据其某个属性的属性值而定的。
置换元素： img input 根据某个属性的属性值而定的。
非置换元素： div span p h1-h6 …大部分元素

<p id="c18">18 vertical-algin：垂直对其方式-一般标签使用无效

vertical-align:在行内块元素中使用。
实现的是自身和同级元素的对齐方式。
垂直水平居中的实现方式：
<div style="text-align:center;">
	<img src="" style="vertical-align:middle;" /><span style="display:inline-block;height:100%;vertical-align:middle;"></span>
<div>

	

<p id="c19">19.定位：position:absolute,relative.

html是一个默认的最大包含块。
static,默认，无特殊定位。遵循HTML原则
absolute:绝对定位，将对象从文档流脱离，
relative:相对定位,不会使对象从正常文档流脱离，
如果想要一个元素变成包含块（包含别人的块）：给其元素添加position:relative.
定位： 水平和垂直 （x,y） left:100px;top:200px;或使用百分比。
bottom
right
left
top
要想定位，必须一个是另一个的后代，不一定是子代。

并且，绝对定位不会保留原有的位置空间。

position:absolute; 脱离文档流后，不能继承父级盒的宽度。
给行内元素设置了绝对定位可以改变其元素类型
给元素设置了绝对定位，并且设置了width:100% 参照的是包含块的宽度。

	
<p id="c20">20	水平垂直居中；

div{position:relative;}
p{left 0; right:0;bottom:0;top:0;;position:absolute;margin:auto;}

还有一种：position:absolute;left:50%;top:50%;margin-top:-50px;margin-left:-50px;
示例：
div{
width:900px;height: 900px; background: red ;
border:1px solid blue; position: relative;
}
p{
width: 200px;height: 200px;position: absolute;background: black;
left:50%;top:50%;margin-top:-100px;margin-left:-100px;
}

	
<p id="c21">21 重叠：

设置了定位属性的元素层叠顺序、比没有设置定位属性的元素高。
如果都有定位属性，看书写顺序，后面写的在上面。

设置层叠书写：z-index必须结合position定位使用。
z-index:auto .默认值 auto 相当于0.
z-index:number ,数字越大，越高。可以负值。

<p id="zk">重点内容：

1）给子元素设置margin-top时，父元素会跟着向下移动；
	解决方法：给子元素或者父元素浮动；
2）
	两个没有浮动的同级元素都设置了margin值，之间的margin值会重叠
	两个浮动的同级元素都设置了margin值，之间的margin值不会重叠


子元素浮动之后，父元素在没有设置高度的情况下。高度为0--高度塌陷
 解决高度塌陷：clear:left right both
需要在浮动元素的下面添加一个空div，给div设置clear:both  
  
  
块状元素：默认情况下继承父级元素的宽度，如果添加了浮动，宽度与内容同宽(没有设置width)
行内元素：设置浮动之后，具有了块状元素的特征（width height）


解决高度塌陷的方法2：给父元素设置overflow：hidden
div{border:10px solid #0FF;overflow:hidden}
p{width:200px;height:200px;background:#33F;float:left}


将图片放在块状元素中，图片会将盒子撑大3~5px
解决方法：给装了图片的盒子设置font-size：0	


将图片放超链接中在IE的浏览器中，图片会有多余的边框出现；
解决方法的：给img设置border：0	  


满足四个条件：可以设置文本显示省略号
 1）width  2)overflow:hidden 3)white-space:nowrap  4)text-oveflow：ellipsis
								white-space 属性设置如何处理元素内的空白
								
								
如果父级元素设置了边框，子元素设置margint-top，父元素不会向下移动
如果父级元素没有设置边框，子元素设置margint-top，父元素会向下移动
方法：给父元素设置overflow:hidden			


拓展： text-align:可以使盒子里面的行内元素居中。不仅仅行内元素利用该属性使文本内容居中。


li:nth-of-type(1)
li:nth-of-type(2)

图片放在和盒子里，撑大了盒子：
解决图片间隙方法：font-size：0给父级元素。
或：将图片转为块级元素display:block。


position:absolute; 脱离文档流后，不能继承父级盒的宽度。
给行内元素设置了绝对定位可以改变其元素类型
给元素设置了绝对定位，并且设置了width:100% 参照的是包含块的宽度。