盒子模型
1:外边距
属性:margin (margin-top margin-bottom margin-left margin-right)
取值:数字+px;
margin:x y; margin取两个值的时候x代表的是上下 y代表的是左右
margin:x y z m; 取四个值的时候 上右左下的顺序
左右设置为auto的话 居中显示
有的块元素会存在默认的外边距例如 body h1~h6 p
垂直方向上的外边距合并问题:两个垂直外边距相遇时将会合成一个外边距,最终以较大的值显示
继承性问题:给子元素设置margiin-bottom时,默认会被识别成父亲的margin-bottom
解决方案:1给父亲设置边框 2通过父亲的padding解决
2:内边距
1什么是内边距
内边距时内容和边框之间的空白,内边距会扩大边框所占用的面积
2属性
padding 取值 数字+px
padding:x y 以两个数字 x代表上下 y代表左右
padding:x y z m 以四个数字 上右下左
3:背景
1背景色
background-color 背景颜色会填充到元素的边框,内边距,内容区域01
transpartent透明
2背景图片
属性:background-image:url(“图片路径”)
3背景重复
默认的图片能铺满整个框(平铺)
属性:background-repeat
取值:repeat 默认值 repeat-x水平平铺 repeat-y垂直平铺 no-repeat不平铺
4背景图片固定
属性:background-attacment
取值:fixed 固定
5背景定位
改变背景图片在元素中的位置
属性:background-position
xy x代表水平方向 y代表垂直方向
center top bottom
3:文本格式化、
1、指定字体
font-family:选择字体格式 font-family:"microsoft yahei","arial","verdana"; 2、字体大小 font-size:value; ***** font-size:12px; 3、字体加粗 normal正常 ***** font-weight:normal / bold ; 400 - 900 4、字体样式(斜体) i font-style:normal/italic; 5、小型大写字母 font-variant字体型状 font-variant:normal/small-caps; 6、字体属性 font:font-style font-variant font-weight font-size font-family; 常用方式: font:font-size font-family; font:12px "微软雅黑",arial,verdana;