CSS 盒子模型
1、所有标签都属于盒子,都可以设置 宽高 内外边距 边框
2、内容的宽度高度:width height
3、元素的宽度:左边框+左内边距+width+右内边距+右边框
高度:上边框+上内边距+height+下内边距+下边框
4、元素空间的高度宽度:左外边距+左边框+左内边距+width+右内边距+右边框+右外边距
5、增加padding后元素的宽高也会有变化,如果要保持元素宽高 就要减去内容的宽高。
6、增加border后元素的宽高也会有变化,如果要保持元素宽高 就要减去内容的宽高。
7、box-sizing这个属性可以保证给盒子增加padding和border后 盒子宽度高度不变 原理:如果要保持元素宽高 就要减去内容的宽高。
8、box-sizing:lcontent-box 元素的宽高=边框+内边框+内容宽高
border-box 元素的宽高-width/height
9、两个盒子是嵌套关系的话 设置里面盒子的顶部外边距(margin)后 外面的盒子也会被顶下来。可以给外边的盒子添加一个边框属性解决。
控制嵌套关系盒子之间的距离 先考虑padding属性。
margin:0 auto; 可以让里面的盒子在大盒子中水平居中。水平有效 垂直方向需要用像素控制。
text-align:center 和 margin:0 auto 的区别:text-align:center 设置盒子中存储文字/图片的水平居中。margin:0 auto 让盒子自己居中。
10、清空默认内外边距 更好的控制盒子的宽高,编写代码第一件事最好马上清空默认边距。
通配符清空 *{margin:0
padding:0}
借鉴:body,div,dl,dt,dd,ul,ol,li,h
1
,h
2
,h
3
,h
4
,h
5
,h
6
,
pre
,
code
,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin
:
0
;
padding
:
0
}
11、行高 line-height:所有的行都有行高。行高不同于盒子的高(height)
文字在行高中默认是垂直居中。
一行文字的行高设置跟盒子一样的高就可以使文字垂直居中。多行文字需要用 padding和box-sizing:border-box。
12、盒子存储的是文字 一般以盒子左边的内边距为基准,右边内边距有误差,因为右边放不下一个文字 那么文字就会换行显示 所以距离会有误差
网页布局方式
常见排版方式:1.标准流(文档/普通流) --默认排版
垂直排版-块级元素 水平排版-行内元素/行内块级元素
2.浮动流
浮动流只能设置某个元素的左对齐或者右对齐 没有居中对齐 center, 不可使用 margin:0px auto;
浮动流不区分 块级元素/行内元素/行内块级元素 都可以水平排版
在浮动流中 块级元素/行内元素/行内块级元素 都可以设置宽高
浮动元素的脱标:脱离标准流。元素1浮动 元素2没有浮动 这时元素1会盖住元素2
浮动元素规则:
同方向浮动元素,先浮动的元素会显示在前面,后浮动的元素会显示在后面。
不同方向浮动元素 左找左 右找右
浮动元素浮动之后的位置,由浮动之前的标准流中的位置来确定。
3. 定位流