css基础布局（盒模型、浮动、定位）_浮动盒子布局-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41950754/article/details/126275315

文章目录

一、盒模型
二、浮动
三、BFC – Block Formatting Context：
CSS之圣杯布局与双飞翼布局
iframe框架
四、定位
==三栏布局：两边固定，中间自适应==（七种方式实现）

一、盒模型

概念

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒模型的组成

内容区域：content，展示内容（文字，图片等），大小只由宽和高决定。 Width和height。
内填充：padding，调整是元素自身的内容和元素边框的距离。注意padding的简写形式，四个值，三个值，两个值，一个值。
边框：border, 可以分别设置四个方向上的边框。
外间距：margin, 调整的是该元素和相邻元素的距离。

盒模型

标准盒模型

box-sizing属性,默认值是 content-box,叫做标准盒模型。
标准盒模型的宽度是:width+padding左右内填充+border左右边框宽度+margin左右外间距。
标准盒模型的高度同宽度计算方法一致。
盒子的实际大小：内容的宽度和高度 + 内边距 + 边框

选择器{
	box-sizing: content-box;
}

请添加图片描述

设置padding内填充（上右下左.顺时针）


		<style type="text/css">
			.one{
        /*padding*/
        /*写法1   上下左右  */
        padding: 20px;
        /*写法2 上下  左右*/
        padding: 20px 30px;
        /*写法3  上  左右  下*/
        padding: 20px 30px 0;
        /*写法4  上 右  下 左*/
        padding: 10px 20px 0 30px;
        /*写法5 按照方向  left top right bottom*/
        padding-bottom: 50px;
        padding-left: 50px;
        /* 代码从上自下执行 最后设置的属性值会覆盖之前的属性值 */
			}
		</style>

设置border边框

主要属性:
- border-width:宽度; 边框宽度必写。
- border-style:实线; 边框风格必写。
- border-color:颜色; 边框颜色不设置,默认为黑色。
复合写法:
- border: 宽度颜色风格; 无论先后顺序,是同时设置上下左右四个边框。
- 也可以指定某个边框进行设置。
- border-left:宽度颜色风格;。
- 也可以仅设置某一方向边框的其中一个属性。
- border-left-color:颜色;。

<!DOCTYPE html>
		<style type="text/css">
			.one{
         /*border边框*/
         /*边框颜色 默认黑色*/
         border-color: red;
         /*边框宽度 默认为0*/
         border-width: 5px;
         /*边框风格 
         solid 实线
         dotted 圆形虚线
         dashed 方形虚线*/
         border-style: solid;
         /*推荐 综合写法 */
         border: 10px solid seagreen;
         /*按照方位来写  left top right bottom*/
         border-bottom: 5px dotted dodgerblue;
         border-left: 6px solid salmon;
			}
		</style>

边框圆角属性:
- 此属性只是对边框的样式设置,不影响盒模型尺寸。
- 如果标签为正方形,border-radius:50%; 可将其切成圆形。

/*切圆角 切四个角*/
border-radius: 10px;
/*按照方位切圆角*/
border-bottom-left-radius: 30px;

设置margin（上右下左）

/*margin 外间距  写法同padding*/
/*写法1   上下左右  */
margin: 20px;
/*写法2 上下  左右*/
margin: 20px 30px;
/*写法3  上  左右  下*/
margin: 20px 30px 0;
/*写法4  上 右  下 左*/
margin: 10px 20px 0 30px;
/*写法5 按照方向  left top right bottom*/
margin-bottom: 50px;
margin-left: 50px;

块元素位置相对父标签居中:

就是给其设置 margin:0 auto; 。
margin值在使用时的问题:
- 两个元素上下布局的时候, 如果同时设置了上面标签的margin-bottom和下面标签的margin-top,那么两个标签的上下间隔取其中的最大值. 不会累加!。
两个元素在左右布局的时候,如果同时设置了左边标签的margin-right和右边标签的margin-left,那么两个标签的水平间隔是左边标签的margin-right + 右边标签的margin-left。
在父子关系中, 第一个子标签也就是one的margin-top值会传递给父标签box;
给box加border阻断传递。
给box加overflow:hidden;阻断传递。
推荐:如果真的需要父子标签有间隔,推荐给父标签设置 padding内填充!!

标签的显隐性

display:none; 隐藏 display:block;显示不保留标签位置。
opacity: 0; 隐藏 opacity:1; 通过透明度控制显示和隐藏, 为标签保留位置;。
visibility: hidden;隐藏 visibility: visible;显示为标签保留位置。

怪异盒模型

box-sizing属性,也可以设置值为border-box 叫做怪异盒模型。
怪异盒模型的宽度是:width+margin左右外间距 , 如果怪异盒模型标签有设置padding和border则会占用已设定的宽度值,不会再向外扩展盒模型的尺寸。如果超出width，向外扩展。
怪异盒模型的高度同宽度计算方法一致。
```
选择器{
	box-sizing: border-box;
}
```

请添加图片描述

盒子阴影

box-shadow

none：无阴影
①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
④：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
：设置对象的阴影的颜色。
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

背景属性

background-image 背景图片 url(‘1.png’);
background-color 背景图片颜色 color
backgroundrepeat 平铺方式 repeat 、 no-repeat 、 repeat-x 、 repeat-y
backgroundposition 图片位置 left、 right、 top、 bottom、 center
background 简写（顺序不能错） background: green url(1.jpg) no-repeat left bottom;
background-size 背景尺寸
1.cover 会自动调整图片大小,保证图片比例不变没有形变拉伸,同时保证图片始终填充满背景区域,如有溢出部分则会被隐藏
2.contain 会自动调整图片大小,保证图片比例不变没有形变拉伸,保证图片始终完整显示在背景区域,可能会填不满盒子有留白
opacity 透明度 0-1
rgba()设置颜色的透明度

overflow

overflow 指定标签里面的内容超出了样式的宽度和高度时如何处理。

visible：默认值
scroll：添加滚动条
auto：根据需要添加滚动条
hidden：隐藏超出盒子的内容

溢出的文字以省略号显示

white-space: nowrap; //让文字在同一行显示，不换行
overflow: hidden; //溢出部分隐藏
text-overflow: ellipsis; //文字溢出部分省略号显示

二、浮动

浮动以后，用margen，后面的会覆盖前面

文档流

块级元素会独占一行，从上向下顺序排列；
    常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
    常用元素：span、a、i、em等

浮动布局

浮动

让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示
ps：因为块元素默认是独占一行的，无法在同一行显示。
给元素添加float属性即可， left和right两个值。
注意
- 浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
  建议:如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题
  作用
- 让多个盒子(div)水平排列成一行，使得浮动称为布局的重要手段。
- 可以实现盒子的左右对齐等等。
- 浮动最早是用来控制图片，实现文字环绕图片效果。
- float属性会改变元素的display属性，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。

浮动产生的问题以及解决办法

影响兄弟元素布局

解决方案: 给需要清除浮动影响的兄弟标签设置 clear:both;

父元素高度塌陷

原因：当一个元素中的子元素浮动之后，父元素就无法自动获取子元素内容高度，则父元素
没有高度了。所以就算给父标签设置背景色,但是因为其高度是0,故而导致背景色也无法显示.
解决方案：给父元素添加属性
overflow:hidden

清除浮动的五种方法

1.额外标签法

给谁清除浮动，就在其后额外添加一个空白标签，给其设置clear：both。

2.父元素添加overflow:hidden

通过触发BFC方式，实现清除浮动

3.使用after伪元素清除浮动

#parent:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
#parent{
    /* 触发 hasLayout */ 
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

4.使用before和after双伪元素清除浮动

#parent:after,#parent:before{
content: "";
display: table;
}
#parent:after{
    clear: both;
}
#parent{
    *zoom: 1;
}

5. 为父元素设置高度

三、BFC – Block Formatting Context：

FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的
块级元素的布局属于Block Formatting Context（BFC）
    也就是block level box都是在BFC中布局的；。
行内级元素的布局属于Inline Formatting Context（IFC）
    而inline level box都是在IFC中布局的；
MDN上有整理出在哪些具体的情况下会创建BFC
    根元素（html）
    浮动元素（元素的 float 不是 none）
    绝对定位元素（元素的 position 为 absolute 或 fixed）
    行内块元素（元素的 display 为 inline-block）
    表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值），表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
    匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、> thead、tfoot 的默认属性）或 inline-table）
    overflow 计算值(Computed)不为 visible 的块元素
    弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
    网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
    display 值为 flow-root 的元素

BFC有什么作用呢：

在BFC中，box会在垂直方向上一个挨着一个的排布；
垂直方向的间距由margin属性决定；
在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；

那么这个东西有什么用呢

解决margin的折叠问题；
解决浮动高度塌陷问题；

BFC的作用一：解决折叠问题

在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
让两个box是不同的BFC，那么就可以解决折叠问题；

BFC的作用二：解决浮动高度塌陷

BFC解决高度塌陷需要满足两个条件
    浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）
    浮动元素的父元素的高度是auto的

快捷符号$ -----自增

CSS之圣杯布局与双飞翼布局

https://juejin.cn/post/6973562604581027853

iframe框架

iframe:是HTML标签，作用是文档中的文档，页面中的页面,也可以称之为浮动的框架

标签语法:<iframe src="引入页面的路径" width="" height="" frameborder="1/0"
name="iframe名称" scrolling="yes/no/auto"> </iframe>
滚动条：scrolling="yes/no/auto" yes :有 no:无 auto：自动

四、定位

定位口诀–子绝父相

属性：position
属性值:
static:静态定位
relative:相对定位
absolute:绝对定位
fixed:固定定位
sticky:粘性定位
注:使用定位的时候,如果想要让元素进行位置的偏移,需要配合偏移属性
top
left
right
bottom

1.静态定位
含义:静态定位就是默认的普通文档流定位,元素是怎么排列就怎么排列,是怎么显示就怎么显示
position:static
2.相对定位
含义:相对定位,是相对于自己的位置进行微调,简单为位置进行偏移,参照物:自己原来的位置
position:relative
3.绝对定位
绝对定位:父子关系,子元素添加绝对定位
1)父元素没有定位,相对于已有定位的父级元素,如果外层都没定位的话则相对于浏览器左上角位置进行调整
2)父元素有定位,则相对于已有定位的父元素进行位置的调整
position:absolute
4.固定定位
固定定位:始终都相对于浏览器窗口屏幕的位置进行调整偏移,参照物是浏览器窗口;不会收到滚动条的滚动而影响
position:fixed
5.粘性定位
粘性定位:是相对定位和固定定位的结合体,主要是用来实现滚动吸顶的效果,当滚动到什么位置的时候固定在
屏幕的某一个位置;
position:sticky

定位层级设置（堆叠顺序z-index）

z-index：数值
数值越大，层级越高
层级关系
z-index负数<正常<float（和文档同级）<position<z-index正数

属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位
z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位的参照物

参照物:

静态定位:默认文档流,没有任何参照物
相对定位:相对于自己的位置进行微调,参照物是自己原来的位置
绝对定位:参照物分为两种情况
如果父元素有定位的话,参照物是父元素
如果父元素没有定位的话,参照物是浏览器
固定定位:参照物是浏览器左上角的位置
粘性定位:参照物是浏览器

包含块:

包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考；
默认状态下，浏览器是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；
如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。

定位的特殊情况

1）特殊情况1：绝对定位父元素，是否能使用其他定位
可以使用：相对，绝对，固定，粘性，但是使用了绝对绝固定之后，父元素会脱离文档流，参照物位置发生改
变；
所以大部分咱们在开发的时候使用的是相对定位，不会让父元素的位置发生改变
2）特殊情况2：绝对定位的兄弟关系
绝对定位的兄弟关系，使用的时候，前面的兄弟添加相对定位的时候，会产生后面的元素上去补位置的情况
这种情况叫做脱离文档流，不占页面空间
3）特殊情况3：父元素没有高度的时候，绝对和固定定位高度塌陷
当父元素没有高度的情况下，高度是自适应的，添加绝对和固定的定位会产生效果，父元素的高度降低，这种情况叫做高度塌陷；
解决问题：添加高度或者是使用js操作
4）特殊情况4：定位转换成块级元素
当给非块级元素添加定位(绝对定位,固定定位)的时候还能解决的问题是改变元素的显示类型
触发之后让display:inline 改变成了dispaly:block
5）特殊情况5：都添加定位的层级效果
如果给多个同级兄弟元素都添加定位的话,会产生一个效果,叫做层级效果,一张图覆盖一张图,默认是后面的覆盖前面的效果
我们可以通过z-index调整层级顺序,z-index的默认值是auto,后面的覆盖前面的;
如果你调整层级顺序的时候,z-index:auto可以当做0;
z-index取值可以为正数可以为负数,取值越大层级顺序越靠上面
6）特殊情况6：给自适应的盒子添加定位有哪些特殊情况
自适应:块级元素中没有添加宽度高度的情况下,这种情况就是元素的自适应;如果给一个没有设置宽度的元素
添加绝对定位,和固定定位的时候,元素的宽度仍然是自适应的,被元素里面的文本撑开了
7）特殊情况7：给margin:0 auto的元素添加绝对定位和固定定位
给版心,margin:0 auto的元素添加绝对定位和固定定位的时候,会让margi:0 auto失效,
原因是因为脱离文档流,不占页面空间了

定位的垂直居中

情况1:元素位于屏幕中间
方法
1、left : 50%:让盒子的左侧移动到父级元素的水平中心位置；
2、margin-left: -100px;让盒子向左移动自身宽度的一半。

/*取消元素自带的内边距和外边距*/
*{margin:0;padding:0}
div{
width:300px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-150px;
}
/*这里定位可以使用绝对定位,和固定定位,都可以实现,但是有区别:
区别主要在于,绝对定位主要是相对于body左上角的位置,
固定定位主要是想相对于屏幕窗口
会不会产生滚动条
*/

情况2:元素位于父元素的中间

<style>
*{margin:0;padding:0}
.red{
width:500px;
height:500px;
background-color:red;
margin:80px auto;
position:relative
}
.blue{
width:200px;
height:200px;
background-color:blue;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px
}
/*因为这次的参照物是父元素了,所以使用的是绝对定位*/
</style>
<div class="red">
<div class="blue">
</div>
</div>

定位于浮动的区别(掌握)

不同点
1.概念不同:
浮动:浮动是用来进行让元素横向显示的布局方法,主要用来让盒子横向显示
定位:定位也是一种布局里面的方法,主要应用场景就是调整元素的位置,
2.实现效果不同:
如果兄弟关系元素中,box1和box2纵向排列,给box2里面有文本,给box1添加浮动和定位,box2会上去补位置,但是实现效果不一致:
- 浮动:严格意义上面叫做半脱离文档流,文本会出现环绕效果
- 定位:严格意义上面叫做全脱离文档流,文本不会出现环绕效果,会被前面的元素遮盖住
相同点
1.如果补位元素中没有文本的话,实现的效果一样都会产生补位效果
2.都会产生高度塌陷
3.都能触发BFC,解决margin-top作用在父元素上面
4.都能让非块级元素转换成块元素能设置宽度高度
5.都能让margin:0 auto失效
6.都能让宽度自适应的盒子继续自适应,不占屏幕的宽度了

定位属性值应用

使用排除法进行定位属性值的选择:

静态定位:不使用;
粘性定位:主要用来制作滚动吸顶的效果其他的地方不怎么使用
相对定位:如果是进行简单的十几个像素的微调的话使用相对定位
绝对定位:父相子绝,轮播图中的左右方向键,焦点图
固定定位:相对于浏览器屏幕窗口进行位置的调整,广告栏楼梯层等等

滚动字幕(扩展)

滚动字幕:灯牌效果
使用标签:
标签属性:

behavior（行为）="scroll(滚动)/alternate（晃动）"
direction（方向）="up(从下向上)/down（从上向下）/left（从右向左）/right（从左向右）"
scrollamount（滚动速度）="value"
height="value(上下滚动范围)"
width="value(左右滚动范围)"
onmouseover="stop()"
onmouseout="start()

overflow 溢出

visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条

CSS用户界面样式

鼠标样式

cursor：
default 小白默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

outline : outline-color ||outline-style || outline-width

防止拖拽文本域resize

<textarea  style="resize: none;"></textarea

vertical-align 垂直对齐

有宽度的块级元素居中对齐，是margin: 0 auto;
让文字居中对齐，是 text-align: center;

vertical-align 垂直对齐，它只针对于「行内元素」或者「行内块元素」
设置或检索对象内容的垂直对其方式。
vertical-align : baseline |top |middle |bottom

三栏布局：两边固定，中间自适应（七种方式实现）

https://blog.youkuaiyun.com/weixin_38318244/article/details/123970897