HTML + CSS_display:block宽度计算-CSDN博客

本文链接：https://blog.csdn.net/s2816330/article/details/131385071

如何理解 HTML 语义化？

让人更容易读懂代码（增加代码的可读性）
让搜索引擎更容易读懂代码（SEO）
所谓HTML语义化就是指按功能使用标签，区分P标签、ul标签等功能

块状元素 & 内联元素

display: block/table —— div、h1、h2、ul、ol、p 等
display: inline/inline-block —— span、img、button、input等

盒模型宽度计算

//如下代码，请问 div 的 offsetWidth 的值是多少？ 答案是：122px
#div1{
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
}

//如何让 offsetWidth 的值等于 100px？（最快捷的方法）
#div1{
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
    box-sizing: border-box; 
}

offsetWidth = width + padding + border ; (高度以此类推)
clientWidch = widch + padding ; (高度以此类推)

margin 纵向重叠的问题

<!--如下代码，AAA 和 BBB 之间的距离是多少？ 答案是 15px-->
<style>
    p{
      margin-top: 10px;
      margin-bottom: 15px;   
    }
</style>

<p> AAA </p>
<p></p>
<p></p>
<p> BBB </p>

相邻元素的 margin-top 和 margin-bottom 会重叠
空白的 p 标签也重叠（相当于忽略空白标签）

margin 负值的问题

margin-top 和 margin-left 负值，元素向上、向左移动（影响该元素下面的元素、右面的元素）；
margin-right 负值，右侧元素左移，自身不受影响；
margin-bottom 负值，下方元素上移，自身不受影响；

BFC 的理解和应用

什么是 BFC？

“块级格式化上下文” 的英文；
是一块独立渲染的区域，内部元素的渲染不会影响边界以外的元素

形成 BFC 的常见条件

float 不是 none；
position 是 absolute 或 fixed；
overflow 不是 visible；
display 是 flex inline-block 等；

BFC 常见应用

清除浮动

float 布局

圣杯布局和双飞翼布局的目的

三栏布局，中间一栏最先加载和渲染（内容最重要）
为什么说是中间内容先加载：写布局的时候先写中间的 div 然后再写两边的 div ，因为浏览器加载代码是按照先后顺序加载，所以实现了中间内容先加载
两侧内容固定，中间内容随着宽度自适应
一般用于PC端网页

圣杯布局和双飞翼布局的技术总结

使用 float 布局
两侧使用 margin 负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用 padding 一个用 margin

圣杯布局代码

	<style>
		.heater{
			width: 100%;
			height: 20px;
			background-color: aqua;
		}
		.center{
			list-style: none;
			overflow: hidden;
			padding: 0 150px 0 200px;
		}
		.center .centers{
			width: 100%;
			background-color: bisque;
		}
		.center .left{
			width: 200px;
			background-color: red;
			margin-left: -100%;
			left:-200px;
			position: relative;
		}
		.center .right{
			width: 150px;
			background-color: yellow;
			margin-right: -150px;
		}
		.footer{
			width: 100%;
			height: 20px;
			background-color: aquamarine;
		}
		.column{
			float: left;
		}
	</style>
	<body>
		<div class="header">this is header</div>
		<ul class="center">
			<li class="column centers"> center </li>
			<li class="column left"> left </li>
			<li class="column right"> right </li>
		</ul>
		<div class="footer">this is footer</div>
	</body>

双飞翼布局

	<style>
		.center{
			width: 100%;
			list-style: none;
			/* overflow: hidden; */
			
		}
		.center .centers{
			background-color: bisque;
			margin: 0 150px 0 200px;
		}
		.left{
			width: 200px;
			background-color: red;
			margin-left: -100%; 
		}
		 .right{
			width: 150px;
			background-color: yellow;
			margin-left: -150px;
		}
		.column{
			float: left;
		}
	</style>
	<body>
		<ul class="center column">
			<li class=" centers"> center </li>
		</ul>
		<div class="column left"> left </div>
		<div class="column right"> right </div>
	</body>

手写 clearfix （清除浮动）

.clearfix:after{
    content: '';
    dispaly: table;
    clear: both;
}

flex 布局

常用语法回顾

flex - direction ：设置主轴方向
justify-content ：主轴对齐方式
align-items ：交叉轴对齐方式
flex-wrap ：是否换行
align-self ：子元素在交叉轴的对其方式

画个三个点的色子

效果图：

absolute 和 relative 定位

relative 是依据自身定位，不影响其他元素
absolute 是依据最近一级有定位的元素定位，定位元素包括：relative、absolute、fixed、body

居中对齐的实现方式

水平居中

文本标签元素： text-align：center
block 元素：margin：auto
absolute元素：left：50% + margin-left 负值

垂直居中

文本标签元素：line-height 的值等于 height
absoulute 元素：top：50% + margin-top 负值
absoulute 元素：transform(-50%，-50%)
absoulute 元素：top, bottom, left, right = 0 + margin:auto

line-height 如何继承的问题

答案： 40px（继承行高时，先计算、后继承，即：20px * 200% = 40px）

css - 响应式

rem 是什么？

px，绝对长度单位，最常用
em，相对长度单位，相对于父元素，不常用
rem，相对长度单位，相对于根元素（HTML），常用于响应式布局