前端学习笔记 CSS布局

最新推荐文章于 2023-07-27 21:17:40 发布

云乐QAQ

最新推荐文章于 2023-07-27 21:17:40 发布

阅读量185

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41658124/article/details/104024024

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、绝对定位

属性：position
值： absolute
会将该元素从原文档删除，重新给它指定一个位置。（原来的位置就被其他东西占了）
通过指定left,top绝对定位一个元素，绝对定位是基于最近的一个定位了的父容器。

绝对定位可能会造成谁把谁掩盖了的问题，这时候可以使用z-index属性，当z-index的值越大，就表示放上面，z-index:越小就表示放下面。

2、相对定位

相对定位
属性：position
值：relative

与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离。（这样它原来所处的位置还留着空。）

3、浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
属性：float
值： left,right

向右浮动后，原来的“坑”就让出来了，别的会填上来。
并且是在原来的高度的基础上，向右浮动

向左浮动后，也是原来的坑让出来了，那么下面的文字内容就想来占这个坑，但是突然发现我是向左浮动的，我并没有让出这个坑，于是下面的内容就只有排在我的右边了。

利用上面的这一点可以让文字在右边围绕着图片。

若不想要围绕着浮动的元素，可以把上来占位的元素设置clear:left属性

还有！ div标签默认是换行的
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
如果超出了父容器，还会有自动换行的效果

div#floatingDiv div{
   float:left;
}

4、显示方式

display:none	隐藏	隐藏起来，不占原来的位置
display:block	块级	自动换行，而且width和height能生效
display:inline	内联	没有换行，而且width和height不会生效
display:inline-block	内联-块级	需要同一行，并且还能指定大小

5、水平居中

内容居中有两种法：

①：设置align=“center”属性

②：设置样式text-align：center

元素居中：

比如div标签一样的块元素，默认100%的宽度，就无法居中，但是若是设置了宽度，再使用样式margin：0 auto就可以居中

但如果是内联元素，无法设置宽度，就不能通过margin：0 auto来居中。

6、左侧固定

<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
    overflow:hidden;
    background-color:lightskyblue;
  }
</style>
 
<div class="left">左边固定宽度</div>
 
<div class="right">右边自动填满</div>

左右固定，填充中间，也是同样的方法，利用overflow去掉中间元素的溢出实现自适应。

6、垂直居中

就是在一个元素内将内部内容垂直居中，可以用样式line-height设置个值来垂直居中。

也可以通过设置上下相同的内边距来实现垂直居中效果。padding : 30 0

7、贴在下方

需要把一个内层元素设置成绝对定位，然后设置bottom：0就行了，无论怎样都贴在下面。

练习：

实现如图：



<style type="text/css">
	body{
	    font-family:"宋体";
	    font-size:13px;
	    color:#666666;
	    width:643px;
	    }
	#shang{
		padding: 5 0;
		position: relative;
		height: 30px;
	}
	#zuoshang{
		float: left;

	}
	#sz{
		float: right;
	}
	#youshang{
		float: right;

	}
	.underline{
		position: absolute;
		bottom: 0;
		 width: 100%;
		border-bottom-color: AAAAAA;
		border-bottom-style: solid;
		border-bottom-width: 2px;
	}
	#xia{
		top: 20px;
		height: 230px;
		position: relative;
	}
	#zuo{
		float: left;
		width: 50px;
		height: 200px;
	}

	.chaolian{
		text-decoration: none;
	}
	#cha{
		float: right;
	}
	#renshu{
		position: absolute;
		top: 42px;
		left: 7px;
		color: AAAAAA;
	}
	#two{
		font:normal bold 微软雅黑;
		color: rgb(0,0,245);
		margin-bottom: 10px;
	}
	#three{
		margin-bottom: 10px;
	}
	#qixie{
		float: left;
	}
	#text{
		font-size: 120%;
	}
</style>
<body>
	<div id="shang">
	<img id="zuoshang" src="C:/Users/msi-/Desktop/work/img/1.png">
	<span>最新动态</span>
	<span id="sz">设置</span>
	<img id="youshang" src="C:/Users/msi-/Desktop/work/img/2.png">
	<div class="underline"></div>
</div>

<div id="xia">
	<div id="zuo">
		<img src="C:/Users/msi-/Desktop/work/img/4.png">
		<br>
		<img src="C:/Users/msi-/Desktop/work/img/5.png">
		<span id="renshu">6657</span>

	</div>
	<div id="you">
		<div id="one">
			热门回答，来自 机械 
			<a class="chaolian" href="#">关注话题</a>
			<img id="cha" src="C:/Users/msi-/Desktop/work/img/3.png">
		</div>
		<div id="two">
			人类史上令人叹为观止的极限精度制造成果有哪些？
		</div>
		<div id="three">
			<b>Vincent Fu</b>, Materials Science,PhD
		</div>
		<img id="qixie" src="C:/Users/msi-/Desktop/work/img/6.png">
		<p id="text">
			说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...<a class="chaolian"href="#">显示全部</a>
		<div id="four">
			<img class="lasttu" src="C:/Users/msi-/Desktop/work/img/7.png">
			<span>关注问题</span>
			<img class="lasttu" src="C:/Users/msi-/Desktop/work/img/8.png">
			<span>867条评论</span>
			<img class="lasttu" src="C:/Users/msi-/Desktop/work/img/9.png">
			<span>作者保留权利</span>
		</div>
	</div>
	<div class="underline"></div>
</div>


</body>

云乐QAQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记 CSS布局

1、绝对定位属性：position值： absolute会将该元素从原文档删除，重新给它指定一个位置。（原来的位置就被其他东西占了）通过指定left,top绝对定位一个元素，绝对定位是基于最近的一个定位了的父容器。绝对定位可能会造成谁把谁掩盖了的问题，这时候可以使用z-index属性，当z-index的值越大，就表示放上面，z-index:越小就表示放下面。2、相对定位相对定...
复制链接

扫一扫