蛋疼的一周,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 * /