pink老师 --css笔记2

盒子模型

网页布局过程：

                        1、先准备好相关的网页元素，网页元素基本都是盒子Box。

                        2、利用CSS设置好盒子样式，然后摆放到相应位置。

                        3、往盒子里面装内容。

盒子模型组成 ：边框、外边距、内边距、实际内容

                        

 

border-style:

                        solid 实线边框

                        dashed 虚线边框

                         dotted 点线边框

 边框复合写法：

 注意：层叠性！ 会就近原则覆盖。

 

 

 

 

 

 

          

          

      

 css字体粗细调整

对象值：从100到900，最常用font-weight的值为bold

font-weight:400;(字体不加粗）

font-weight:700;(字体加粗)

 

 

 

父盒子里面包了子盒子 子盒子设置margin-top会有塌陷问题（加了浮动就不会有外边距合并问题）

定位

 

 

静态定位 static--元素的默认定位方式，无定位的意思。

按照标准流特性摆放位置，没有位偏移，等同于标准流

        选择器{   position : static ; }

---

相对定位 relative--元素在移动位置的时候，是相对于它原来的位置来说的。

选择器{ position : relative ; }

相对于自己原来的位置来移动（移动位置的时候参照点是自己原来的位置）

原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）。

 

 绝对定位 absolute--元素在移动位置的时候，是相对于它祖先元素来说的。

如果没有祖先元素 或者祖先元素没有定位，则以浏览器为准定位（document文档）。

如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

绝对定位不再占有原来的位置（脱标）

选择器{ position : absolute ;}

子绝父相（子级是绝对定位的话，父级要用相对定位）。

子集绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

父盒子需要加定位限制盒子在父盒子内显示。

父盒子布局时，需要占有位置，因此父亲只能是相对定位。

 

固定定位 fixed--元素固定于浏览器可视区的位置。

以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系。

不随滚动条来滚动

固定定位不占有原来位置（脱标） 

选择器{ position : fixed ;}

 

粘性定位 sticky--粘性定位可以被认为是相对定位和固定定位的混合

选择器 {position : sticky ; top : 10px ; }

(添加粘性定位后， top:10px;代表距离上边框10px开始元素变为固定定位)