CSS Day5

最新推荐文章于 2024-07-20 21:01:09 发布

JJ_Zhangjian

最新推荐文章于 2024-07-20 21:01:09 发布

阅读量172

点赞数 1

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

本文链接：https://blog.csdn.net/JJ_Zhangjian/article/details/90901396

版权

WEB前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文深入讲解CSS布局核心概念，包括盒子模型、文本与字体样式、显示方式、定位及溢出处理。探讨了不同元素的宽度、高度设定，内外边距与边框调整，以及文本对齐、修饰和颜色设置。解析了元素的显示类型如块级、行内和行内块，和定位方式如静态、相对、绝对与固定定位的运用。

摘要由CSDN通过智能技术生成

CSS Day5

课程回顾

1、盒子模型

外边距+边框+内边距+宽高

	- 宽高: width/height   像素和上级元素百分比
			行内元素不能修改宽高 由内容决定
	- 外边距:元素距上级元素或相邻兄弟元素的距离 
			margin-left/right/top/bottom
			margin:10px;
			margin:10px 20px;
			margin:0 auto;
			margin:10px 20px 30px 40px;
				行内元素上下外边距无效
				左右相邻相加 上下相邻取最大值
				粘连问题:当元素的上边缘和上级元素的上边缘重叠时, 给上级元素添加overflow:hidden解决
	- 边框: border-left/right/top/bottom      border:粗细 样式 颜色
			行内元素不影响所占高度
	- 内边距: 元素边框距内容的距离
			赋值方式和外边距类似   padding
			行内元素不影响所占高度

2、文本相关
- 水平对齐 text-align:left/right/center
- 文本修饰 text-decoration:overline/underline/line-through/none
- 阴影 text-shadow:颜色 x偏移值 y偏移值浓度(值越小越清晰)
- 文本颜色 color:red;
- 行高 line-height

3、字体相关

字体大小 font-size
加粗 font-weight:bold/normal
斜体 font-style:italic
字体设置 font-family:xxx,xxx;

4、CSS三大特性

继承:元素可以继承上级元素的部分样式(文本和字体相关),部分标签自带效果不受继承影响
层叠:多个选择器选择到同一个元素,如果样式不同则全部生效,如果相同由优先级决定
优先级: 作用范围越小优先级越高, id>class>标签名>继承

5、溢出设置overflow

hidden 隐藏
visible 显示默认
scroll 滚动显示

6、显示方式 display

block: 块级元素默认值独占一行可以修改宽高
inline: 行内元素默认值共占一行不能修改宽高
inline-block:行内块共占一行可以修改宽高

行内元素的垂直对齐方式 vertical-align

top 上对齐
bottom下对其
middle 中间对齐

baseline 基线对齐
实现1：
图与文本框垂直对齐方式

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>图与文本框垂直对齐方式</title>
  <style type="text/css">
  	img{
  	/* 垂直对齐方式
  			baseline 基线对齐	
  			top	上对齐
  			middle	中间对齐
  			bottom	下对齐 */
  		/*vertical-align: baseline;   /* 默认的：基线对齐 */
  		/*vertical-align: top;      /* 默认的：基线对齐 */
  		/*vertical-align: middle;   /* 默认的：基线对齐 */
  		vertical-align: bottom;   /* 默认的：基线对齐 */
  	}
  </style>
  </head>
  <body>
  <!--图与文本框垂直对齐方式测试-->
  	<img src="../imgs/2.gif"><input type="text">
  </body>
  </html>

实现2：
在这里插入图片描述

		<html>
		<head>
		<meta charset="UTF-8">
		<title>文字块</title>
		<style type="text/css">
		/*整体  */
			body>div{
			width:366px;
			height: 233px;
			background-color: #e8e8e8;
			}
			/* 头 */
			#top{
				height: 35px;
				background-color: #0aa1ed;
				border-radius:2px;
			}
			/*图片  */
			#top>img{
				margin: 5px 0 0 10px;
				vertical-align: bottom;
			}
			/* 字 */
			#top>span{
				font-size: 16px;
		    	color: #fff;
		    	margin-left: 5px;
			}
			/*全局p */
			p{
				margin-left: 10px;
			}
			/* 每个p */
			.p1{
				margin: 17px 0 2px 10px;
		    	color: #62B5EC;
		    	font-size: 12px;
			}
			.p2{
				margin-top: 0px;
			}
			.p2>a{
				color: #0aa1ed;
				font-size: 12px;
				text-decoration: none;
			}
		</style>
		</head>
		<body>
			<div>
				<div id="top">
					<img alt="" src="http://doc.tedu.cn/tstore_v1/images/itemCat/computer_icon1.png">
					<span>电脑,办公/1F</span>
				</div>
				<div>
					<p class="p1">电脑整机</p>
					<p class="p2">
						<a href="">笔记本</a>&nbsp;
						<a href="">游戏机</a>&nbsp;
						<a href="">台式机</a>&nbsp;
						<a href="">一体机</a>&nbsp;
						<a href="">服务器</a>&nbsp;
						<a href="">联想</a>
				</div>
				<div>
					<p class="p1">电脑整机</p>
					<p class="p2">
						<a href="">笔记本</a>&nbsp;
						<a href="">游戏机</a>&nbsp;
						<a href="">台式机</a>&nbsp;
						<a href="">一体机</a>&nbsp;
						<a href="">服务器</a>&nbsp;
						<a href="">联想</a>
				</div>
				<div>
					<p class="p1">电脑整机</p>
					<p class="p2">
						<a href="">笔记本</a>&nbsp;
						<a href="">游戏机</a>&nbsp;
						<a href="">台式机</a>&nbsp;
						<a href="">一体机</a>&nbsp;
						<a href="">服务器</a>&nbsp;
						<a href="">联想</a>
				</div>
			</div>
		</body>
		</html>

定位方式 4+1

position定位

1、静态定位static(默认)

	也称为文档流定位,块级元素从上到下,行内元素从左向右

2、相对定位relative

	元素不脱离文档流,通过top/bottom/left/right让元素从初始位置做偏移
	- 当需要移动某个元素,但不希望其它元素受影响时使用

实现1：

	  <!DOCTYPE html>
		<html>
		<head>
		<meta charset="UTF-8">
		<title>相对定位relative</title>
		<style type="text/css">
			/*给块画个边*/
			div{
				width:100px;
				height: 100px;
				border: 1px solid orange;
			}
			/* 伪类选择器    */
			div:hover{
			/*使用静态定位  其他标签会被影响  */
				/* margin: 20px 0 0 20px; */
				/* 使用相对定位 元素不脱离文档流，其他元素不动 */
				position: relative;
				top:20px;
				left: 20px;
			}
		</style>
		</head>
		<body>
			<div id="d1">div1</div>
			<div>div2</div>
			<div>div3</div>
		</body>
		</html>

3、绝对定位absolute

	元素脱离文档流,通过top/bottom/left/right让元素相对于窗口做位置偏移
	(默认的)或相对于某个上级元素做位置偏移(在上级元素中添加相对定位position：relative）
	注：

4、固定定位fixed

浮动定位

JJ_Zhangjian

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录