html+css+bootstrap网页布局学习Day1

最新推荐文章于 2024-04-11 11:35:15 发布

weixin_39048009

最新推荐文章于 2024-04-11 11:35:15 发布

阅读量153

点赞数

分类专栏：网页布局文章标签： html

本文链接：https://blog.csdn.net/weixin_39048009/article/details/110391216

版权

float：
不设置float之前
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
    
				width: 600px;
				height: 600px;
				background-color: deeppink;
			}
			#box>div:first-child{
    
				width: 200px;
				height: 200px;
				background-color: green;
			}
			#box>div:nth-child(2){
    
				width:200px;
				height: 200px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div></div>
			<div></div>
		</div>
	</body>
</html>

设置第一个div为float：left元素后：
在这里插入图片描述
float在最上面，不占据页面的物理位置，蓝色（第二个div）替代原第一个div的位置。

浮动定位。
将元素排除在普通流之外
元素在页面中将不占据空间
将浮动元素放置在包含框的左边或者右边
浮动元素一九位于包含框之内
浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或者另一个浮动框的边框为止
浮动元素的外边缘不会超过器父元素的内边缘
浮动元素不会互相重叠
浮动元素不会上下浮动
任何元素一旦浮动，display属性将完全失效，均可以设置宽高，将不会独占一行。
语法：float：none/left/right

清除浮动：清除浮动是在使用了浮动之后必不可少的，为了网站的布局效果，清除浮动也变得非常麻烦
语法：clear：right/left/both
清除浮动的常用方式：

1.在结尾处加空div标签 clear：both或者在下一元素上加clear：both
2.浮动元素的父级div定义overflow：hidden
3.浮动元素父级定义宽高
【注意】
如果一个父级元素里子元素都为float的话，那么，如果父级元素不定义宽高或者，overflow：hidden的话，父级元素就是没有东西的。

position定位：
position属性是指定一个元素（静态的，相对的，绝对固定方法的类型）
语法：position：static/absolute/relative/fixed
absolute：生成绝对定位，相对于static定位以外的第一个父级元素惊醒定位
fixed：生成绝对定位，相对于浏览器窗口进行定位
relative：生成绝对定位，相对于其正常位置进行定位
static：默认

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>relative相对定位

最低0.47元/天解锁文章

weixin_39048009

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html+css+bootstrap网页布局学习Day1

float：不设置float之前<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #box{ width: 600px; height: 600px; background-color: deeppink; } #box>div:first-child{
复制链接

扫一扫