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}