文章目录
盒子模型
1.边框
1.边框实现
语法:
border:width style color;
边框演示为必填项分为:
样式取值 | 含义 |
---|---|
solid | 实线边框 |
dotted | 点线边框 |
dashed | 虚线边框 |
double | 双线边框 |
2.单边框设置
分别设置某一方向的边框,取值:width style color;
属性 | 作用 |
---|---|
border-top | 设置上边框 |
border-bottom | 设置下边框 |
border-left | 设置左边框 |
border-right | 设置右边框 |
3.网页三角标制作
1.元素设置宽高为0
2.统一设置四个方向透明边框
3.调整某个方向边框可见色
#div1{
margin: 0 auto;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 50px solid #000000;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-720LeDvP-1620528236084)(D:\自律\markdown笔记\image-20210509012622397.png)]
4.圆角边框
1.属性: border-radius指定圆角半径
2.取值:像素值或百分比
border-radius: 5px 5px 8px 20px;
3.取值规律:
一个值 | 表示统一设置上右下左 |
---|---|
四个值 | 表示分别设置上右下左 |
两个值 | 表示分别设置上下左右 |
三个值 | 表示分别设置上右下,左右保持一致 |
5.轮廓线
1.属性:outline
2.取值: width style color
3.区别∶边框实际占位,轮廓不占位
4.特殊∶取none可以取消文本输入框默认轮廓线
6.盒阴影
1.属性:box-shadow
2.取值:h-shadow v-shadow blur spread color;
3.使用︰不管是浏览器窗口还是元素自身都可以构建坐标系,统一以左上角为原点,向右向下为X轴和Y轴的正方向
样式取值 | 含义 |
---|---|
h-shadow | 取像素值,阴影的水平偏移距离 |
v-shadow | 取像素值,阴影的垂直偏移距离 |
blur | 取像素值,表示阴影的模糊程度,值越大越模糊 |
spread | 选填,取像素值,阴影的尺寸 |
color | 设置阴影颜色,默认为黑色 |
2.盒模型概念
1.在模型中,它规定了元素处理内容、内边距、边框和外边距的方式
2.最内是内容,包围内容的是内边距,内边距的边缘是边框
3.边框以外是外边距,外边距默认是透明的
1.内边距
1.属性:padding
2.作用︰调整元素内容框与边框之间的距离
3.取值∶单位是px或百分比,但不允许使用负值
一个值 | 表示统一设置上右下左 |
---|---|
四个值 | 表示分别设置上右下左 |
两个值 | 表示分别设置上下左右 |
三个值 | 表示分别设置上右下,左右保持一致 |
4.单方向内边距,只能取一个值:
属性 | 作用 |
---|---|
padding-top | 设置上边距 |
padding-bottom | 设置下边距 |
padding-left | 设置左边距 |
padding-right | 设置右边距 |
2.外边距
1.属性:margin
2.作用︰调整元素与元素之间的距离
3.特殊∶
1 ) margin:0;取消默认外边距
2 ) margin:0 auto;左右自动外边距,实现元素在父元素范围内水平居中
3 ) margin:-10px;取负值元素位置的微调
4.单方向外边距∶只取一个值
属性 | 作用 |
---|---|
margin-top | 设置上边距 |
margin-bottom | 设置下边距 |
margin-left | 设置左边距 |
margin-right | 设置右边距 |
5.外边距合并:
1)垂直相遇
1.子元素的margin-top作用于父元素上
2.元素之间同时设置垂直方向的外边距,最终取较大的值包含合并
3.当一个元素包含在另一个元素中时,它们的上和包含上/或下和包含下外边距也会发生合并
3.元素最终尺寸的计算
1.盒模型相关的属性会影响元素在文档中的实际占位,进而影响布局
2.元素设置width/height指定的是内容框的大小
3.最终尺寸= width/height+padding+border+margin
4.页面布局
默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示
1.浮动布局
主要用于设置块元素的水平排列
1)属性
float
2)取值
可取left或right,设置元素向左浮动或向右浮动
float:left/right;
3)特点
- 元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位
- 元素设置浮动,就具有块元素的特征,可以手动调整宽高
- “文字环绕”:浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示
4)常见问题
子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局
5)解决
- 对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
- 在父元素的末尾添加空的块元素。设置clear:both;清除浮动
clear:left/right/both
- 为父元素设置overflow:hidden;解决高度为0
overflow:hidden;