盒模型
每一个html元素都可以看做成为一个盒模型。
1.一个盒子的特点(border,padding,内容区域)
2.盒子与盒子之间的关系(margin)
盒子的特点:
1.content(内容区域):展示文字跟图片的
2.padding(内边框):内容与边框线的距离
3.border(边框):元素的边框
4.margin(为边框):元素与元素之间的距离(兄弟元素,父子级关系元素)
content知识点:
1.width:内容的宽度
2.height:内容的高度
3.overflow:当内容超出规定的宽高后的处理
两个值:
overflower:hidden;超出部分影藏
overflower:scroll;在水平跟垂直方向产生滚动条
元素的宽高计算
元素的高度=border-top + padding-top + height + padding-bottom + border-bottom
元素的宽度=border-left + padding-left + width + padding-right + border-right
margin:
margin-top 上边距
margin-right 右边距
margin-bottom 下边距
margin-left 左边距
margin符合写法
margin:10px 表示上下左右的边距都是10px
margin:10px 20px 第一个值表示上下 ,第二个值表示左右
margin:10px 20px 30px 第一个值表示上, 第二个值表示右, 第三个值表示下,第四个没有, 就与第二个值保持一致
margin:10px 20px 30px 40px 按上右下左一次赋值
特性:
1.margin只会影响元素的位置,不会影响自身的宽高的,不占空间区域的,可以接受负值
<div class="class">
<div>我是嵌套div</div>
</div>
margin小bug
当两个元素垂直排列
1.当父元素嵌套子元素垂直排列时,他们的margin-top就会取其中一个margin-top的最大的一个值。会造成整 个父级元素下移。
2.当两个兄弟元素垂直排列时,上面的一个元素的margin-bottom与下一个元素的margin-top取值取其中一个 的最大值。
buf解决方式:
1)给父级加边框
2)在父级叫overflow:hidden
3)不要用margin-top 用父级的pidding-top来代替
3.当两个兄弟元素垂直排列时,上面的一个元素的margin-bottom与下一个元素的margin-top取值取其中一个的 最大值.
border 标签元素的边框
border-width:边框的宽度
border-style:边框线的样式
值: solid: 实线 dashed:虚线 dotted:点线(IE6不识别)
border-color: 边框线的颜色
border复合写法:
border:border-width border-style border-color
border-radius:圆角
border-radius:100px 表示四个角半径都是100
border-radius:100px 5px 表示左上角与右下角一样,半径都是100;右上角和左下角一样,半径都是5
border-radius:100px 5px 20px 表示左上角半径是100;右上角半径是5;右下角半径是20;左下角和右上角一 样
border-radius:100px 5px 20px 30px 表示左上角半径是100;右上角半径是5;右下角半径是20;左下角半径是 30
padding
padding 内边距或内填充
padding-top 上内边距
padding-right 右内边距
padding-borttom 下内边距
padding-left 左内边距
padding复合写法:
padding:10px 表示上右下左的边距都是10px
padding:10px 20px 第一个值表示上下10 ,第二个值表示左右 20
padding:10px 20px 30px 第一个值表示上10, 第二个值表示右20, 第三个值表示下30,第四个没有, 就与第二个 值保持一致
padding:10px 20px 30px 40px 按上右下左一次赋值
特点:
padding 占元素标签的空间