margin的用法：

1，margin是在元素的宽高以外的
2，作用：控制元素之间的位置关系
3，margin不能改变盒子本身大小的
4，单一一个方向设置margin值：
margin-left    margin-right   margin-top    margin-bottom
5，margin设置技巧和padding一样可以看我上一篇随笔
6，margin是可以接受负数的
7，让当前元素在父元素里面左右居中：margin：0 auto；
8，margin经常出现的bug
A，上下二个元素之间的margin会重叠，按照最大的来显示
B，默认情况下（父子元素都没有浮动等属性）给第一个子元素添加margin-top的值会解析到父元素上面
控制子元素在父元素的位置关系用padding 控制同级元素之间位置关系用margin
 
Div在不去设置宽度的时候或者设置width：100%；跟随父元素的宽度  内部元素大小，该怎么设置就怎么设置
 
清除标签默认样式，重置样式
body：font-size：16px；
清除字体font-family：”Microsoft”；
清除前面点的样式 ul，ol，li{
list-style：none；
}
清除下划线 u，a{
text-decoration：none；
}
清除倾斜 i，em{
font-style：normal；
}
清除加粗b，strong{
font-weight：normal；
}

清除默认大小h1~h6{

font-size：16px；
font-weight：normal；
}
边框清零img{
border：none；
}

清除input聚焦时候的蓝色边框input{

outline：none；
}

 

1，input默认情况如果对不起 添加浮动即可

2，Input按钮边框会长在input的宽高内部（兼容问题）

3，如何给input按钮添加边框 在input按钮的外围套一个盒子 把边框架子啊盒子上面

 

1，如果新闻列表有时间

<li>

<a href=”#”>内容<a/>

<span>时间</span>

</li>

2，给li设置宽高  高度的获取量行高即可

3，如果新闻列表有时间 给a加浮动 给时间标签也加浮动

 

控制文本换行：white-space：nowrap；

空白空间的处理：

white-space

属性值：

会保留空格，并且文本不会换行

  pre-line

保留空白换行

让文本不换行

 

溢出（超出）容器之后的显示状态

overflow：；

属性值：

让容器产生滚动条，可以让用户拖动滚动条来查看

自动（当内容超出的时候有滚动条，没有的时候没有滚动条）

超出隐藏

控制纵向或者横向的溢出状态

 

2，让文本超出隐藏

overflow：hidden；

3，让超出的文本省略号显示

4，text-overflow：clip/ellipsis

clip：不产生省略号

ellipsis：产生省略号

 

根据css的显示状态把html标签分类：

块状元素     内联元素（行内元素）    行内块元素

 

块状元素特点：（默认情况）

A，在页面张红以矩形区域显示

B，能直接设置宽度和高度

C，独占一行 自上而下排列

D，块状元素一般作为其他内容或者元素的容器

 

内联元素的特点：

A，在页面中最小单位为矩形

B，不能直接给元素设置宽度和高度

C，在一行内排列，不会产生换行

D，也符合盒模型的规则，但是个别属性（padding-t/p  margin-t/p 不能正确显示）

 

行内块元素：

可以设置宽高

根据整体上下文 最终元素 所形成的是块状还是内联

button典型的可变元素

 

元素类型的转换：

display：；

作用：检索或者设置元素所生成的类型

display：block；

作用：将原故事转化为块状元素 拥有块状元素的特点

display：inline；

作用：将原属转成内联元素 拥有内联元素的特点

display：none；

将元素完全隐藏，并且不占据空间

 

知识点补充：

当元素有浮动的时候，可以添加宽高

 

1，块状元素的display的默认值大部分是block 但是里面有特殊的 例如li的display：list-item；

list-item的元素，有列表符号的

2，内联元素的display的默认值，大部分为inline但是这一类里面有特殊的：

input的display的默认值，大部分为inline-block 行内块元素

inline-block元素的特点：

1，在 一行内显示排列 不会换行

2，可以直接设置大小

img默认的特点和inline-block的特点完全吻合的  但是浏览器默认解析display是inline

 

如果让内联元素在父元素里面左右居中：只需要给父元素添加text-aline：center；

 

vertical-align：

属性值

顶线对齐

底线对齐

中线对齐

基线对齐

 

让子元素在父元素里面上下居中

上下居中需要找一个元素当做参照物确定当前容器里面的中心线

参照物怎么确定？

在资源的后面（不要回车换行）添加一个空的span并且设置样式

span{
width:0; 不能显示
height：100%；  容器高度
}

让span居中左右排列 display：inline-block；

确定中心线：vertical-align：middle；

 

这样的居中显示你们应该没有见过 现在用的几乎没有大家看个乐呵就行

 

 

display 属性值：

block 转块

inline 转内联

none 隐藏

list-item 列表元素

inline-block 行内块

 

块：块状元素在设置宽度的时候跟随父元素的变化

内联元素：不去设置宽高，大小被内容撑开的