day10

如果你不能简单说清楚,说明你还没有完全明白。

练习一:

day10_第1张图片
border-collapse:collapse,尴尬,拼错了


day10_第2张图片
css代码


盒子模型:


day10_第3张图片

padding:

padding(20px,30px,40px,50px);顺时针,上下左右;margin一样。

padding(20%,30%);上下填充20%,左右30%;占父级元素的百分比。

练习二:


day10_第4张图片
练习二

源码


day10_第5张图片
练习二源码

练习三:制作一个三角形。


day10_第6张图片


day10_第7张图片
css源码

当给

嘿嘿

设置鼠标移动在上面显示其border:1px时,会因为border加了1px,导致下面的内容会被挤下去。可以利用border的transparent属性,在p上事先设置好其border:1px,但隐藏起来


day10_第8张图片

利用css画圆和椭圆:


day10_第9张图片


day10_第10张图片

外边距的合并

1.垂直方向上会发生合并,取较大者

2.包含关系(没有边框和填充)

练习四,


day10_第11张图片


day10_第12张图片

你可能感兴趣的:(day10)