如何在html盒⼦中添加⽂本区域,CSS布局-盒⼦模型
盒⼦结构：
外边距 + 边框 + 内边距 + 内容
maigin + border + padding + width区分三个概念：内容宽⾼：width/height
元素宽⾼：边框 + 内边距 + 内容
元素空间宽⾼：外边距 + 元素宽⾼属性：box-sizing 有两个取值：1.content-box 默认元素的宽⾼ == 边框 + 内边距 + 内容
2.border-box 元素的宽⾼ == 内容的宽⾼嵌套关系的视图，内部视图要居中处理：1.如果两个盒⼦是嵌套关系, 那么设置了⾥⾯⼀个盒⼦顶部的外边距, 外⾯⼀个盒⼦也会被顶下来
2.如果外⾯的盒⼦不想被⼀起定下来，那么可以给外⾯的盒⼦添加⼀个边框属性css设置文字垂直居中
3.在企业开发中, ⼀般情况下如果需要控制嵌套关系盒⼦之间的距离, 应该⾸先考虑padding, 其次再考虑margin。 margin本质上是⽤于控制兄弟关系之间的间隙的auto 注意点:1.在嵌套关系的盒⼦中, 我们可以利⽤margin: 0 auto；的⽅式来让⾥⾯的盒⼦在外⾯的盒⼦中⽔平居中
2.margin: 0 auto; 只对⽔平⽅向有效, 对垂直⽅向⽆效。要控制垂直⽅向，只能通过像素。【EX：margin:150px auto;】区分作⽤：
text-align 和 margin: 0 auto;
text-align: center；作⽤: 设置盒⼦中存储的⽂字/图⽚⽔平居中
margin:0 auto；作⽤: 让盒⼦⾃⼰⽔平居中
清空默认边距1.为什么要清空默认边距(外边距和内边距)
在企业开发中为了更好的控制盒⼦的宽⾼和计算盒⼦的宽⾼等等, 所以在企业开发中, 编写代码之前第⼀件事情就是清空默认的边距
2.如何清空默认的边距
格式*{            margin: 0;            padding: 0;
}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}
设置⾏⾼1.什么是⾏⾼?
在CSS中所有的⾏都有⾃⼰的⾏⾼
注意点:
⾏⾼和盒⼦⾼不是同⼀个概念
⾏⾼指的是每⾏内容的⾼度
盒⼦⾼指的是元素的⾼度规律:1.⽂字在⾏⾼中默认是垂直居中的
2.在企业开发中我们经常将盒⼦的⾼度和⾏⾼设置为⼀样, 那么这样就可以保证⼀⾏⽂字在盒⼦的⾼度中是垂直居中的
简⽽⾔之就是: 要想⼀⾏⽂字在盒⼦中垂直居中, 那么只需要设置这⾏⽂字的"⾏⾼等于盒⼦的⾼"即可
3.在企业开发中如果⼀个盒⼦中有多⾏⽂字, 那么我们就不能使⽤设置⾏⾼等于盒⼦⾼来实现让⽂字垂直居中, 只能通过设置padding来让⽂字居中
还原字体和字号注意点:1.在企业开发中, 如果⼀个盒⼦中存储的是⽂字, 那么⼀般情况下我们会以盒⼦
左边的内边距为基准, 不会以右边的内边距为基准, 因为这个右边的内边距有误差
2.右边内边距的误差从何⽽来? 因为右边如果放不下⼀个⽂字, 那么⽂字就会换⾏显⽰, 所以⽂字和内边距之间的距离就有了误差
3.顶部的内边距并不是边框到⽂字顶部的距离, ⽽是边框到⾏⾼顶部的距离
作者：叶⼦扬

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。