盒子模型
- 内容(content):输出的内容
- 宽度/高度(hight/width):存放内容的区域,content的宽高
- 内边距(padding):content与border之间的填充
- 边框(border):内边框与外边框之间的边框
- 外边距(margin):border外的边框
属性
- border边框样式:
- dotted:定义点线边框
- dashed:定义虚线边框
- solid:定义实线边框
- double:定义双边框
- border: 边框的宽度 边框的样式 边框的颜色;
- border-top(分别设置top、right、bottom、left): 边框的宽度 边框的样式 边框的颜色;
- margin: xx px;
- margin-top(分别设置):xx px;
- padding:xx px;
- padding-top(分别设置):xx px;
清空默认边距
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
{
margin: 0;
padding: 0;
}
box-sizing
- CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
- box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变
box-sizing取值
- content-box:元素的宽高 = 边框 + 内边距 + 内容宽高
- border-box:元素的宽高 = width/height的宽高
margin:0 auto
text-align:center;margin:0 auto;区别:
- text-align: center;作用:设置盒子中存储的文字/图片水平居中
- margin:0 auto;作用:让盒子自己水平居中
盒子阴影和文字阴影
盒子阴影
box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;
注意点
- 盒子的阴影分为内外阴影, 默认情况下就是外阴影
- 快速添加阴影只需要编写三个参数即可
- box-shadow: 水平偏移 垂直偏移 模糊度;
- 默认情况下阴影的颜色和盒子内容的颜色一致
文字添加阴影
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;