css布局盒模型

最新推荐文章于 2023-04-19 18:20:13 发布

冰羽幻灵

最新推荐文章于 2023-04-19 18:20:13 发布

阅读量149

点赞数

分类专栏： WEB前端文章标签： css

本文链接：https://blog.csdn.net/zxl761303248/article/details/110728245

版权

WEB前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章目录

基本概念
display
position
float
flex布局
常见使用场景或面试题
- 水平垂直居中方式

基本概念

盒模型是css布局的基础，它规定了网页元素如何显示以及元素间相互关系，所有HTML元素都可以看作盒子，它包含边距，边框，填充，和实际内容。
标准盒模型：box-sizing设为content-box是标准盒模型，盒子大小=内边距+外边距+边框+内容。
怪异盒模型：box-sizing设为boeder-box是怪异盒模型，盒子大小=内容（包含内边距和边框）+外边距。

display

目前22个属性值：
none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline： 指定对象为内联元素。
block： 指定对象为块元素。
inline-block： 指定对象为内联块元素。（CSS2）
table： 指定对象作为块元素级的表格。类同于html标签table（CSS2）
table-cell： 指定对象作为表格单元格。类同于html标签td（CSS2）
table-row： 指定对象作为表格行。类同于html标签tr（CSS2）
flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3）
list-item：指定对象为列表项目。
inline-table：指定对象作为内联元素级的表格。类同于html标签table（CSS2）
table-caption：指定对象作为表格标题。类同于html标签caption（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签tbody（CSS2）
table-column：指定对象作为表格列。类同于html标签col（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签colgroup（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签thead（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签tfoot（CSS2）
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）

position

目前7个属性：
static： 对象遵循常规流。此时4个定位偏移属性不会被应用。
relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute： 对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
fixed： 与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
center：与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
page：与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）
sticky：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）

float

属性值：none/left/right，
脱离文档流，浮动
使用clear：both来清除浮动

flex布局

概念

弹性布局，flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。

容器属性

flex-direction（主轴方向）【row | row-reverse | column | column-reverse】
flex-wrap（换行）【nowrap | wrap | wrap-reverse】
flex-flow【】
justify-content（主轴对齐方式）【flex-start | flex-end | center | space-between | space-around】
align-items（交叉轴对齐方式）【flex-start | flex-end | center | baseline | stretch】
align-content（交叉多轴对齐方式）【flex-start | flex-end | center | space-between | space-around | stretch】

项目属性

order（项目排序）【integer】
flex-grow（放大比例）【number，默认0】
flex-shrink（缩小比例）【number，默认1】
flex-basis（项目占据大小）【 | auto】
flex【none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]】
align-self（私有对齐方式，覆盖align-items）

常见使用场景或面试题

水平垂直居中方式

1、绝对定位（已知子容器高宽）

<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		.parent{
			width: 500px;
			height: 500px;
			background-color: blue;
			position: relative;
		}
		.child{
			background-color: red;
			position: absolute;
			width: 200px;
			height: 200px;
			margin-left: -100px;
			margin-top: -100px;
			left: 50%;
			top: 50%;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child"></div>
	</div>
</body>
</html>

2、绝对定位（设置子容器高宽）

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: blue;
            position: relative;
        }

        .child {
            background-color: red;
            position: absolute;
            width: 200px;
            height: 200px;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

3、绝对定位（未知子容器高宽）

<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		.parent{
			width: 500px;
			height: 500px;
			background-color: blue;
			position: relative;
		}
		.child{
			background-color: red;
			position: absolute;
            padding: 50px;
			transform: translate(-50%, -50%);
			left: 50%;
			top: 50%;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child">test</div>
	</div>
</body>
</html>

4、flex弹性布局

<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		.parent{
			width: 500px;
			height: 500px;
			background-color: blue;
			display: flex;
            justify-content: center;
            align-items: center;
		}
		.child{
			background-color: red;
            padding: 50px;
			
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child">test</div>
	</div>
</body>
</html>

5、table-cell模拟表格布局

<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		.parent{
			width: 500px;
			height: 500px;
			background-color: blue;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
		}
		.child{
			background-color: red;
            padding: 20px;
            display: inline-block;
            margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child">test</div>
	</div>
</body>
</html>

冰羽幻灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css布局盒模型

文章目录基本概念displaypositionfloatflex布局概念容器属性项目属性常见使用场景或面试题水平垂直居中方式1、绝对定位（已知子容器高宽）2、绝对定位（设置子容器高宽）3、绝对定位（未知子容器高宽）4、flex弹性布局5、table-cell模拟表格布局基本概念盒模型是css布局的基础，它规定了网页元素如何显示以及元素间相互关系，所有HTML元素都可以看作盒子，它包含边距，边框，填充，和实际内容。标准盒模型：box-sizing设为content-box是标准盒模型，盒子大小=内边距
复制链接

扫一扫

专栏目录