Python web前端 04 盒子模型
盒子模型是由内容（content）、内边距（padding）、外边距（margin）、边框（border）组成的
一、边框 border
#border 边框 div{border:10px soiled blue}#依次表示border-width（边框宽度）、border-style（类型）、border-color（颜色），这是符合写法 #border-width #一个值的时候：表示四个方向一样，上右下左（顺时针）； #两个值的时候：上下、右左 #三个值的时候：上、右左、下 #四个值的时候：上、右、下、左 #当然也可以指定某条边的样式 #border-top上（right右、bottom下、left左）-style类型（width宽度、color颜色）
二、内边距 padding
#padding表示内边距，即内容与边框的距离 div{padding:30px;} #表示四个方向的值都一样 #写1-4个值的规则跟border一样都是顺时针 #特殊情况：span 左右有效果，上下没有效果
三、外边距 margin
#margin 外边距 元素与其他元素的距离（边框以外的距离） div{margin:20px} #1-4个值的时候跟border、padding一样都是顺时针 #如果需要左右居中的是可以margin:auto #注意：垂直方向 margin-top（bottom）取的是两者之间的较大值 # 水平方向 margin-right（left）取的是两者的和 #解决内边距重叠的问题 #当内嵌盒子与外部盒子内边距重叠的时候 overflow:hidden.#给外盒子添加这句话就可以 border:!px soiled red #这两种方法都可以解决这个问题，但是加了border的时候盒子的大小会变化
四、盒子大小
#盒子大小=样式宽+内边距+边框 #盒子宽度=左右border + 左右padding + width #盒子高度=上下border + 上下padding + height
五、浮动
#浮动：使元素脱离文档流，按照指定（左右）方向发生位移，遇到父级边界或者相邻的浮动元素停下来 #文档流：使文档中可显示对象所占用的位置/空间（在页面中占位置） #脱离文档流：在页面中不占位置 #清除浮动：1、给父级增加高度（不推荐）；2、给父级加overflow:hiddin；（推荐使用）3、给父级加一个类 #类：.clearfix:after{content:"";display:block;clear:both;} #特点：如果只给前面的元素浮动，后面的要占据他的位置 float:left(right)#左右浮动 border-radius：50% #将内部元素变成了圆圈，这个便是快速圆角，也可以写px，1-4个值 #浮动的用途：导航条
六、定位 position
#定位position #分为 静态定位static、相对定位relative、绝对定位absolute、固定定位fixed #静态定位：没有定位，默认 #相对定位：相对于正常位置（原来没定位之前的位置）进行定位，还要占据位置 #绝对定位：没有占据位置，是元素完全脱离文档流； #固定定位：相对于浏览器窗口进行定位 #没有定位父级，则相对于整个文档发生偏移、参考最近非static定位的父级进行定位 #方向词：top left bottom right z-index #规定定位的层级（默认为0） #值：number值越打层级越高
#相对定位 position:relative; left:20px; top:25px;
#绝对定位 #如果有参照父级，如果父级有，就找父级，没有就继续往上面找 #absolute一般跟相对一起用
#固定定位 #不管浏览器上下怎么滚，这一行必须一直出现，这就得的用到固定定位 div{ position:fixed; top:0;#既然用到了固定定位，那么就必须制指定位置 left:100; }
#层级问题 相同元素定位的话遇到重叠的情况会默认出先最后面的元素，如果想要某个元素，可以下z-index=1lai
七、补充
#若要实现页面样式没有的，鼠标移上去出现图标 #例如ul 下的 li #在style里面在原来的样式里面写上： li{display:none} #在父级元素 ul:hover li{ dispaly:bolck}