1:div+css
background-color 背景颜色
background-image 背景图片
background-repeat: repeat 背景图片是否扩展 (水平方向和垂直方向都扩展)
norepeat 不扩展不平铺
repeat-x 仅仅水平方向扩展 平铺
repeat-y 仅仅垂直方向扩展 平铺
background-position 背景图片的偏移效果
背景的简单写法
background:颜色 url(图片路径) repeat-x/repeat-y 50px 20px
2.布局属性
float :left/right 浮动效果
利用float属性可以让多个块级元素在同一行
clear :both left right 清除其他元素的float效果 让它不影响本元素
display :block 以块级元素效果来展示,把行级元素转换成块级元素
none 隐藏不显示 不保留位置
inline 以行级元素效果显示,把块级元素转换成行级元素
visibility visible 可见 显示
hidden 隐藏 不现实 但保留自身位置
display和visibility的区别:visibility的位置可保留 display可实现块级与行级元素的转换
overflow : visible 可见
auto 自适应方式 不超出正常,超出出现滚动条
hidden 隐藏
scroll 以滚动条的方式显示
3.盒子模型(div p ul li)
width
height
border
margin 外间距(盒子与盒子之间的间距)margin不会使盒子变大
简单写法: margin:10px 20px 30px 40px 上-右-下-左的顺序作用于四边、
margin:10px 四个方向都是一致的
margin:10px 20px 上下方向一致,左右方向一致
margin:10px 20px 30px 上为10px 右为20px 下为30px 左为对面的值20px
margin 的叠加效应
在垂直方向 margin-top 和margin-button不会叠加,只会在两者之间取一个最大值
在水平方向 margin-top 和margin-button 会叠加
margin:0 auto
padding 内填充 内间距 单元格与内容之间的间距,会影响单元格的大小
padding-bottom:
padding-right:
padding-left:
padding-top:
盒子大小的计算
宽度=padding-right:+padding-left:++margin-left+margin-right+border-right+borderleft
4.
border-radius: 20px
块级元素边框圆形化