html第二天

    宽高不可控，不独占一行
<img/>  <span></span>    <font></font>   <a></a>
  吧爷爷一百6666 
块级标签：
    块级宽高可控，独占一行
<p></p>     <h1></h1>    <div></div>

转换：
行内转块级：display:block;
块级转行内：display:inline;
转行内块：
    宽高可控，不独占一行
    display:inline-block; 
 

列表：
1.有序列表    ol    li
2.无序列表    ul    li
3.自定义列表  dl     dt   dd

list-style:   列表样式
      none：  取消

行高：
line-height    调整每一行之间的间距(高度) 

上下居中：把行高的值设置成与外侧盒子高度相同即可。

圆角效果：
border-radius 
值：100%   px

给盒子半径就会变成圆。

分别设置四个角的不同的圆角效果：
border-radius:10px 5px 8px 15px;
四个值： 左上       右上       右下     左下

border-radius:10px 5px 8px;
三个值： 左上       右上和左下        右下     

border-radius:10px 5px;
两个值：  左上和右下       右上和左下  

阴影：
1.盒子阴影
  box-shadow:
  1.X轴偏移量   阴影水平的宽度   必选   可以给负数
  2.Y轴偏移量   阴影垂直的高度   必选   可以给负数
  3.阴影模糊半径   阴影边缘模糊程度  可选   必须是正数  
  4.阴影颜色    可选  

 box-shadow: 10px 10px 7px rgb(151, 149, 149),-10px -10px 7px rgb(151, 149, 149);  
  
2.文字阴影
  text-shadow:
  1.X轴偏移量   阴影水平的宽度   必选   可以给负数
  2.Y轴偏移量   阴影垂直的高度   必选   可以给负数
  3.阴影模糊半径   阴影边缘模糊程度  可选   必须是正数  
  4.阴影颜色    可选  

盒子模型：
所有的HTML元素都可以看成盒子模型。
组成：边框(border), 内容(width,height), 边距( 内边距(padding)和外边距(margin) )

<div></div>    盒子    
布局方式：  div+css 

之前的布局方式：table表格

边距： 布局方式之一
1.内边距
padding
内容到边框的间距

padding-top       上内边距
padding-bottom    
padding-left
padding-right

简写：padding:10px 20px 30px 40px;

简写的方向和外边距一样。

2.外边距
 margin     调整盒子与盒子之间的距离

单独给一个方向加外边距：
margin-top
margin-bottom
margin-left
margin-right

简写：
margin:10px 20px 30px 40px;
四个值：上    右    下   左

margin:10px   20px   30px;
四个值：上     左右    下  

margin: 10px    20px;
四个值：上下     左右 

margin:10px;
一个值：四个方向

左右居中效果：
margin-left  和   margin-right    值给auto

浮动：float     布局方式之一
会使我们的元素向左或者向右移动，不能上下移动，其周围的元素会重新排列。
值：
  float:left;  左浮动
  float:right; 右浮动

清除浮动：
1.调成一个层面上
2.给浮动元素外侧套一个盒子
3.clear:both;