文档流
网页是多层结构,最底部的一层为文档层
创建的元素默认都在文档层中排列
元素有两种状态:
- 在文档流中
- 不在文档流中
特点:
- 块元素
在页面独占一行
默认宽度是父元素的宽度
默认高度是子元素内容的高度
自上向下排列 - 行内元素
不会独占一行
默认宽度和高度都取决于内容
自左向右排布
盒模型
-
盒模型:由外边距(margin)、边框(border)、内边距(padding)、内容区(content)组成
盒子大小:默认情况下,由内容区、内边距和边框相加决定
box-sizing可设置盒子大小的计算方式:
content-box默认,宽度和高度为内容框的大小
border-box宽度和高度为可见框(内容区+内边距+边框)的大小边框:边框大小影响盒子大小,至少需设置:border-width,border-color,border-style
内边距:padding-top、padding-right、padding-bottom、 padding-left
可影响盒子大小,
外边距:外边距不会影响盒子可见框的大小,但会影响盒子的位置
margin-top和margin-left 正值则使自身向相反方向移动
margin-right不会产生效果
margin-bottom正值则使相邻元素向下移动
注意:垂直方向相邻外边距会发生重叠
兄弟元素:同号则取绝对值最大的,异号则相加
父子元素:相邻外边距,子元素会传递给父元素
水平布局:元素在其父元素容器内的水平布局由margin-left、border-left、padding-left、width、padding-right、border-right、margin-right决定
原则:上述元素相加=父元素内容区的宽度
情形:上述元素都未设auto,则自动调整margin-right来使等式满足
margin-left、width、margin-right中:
-任一为auto,则自动调整该属性
-若外边距和宽度同时设为auto,则外边距为0,宽度最大
-两外边距为auto,则局中
垂直布局:元素在父元素的垂直排布:
子元素高度超过了父元素,则溢出,使用overflow来处理溢出的元素
overflow的值:
visible溢出显示\hidden溢出裁剪\scroll双向滚动\auto根据需要滚动 -
行内元素的盒模型:不支持宽度和高度,只有margin\border\padding
行内元素和块元素之间的转换可用display属性:
inline行内/block块/inline-block行内-块/table表格/none不显示
visibility可用来设置元素的显示状态:
visibel正常显示/hidden不显示,但占位 -
去掉默认样式:采用通配符选择权去掉默认样式 或者 采用外部引用样式表清除默认样式
-
轮廓和圆角:
1、轮廓:
1.1 box-shadow 用来设置元素的阴影效果,阴影不会影响页面布局
第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
第三个值 阴影的模糊半径
第四个值 阴影的颜色
box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;
1.2 outline 用来设置元素的轮廓线,用法和border一模一样
轮廓和边框不同的点,就是轮廓不会影响到可见框的大小
1.3 border-radius 设置圆角 圆角设置的圆的半径大小
border-top-left-radius:20px
border-radius:50% 圆形