CSS基础笔记又续+1

box

框模型，定义了元素框处理元素内容、内边框、边框和外边框的方式。

内边距 padding

外边距 margin

width和height 指内容区域的宽度和高度
增加内边框、边框和外边框不会影响内容区域的尺寸，但会增加元素框的总尺寸。

对应的可以看到元素和属性和属性的值，还有box模型。

四边设置，
直接就padding和margin，就默认设置了四边。

都设置了40px，那么就是这样，距上面的box40px，左边的也是。~~~

单边设置

上 右 下 左 顺时针方向来的

如

padding:20px 40px 20px 40px 就是内边距 距上20px 距右30px，距下40px，距左 50px；

margin：20px 40px 20px 40px

还有一中设置单边的方法：

padding-top: 只设置顶部的
padding-right
paddig-left
padding-bottom只设置底部的。

也可以只写两个

padding: 20px 40px;

第一个就表示上下20，左右40。对边设置的。

还可以在margin中设置水平居中

margin:20px auto ;

这个就是距上下20px，然后左右也就是水平是自动的auto那就居中了~~~。

**

综上总结：

**

border 设置边线，然后单位有百分比、像素，em等。em是当前字体大小。

然后是颜色，RGB颜色数值 rgb()颜色。可以用0-255或者十六进制表示或者用百分比。

border有可能内容溢出出border
处理：

hidden 隐藏
scroll 滚动条
auto 自动的 常用。

当把固定了宽高时如果可能造成溢出就写这些属性。

box模型

padding,margin~ 内边距，外边距，margin xxpx auto 水平居中。

四边设置，单边设置。是顺时针的，上，右，下，左。也可以写两个value是对边设置的。

背景图片
background-repeat属性可以控制背景图片的平铺效果

可取值：

repeat:在垂直方向和水平方向重复，为重复值
repeat-x 仅在水平方向重复
repeat-y 仅在垂直方向重复
no-repet 仅显示一次

我就喜欢仅显示一次。。。。

background-position属性用于改变背景图片在元素中的位置。

可取值
x,y,left,right……

设置背景图片是否随着滚动条滚动。

默认是scroll,就是滚动的。

background-attachment 属性控制
当值为fixed 则，背景图片固定，并不会随着页面滚动而滚动。常用于实现称为水印的图像。

文本格式化

设置字体 font-family
字体大小 font-size
字体加粗 font-weight：normal/bold;
文本颜色 color
文本排列 text-align : left/right/center
文本修饰 text-decoration :none/underline
行高 line-height :value(1.6em)
首行缩进 text-indent：value(2em)

还有设置行高等于父元素的高，会居中。

表格特有样式。
如果设置了单元格的边框，相邻单元格的边框会单独显示，类似于双线边框

border-collapse属性：合并相邻的边框
设置是否将表格边框合并为单一边框
border-collapse:separate/collapse；