Python web前端 04 盒子模型

Python web前端 04 盒子模型

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}