0基础学习网页结构编程

目录

一、文档流（normal flow）

二、盒子模型（布局相关的样式）

---

一、文档流（normal flow）

网页是一个多层结构，css可以给每一层设置样式，最终我们看到是最上面一层。

定义：文档流是网页最底下的那一层

元素分为两种状态：
1、在文档流中
2、脱离文档流

之前将元素分为三类，块元素，行内元素，行内块元素，分别具有一些特点，这些特点都是元素在文档流中的特点。

注意：
①一但元素脱离文档流以上元素的特点都不复存在。
②我们创建的元素默认是在文档流中的。

二、盒子模型（布局相关的样式）

文档流默认的布局方式（盒子模型！！，块元素，行内元素，行内块元素等默认布局方式），浮动，定位，弹性盒子

网页中有很多的元素，将元素摆放在合适的位置，盒模型将页面中所有元素的形状都统一了，你在布局时只需要考虑到元素的大小即可

盒模型            快递
内容区   content     冰箱
内边距   padding    泡沫
边框       border      快递盒子
外边距   margin      快递离你的距离

盒子大小：跟内容区，内边距，边框有关系，跟外边框没有关系

（1）内容区  content：
width：；  内容区的宽
height：； 内容区的高

（2）边框  border：
是用来隔开盒子内部和盒子外部的
设置边框三个要素缺一不可！

①边框的宽度   border-width（有默认值，大小是1-3px）

~可以设置多个值，以空格隔开即可
4个值：上  右  下  左
3个值：上   左右   下
2个值：上下    左右
1个值：上下左右

~可以单独设置某一边的宽度
border-top-width：；
border-bottom-width：；
border-left-width：；
border-right-width：；

②边框的颜色   border-color（有默认值，黑色）

~可以设置多个值，以空格隔开即可（和上面border-width通用）

~可以单独设置某一边的宽度（和上面border-width通用）

~小箭头的写法：用transparent设置相应的透明色

③边框的样式   border-style（没有默认值）

~样式的种类
solid      实线
dotted   点状的虚线
dashed  条状的虚线
double  双线

~可以设置多个值，以空格隔开即可

~可以单独设置某一边的样式

④border简写（三要素缺一不可,空格隔开，顺序无所谓）

~例子border：10px color style；

~设置某一个边框
border-top/bottom/left/right：10px color style；

~去掉某一个边框
border-top/bottom/left/right：none;

(3)内边距  padding是边框和内容区之间的距离

~可以单独设置某一边的内边距
padding-top/bottom/left/right：；

~padding简写
padding:px px px px ;  和上面多个值写法一样

(4)外边距  margin 
不影响盒子的大小，可以改变盒子的位置
margin-top         正值向下移动，负值向上移动
margin-bottom  正值自己不动，挤下面的元素移动；负值自己不动，下面的网上去
margin-right       正负值元素都不动，没有变化
margin-left        正值向右移动，负值向左移动

~margin简写
margin：上px 右px 下px  左px；；

(5)水平方向影响盒子位置有哪些元素
margin左右   border左右   apdding左右  内容  （共七个元素）

！！过度约束

~过度约束：以上宽度相加=父元素内容区宽度
如果不等于，浏览器就会进行调整，让等式成立

~浏览器如何调整
①如果水平方向7个值没有auto，浏览器会自动调整margin-right的值

②如果7个值当中有三个值可以设置auto（margin-left ，width，  margin-right）

设置1个auto：谁是auto浏览器就调整谁

设置2个auto
margin-left，width                   调整width
margin-right，，width                调整width
margin-left，margin-right，       同时调整left，right

设置3个auto：调整width

总结：
①如果7个值当中有auto，调整顺序
width>margin-left/right

②如果想让块元素水平方向居中，必须要让margin-left/right值为auto