css中div属性及类型

文档流

首先谈一下文档流:
浏览器会根据 元素的排列方式 块元素 从上到下排列行元素和行内块 从左到右排列 如果空间不足 自动换行我们称为流式布局

有了文档流,我们知道了div标签属于标准的块元素,而盒模型又分为标准盒模型和怪异盒模型

盒模型

1.标准盒模型

盒模型(box moldel),是w3c规定一个浏览器如何渲染,显示一个元素,根据元素的种类分为块级元素盒模型和行内元素盒模型

• 盒子组成 = content+padding+border+margin
• 补充:父盒子宽高设置,子盒子未设置宽高时子盒子会继承父盒子的宽度,高度不会
  注意: width设置的是内容区的宽度

2.怪异盒模型

怪异盒模型也叫IE盒子模型
怪异盒主要表现在IE内核浏览器中，当前大部分浏览器支持的是W3C的标准盒子模型，不过其他浏览器也保留了IE盒子模型的支持，需要在CSS中添加触发怪异盒的条件。

• 怪异盒模型(ie) box-sizing: border-box;
• 盒模型组成 = content + padding + border + margin
  注意: width 包含了 content + padding + border

盒属性

1.padding内边距:

padding: 1px 2px 3px 4px;
内边距设置顺序为 top right bottom left
length: 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
% :规定基于父元素的宽度的百分比的填充
inherit:指定应该从父元素继承padding

2.margin外边距

magin: 2px 3px 4px 5px ;
外边距设置顺序为 top right bottom left
auto :浏览器计算外边距
length: 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
% :规定基于父元素的宽度的百分比的填充
inherit:指定应该从父元素继承margin
注:常用margin : 0 auto;使块元素居中
外边距的穿透及重和问题:
重合:
两个盒子都设置外边距是,外边距不会相加,会出现重合问题,以值大的为准
穿透:
外边距穿透发生的条件: 1. 在垂直方向 2. 父元素没有边框
如何解决:1.给父盒子加边框2.不使用外边距使用内边距

3. border边框

1.border: 10px solid rgb(14, 204, 14);
参数1: border-width 边框宽度
参数2: border-style 样式 solid:实线 dotted:点状 dashed:虚线 double:双线
groove:3D 凹槽边框 ridge: 3D 垄状边框
参数3: border-color 边框颜色

2.边框的切角
border-radius