CSS
1.宽度:width
2.高度:height
让盒子里的元素垂直居中:
div{
height: 40px;
line-height: 40px;
}
3.边框:border
边框样式
属性 样式 属性值
border-width 边框大小 (像素:px)(倍数:em)
border-color 边框颜色 (16进制RGB值:#aabbcc)(rgba函数:rgba(红,绿,蓝,透明度))(名称:red)
border-radius 圆角边框 (像素:px)(百分比:%)
border-style 边框样式 (默认,实线:solid)(虚线:dashed)(点线:dotted)(双线:double)
border-collapse 合并边框 (默认,分开:separated)(合并:collapse)
单独选择一边 (上:border-top)(右:border-right)(下:border-bottom)(左:border-left)
border 复合样式 基本写法:(大小,样式,颜色)
4.内边距:padding
属性值
属性值 作用
auto 效果:自动设置
px 像素,不能设置负数
行内效果不规范
行内效果如span,设置padding虽然显示的内边距没问题,但是内容会往下偏
5.外边距:margin
属性值
属性值 作用
auto (效果:自动设置)让盒子在浏览器居中,就给左外边距和右外边距设置auto
px 像素,不能设置负数
垂直外边距和水平外边距区别
两个盒子在同一水平上,给左边的盒子设置右外边距,给右边的盒子设置左外边距,它们的外边距不会合并,都会存在
两个盒子在同一垂直上,给上面的盒子设置底外边距,给下面的盒子设置顶外边距,它们的外边距会合并,取最长
border的连写
border:线条粗细 边框样式 线条颜色;
颜色的表现方式可以为:十六进制、rgb函数、rgba函数、英文单词
在这里插入图片描述
border样式可以自定义input边框线
单向边框样式
top上 bottom下 left左 right右
border-方位名词:像素 线条 颜色;
取消边框
border:none;
透明的边框
border-color:transparent
1内边距padding
//只给一个值时
padding: 上下左右;
//只给两个值时
padding: 上下 左右;
//只给三个值时
padding: 上 左右 下;
//只给四个值时
padding: 上 右 下 左;
外边距margin
// 只给一个值时
margin: 上下左右;
// 只给两个值时
margin: 上下 左右;
// 只给三个值时
margin: 上 左右 下;
// 只给四个值时
margin: 上 右 下 左;
若要盒子在水平方向上居中 左右设为auto
水平外边距不会重叠,垂直外边距会重叠
使margin垂直不重叠的方法
父级盒子加上一个边框(边框线可透明)
父级盒子加个内边距padding(至少一像素),然后在子级进行操作
父级盒子设置overflow:hidden(溢出隐藏,相当于父级盒子四边都获得了边框)
图片的偏移
插入的图片通过外边距盒子模型来偏移
背景图片通过 background-position直接偏移