指尖的流连 8月29

 

蛋疼的一周,CSS页面布局到现在还是乱的, 有些地方总是搞不懂原理,英语差应该多记单词!

CSS必掌握单词;

　　padding(内边距);边框内容到边框是内边距

　　margin(外边距);边框外面是外边距,

　　border(边框);

　　

　　border-style(边框的粗细) (缩写: border: 1px solid red : 设置一个1px的边框,颜色为红色)

　　border-width(边框的样式) (不常用)

　　border-color(边框的颜色)

 

　　padding-top(内容距离内层上边的距离)

　　　　　　-bottom(内容距离内层下边的距离)

　　　　　　-left(内容距离内层左边的距离)

　　　　　　-right(内容距离内层右边的距离)

　　

　　margin-top(边框外距离上边的距离)

　　　　　　-bottom(边框外距离下边的距离)

　　　　　　-left(边框外距离左边的距离)

　　　　　　-right(边框外距离右边的距离)

 

高度,宽度;

　　高度和宽度可以设置 边框 , 图片 , 内边距 , 外边距 ,div的大小  , 不适合行内元素: 如 <a标签> <span> <br - 换行> <img图片>

　　width: 100px; /* 宽为 100px */

　　height: 200px;   /* 高为 200px */

 

 

 

border(边框);

　　内容元素在边框里面,元素到边框的距离 为 内边距 , 边框外 为外边距.

　　边框缩写 :

　　　　　div　{border: 1px solid red} /* 为一个块级元素div设置一个边框为 1px ,边框样式为实线,颜色 红色.

　　　　　

　　行内元素,高度和宽度是无效的, 

 

margin(外边距);

　　垂直方向,margin 当有两个div 会重叠

　　在没有边框时,会有边框重叠.

　　overflow: hidden;消除边框重叠.

　　margin: 0 auto;(上下为0 左右为auto 有宽度就会居中)

　　margin:auto; (外边距自动填充)

　　外边距缩写:

　　　　　　　　h1( margin: 5px 10px 5px 10px; )  /*外边距的缩写中间是空格,顺序为:上右下左 * /

　　　　　　　　h1(margin: 5px; ) /* 外边距上下左右都为 5px */

　　　　　　　　h1(margin: 5px 10px;) /* 外边距上下为5px , 左右为 10px * /

　　　　　　　　h1(margin: 5px 10px 3px;) /* 外边距上为5px,左右为10px,下为3px * /

　　

　　

 

padding(内边距);

　　内边距是:内容到边框的距离之间的区域  ,   内边距不能为负数.

　　内边距的缩写:

　　　　　　　　h1(padding:5px 10px 5px 10px;) /* 内容 距离上边框5px,右边框10px,下边框5px,左边框10px  * /

　　　　　　　　h1(padding: 5px;)  /* 内容距离边框 上右下左5px */

　　　　　　　　h1(padding:5px 10px;)  /* 内容距离上下边框5px , 右左边框10px * /