CSS基础笔记又续+1

缺乏、安全感 2022-09-25 15:24 174阅读 0赞

## **box** ##

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

**内边距 padding**

**外边距 margin**

![这里写图片描述][20160913103558775]

![这里写图片描述][20160913103616072]

width和height 指内容区域的宽度和高度  
增加内边框、边框和外边框不会影响内容区域的尺寸，但会增加元素框的总尺寸。  
![这里写图片描述][20160913103647588]

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

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

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

![这里写图片描述][20160913103707635]

单边设置

上 右 下 左 顺时针方向来的

如

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

margin：20px 40px 20px 40px

![这里写图片描述][20160913103725870]

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

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

也可以只写两个

padding: 20px 40px;

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

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

margin:20px auto ;

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

![这里写图片描述][20160913103814933]

\*\*

## 综上总结： ##

\*\*

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；

[20160913103558775]: /images/20220717/236dd006299840a3a447a08a41fde1f9.png
[20160913103616072]: /images/20220717/cee5c5b7f6854fe6af5bfaa78127ab15.png
[20160913103647588]: /images/20220717/b3bc6b2f788b4a74af7c2e65f5a65b38.png
[20160913103707635]: /images/20220717/b23dda822d3949d5966debd1fe3ca4d2.png
[20160913103725870]: /images/20220717/a6c3bf2377e54f5989fd9d167f5e3cc0.png
[20160913103814933]: /images/20220717/eafdd7ca39504e79b2dc60d038aa19b7.png