web前端css

一，css盒模型

1.边框围绕着内容和内填充区域的线

border-width 边框的宽度 （px）

2.border-style：边框的线型

solid 单实线 double双实线 dashed 条状虚线

dotted 点状边框 none 没有边框

3.border-color:边框的颜色

注：border-width和border-style同样效果

4.利用边框设置实现三角形

盒子大小宽高为零 ，对边为none，他相邻的边框的颜色为透明色，transparent

5.利用边框实现梯形

盒子大小不能为零 要那个梯形，他的对边为none，他相邻的边框的颜色为透明色，transparent

二，外边距问题及解决方法

1，兄弟关系外间距塌陷问题

现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象

两个值一样大，取当前值 两个值不同，取较大值

解决方法：分别给这两个元素套一个父元素，并设置overflow：hidden

2，父子关系外间距塌陷

现象： 1.元素嵌套关系，子元素的margin-top值会叠加给父元素； 2.如果父元素也有margin-top值，会与子元素的margin-top值合并，取两者较大值；

解决方法： 1.为父元素设置上边框或者上填充 2.为父元素设置overflo：hidden； 3.转换思路，巧用padding，规避margin

三，overflow详解

1，取值：

visible；溢出显示，默认值

hidden；溢出隐藏

scroll；溢出显示滚动条，横向和纵向都显示

auto;内容溢出时，显示滚动条

overflow-x 水平方向 overflow-y 垂直方向

四，css背景

1，background-color 设置元素的背景颜色

2，background-image 设置背景图像

url（）图片的资源路径

3，background-repeat

repeat默认 repeat-x 水平重复

repeat-y 垂直重复 no-repeat 仅显示一次

4，background-position

设置背景图像的起始位置

取值：top bottom left center

两个值：水平方向 垂直方向

5，background简写：

beckground：red url（）no-repeat left top

如果某个属性不需要设置，可以省略