盒子模型：

盒子的概念

1.页面中的每一个标签都可以看做是一个“盒子”，通过盒子的视角更方便的进行布局

2.浏览器在渲染（显示）网页时，会将网页中的元素看作是一个个矩形区域，我们也形象的称之为盒子

盒子模型：

CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）规定，这就是盒子模型

记忆：可以联想现实中的包装盒

内容的宽度和高度

边框（border）-连写形式

属性名：border

属性值：单个取值的连写，取值之间可以用空格隔开

如：border：10 px solid red；

边框（border）- 单个属性

作用：给设置边框粗细、边框样式、边框颜色效果（会把盒子撑大）

单个属性：

作用属性名属性值
边框粗细border-width

数字+px

边框样式border-style实线solid、虚线dashed、点线dotted
边框颜色border-color颜色取值

边框（border）-单方向设置

场景：只给盒子的某个方向单独设置边框

属性值：border-方位名词

属性值：连写的取值

CSS3盒模型（自动內减）

清除默认内外边距

外边距折叠现象 – 塌陷现象

场景：互相嵌套的块级元素 ，子类元素的margin-top会作用在父元素上

结果：导致父元素一起往下移动

解决方法：

1.给父元素设置border-top或者padding-top（分隔父子元素的margin-top）

2.给父元素设置overflow：hidden

3.转换成行内块元素

4.设置浮动

注：如果想要通过margin或padding改变行内标签的垂直位置，无法生效

行内标签的margin-top和buttom ，不生效 ；行内标签的padding-top或buttom ，不生效；但是可以以通过增加行高的方式改变内边距。

案例：

Document*{margin: 0;padding: 0;box-sizing: border-box;}.news{width: 422px;height: 337px;margin: 0 auto;border: 1px solid #dfdfdf;padding: 42px 30px;margin: 50px auto;}.news h2{border-bottom: 1px solid #e9e9eb;font-size: 30px;line-height: 1;padding-bottom: 7px;} .news li{color: #6d686c;list-style: none;line-height: 42px;border-bottom: 1px dashed #e9e9eb;padding-left: 27px; }
最新文章/New Articles
 
  • 北京招聘网页设计，平面设计，php
    •  
  • 体验javascipt的魅力
    •  
  • jquery世界来临
    •  
  • 网页设计师的梦想
    •  
  • jquery中的链式编程是什么