CSS盒子模型

盒子模型

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;