css第二部分

最新推荐文章于 2022-11-07 16:18:04 发布

Ha det

最新推荐文章于 2022-11-07 16:18:04 发布

阅读量247

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45886859/article/details/116070176

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

1.css的三大特性：
2.盒子模型：
3.浮动：
4.定位：

1.css的三大特性：

层叠性：
相同选择器给设置相同的样式，此时一个样式会覆盖另一个冲突样式。
原则：就近原则，哪个样式离结构近，就执行哪个样式，并且样式不冲突的地方不会被层叠。
继承性：
子标签会继承父标签的某些样式，如文本颜色和字号。不是父标签的什么样式子标签都会继承，只会继承text- ,font- ,line- 这些元素开头的可以继承一级color属性。
子标签还会继承父标签的行高，行高可以写在字体的 / 后面，可以不加单位也可以加单位，不加单位的行高等于当前字体大小的相应倍数（如下面例子的行高为12*1.5）

     font: 12px/1.5 ;

优先级：
可以在样式后加 !impotent手动设置表示此优先级最高。
注：复合选择器中优先级会有权重叠加。

复合选择器有权重叠加的问题，但不会进位。

2.盒子模型：

组成：border（边框）content（内容）padding（内边距） margin（外边距）

2.1 边框：

border-width ：设置边框粗细。
border-style:：设置边框样式。
border-color:：设置边框颜色。

    div{
			width: 300px;
			height: 300px;
			border-width: 3px;
			/*点线*/
			/*border-style: dotted;*/
			/*实线*/
			/*border-style: solid;*/
			/*虚线*/
			/*border-style: dashed;*/
			border-color: blue;
		}

复合性写法：
没有顺序的要求。
并且可以设置边框的四条边的属性。通过border-top，border-buttom，border-left，border-right分别设置。

border: 1px solid purple;
border-top: 1px solid blue;

合并边框：
两个边框并在一起时重合部分会变粗，用这个属性来合并相邻的边框。

border-collapse: collapse;

注：边框会额外添加盒子的实际大小。

2.1.1 圆角边框

数字代表圆的半径，半径越大，弧度越大。

border-radius: 20px;

在这里插入图片描述
特别的：
可以设置圆形，当原图形为正方形时，可以通过设置border-radius为50%或者是长或宽数值的一半，最后就变成圆形了。
原图形是矩形边框，则可以通过设置border-radius为高的一半设置矩形圆边框。
这个属性后面也可以写4个值表示4个角的圆弧程度。

2.2 内容和内边距：

内边距是内容离边框之间的距离。

padding-top: 4px;
padding-left: 4px;
padding-right: 5px;
padding-bottom: 5px;

由下图可知，内容和边框之间隔着内边距，所以当我们调整内边距时调整的是内容与边框之间的空隙，所以盒子看上去会变大。
在这里插入图片描述
复合写法：
padding: 4px; 一个值，代表上下左右都有4px的内边距。
padding: 4px 10px; 两个值，代表上下有4px的内边距，左右是10px的内边距。
padding: 4px 10px 10px; 三个值，代表上有4px的内边距，左右的内边距为10px，下内边距为10px。
padding: 4px 10px 10px 4px; 代表上为4，右为10，下为10，左为4，顺时针方向。

练习一：新浪导航栏
做出效果如图：
1.要设置a标签的高度，才可以选中时看上去是一块，a标签是行内元素，所以要把标签进行转换。
2.不能统一设置a标签的宽度，因为字数不同结果展示时两边的间距不一样，字数少的间距大，字数多的间距小，所以应用内边距来设置这样每个字段边距就相同了。
在这里插入图片描述
代码：

<style>
		a{
			height: 41px;
			text-decoration: none;
			color: black;
			padding-right: 14px;
			padding-left: 14px;
			display: inline-block;
		}
		div{
			height: 41px;
			background-color: #fcfcfc;
			border-top: 3px solid #ff8500;
			border-bottom: 1px solid #edeef0;
			line-height: 41PX;
		}
		a:hover{
			background: rgba(0,0,0,0.1);
			color: orange;
		}
	</style>
</head>
<body>
	<div>
			<a href="*">设为首页</a>
			<a href="*">手机新浪网</a>
			<a href="*">移动客户端</a>
			<a href="*">博客</a>
			<a href="*">微博</a>
			<a href="*">关注我</a>
	</div>
</body>

特殊情况：
当盒子本身没有设置指定的weight或者height时，内边距不会将盒子撑大，或者是子标签继承了父标签的宽度或者高度，此时设置内边距也不会改变盒子大小。

2.3 外边距：

margin：同padding 。

外边距可以让块级盒子水平居中，但是必须满足两个条件。
1.盒子必须指定了宽度（width）
2.盒子的左右外边距都设置为auto。

常见写法： margin：0 auto；

注：以上方法都是让块级元素水平居中，行内元素或者行内块元素水平居中只要给父元素添加text-align：center就可以了。

外边距的塌陷问题：
对于两个嵌套关系（父子关系）的块元素，父元素有上边距的同时子元素也有上边距，此时父元素会塌陷较大的外边距值（理想效果是）
解决方法：
1）可以为父元素定义上边框。
2）可以为父元素定义内边距。
3）可以为父元素添加 overflow：hidden。（上面两个都会改变元素的原有的宽高，但最后一个不会）
清除内外边距：
每个浏览器都有自己的默认外边距（谷歌的为8），所以我们在写代码前首先需要清理一下内外边距。

*{
		margin: 0;
		padding: 0;
	}

注：行内元素尽量只设置左右外边距（原因：这么讲吧，行级元素本身并不作为容器元素展示，所以块级元素的盒子模型并不适用于行级元素，但是行级元素内的元素可以通过自身的margin控制自身的左右边距。）

练习：
在这里插入图片描述
代码：

<head>
	<title>盒子模型练习</title>
	<style>
		body{
			background-color: #f5f5f5;
			font-size: 14px;
		}
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			margin: 0 auto;
			width: 298px;
			height: 415px;
			background-color: #fff;
			margin-top: 30px;
		}
		.box img{
			width: 100%;
		}
		.box p{
			/*因为这个标签没有设置weight的值所以不会塌陷。*/
			/*为盒子设置一个高这样设置与下面盒子的距离是固定的。*/
			margin-top: 20px;
			height: 70px;
			padding: 0 28px;
		}
		.appraise{
			margin-top: 20px;
			color: #b0b0b0;
			font-size: 12px;
			padding: 0 28px;
		}

		.info{
			padding: 0 28px;
			margin-top: 20px;
			
		}
		.name{
			font-weight: normal;
			
		}
		a{
			text-decoration: none;
			color: black;
		}
		em{
			font-style: normal;
			color: #b0b0b0;
			margin-left: 20px;
			margin-right: 15px;
		}
		.price{
			color: #ff6700;
		}

	</style>
</head>
<body>

<div class="box">
	<img src="../img/box.png" alt="">
	<p class="review">快递牛，整体不错，蓝牙可以秒连红米给力！</p>
	<div class="appraise">来自于 112384232 的评价</div>
	<div class="info">
		<h4 class="name"><a href="*">Redmi AirDots真无线...</a></span>
		<em>|</em>
		<span class="price">99.9元</span>
	</div>
</div>

</body>

注意点：
1.布局要根据语义用不同的盒子，如标题用h，字多的用p，少的用span。

2.4 盒子阴影：

前两个属性为必选值，最后一个属性默认值为outset，但是不能写outset不然会报错阴影显示不出来。
在这里插入图片描述
设置当鼠标放在盒子上面时会出现阴影。

div{
	width: 700px;
	height: 200px;
	background-color: yellow;
	border-radius: 100px;
	}
div:hover{
	box-shadow: 8px 3px 12px 0px rgba(0,0,0,.3);
	}

3.浮动：

标准流：就是标签按照规定好的默认方式排列。比如：块级元素和行内元素。
标准流布局是最基本的布局方式。
浮动可以改变元素标签默认的排列方式，它可以让多个块级元素一排显示。
准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动。
float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

加了浮动后的元素，会有很多特性：
1.浮动元素会脱离标准流（脱标）。
2.浮动的元素会一行内显示并且元素顶部对齐。
3.浮动的元素会具有行内块元素的特性（任何元素都是）。

浮动的盒子只会影响盒子之后的标准流而不会影响前面的标准流。

3.1 脱浮：

定义：脱离标准普通流的控制，移动到指定位置并且悬浮的盒子不再保留原先的位置。
如下图所示：原本两个盒子应该竖直方向排列显示，但粉色盒子设置了浮动了之后，其原来的位置就不再被保留，黄色盒子就占据了其原来的位置。这就是脱浮。

float: left;

在这里插入图片描述

3.2 行内块元素：

浮动元素具有行内块元素的特性。
任何元素都可以浮动，不管是什么模式的元素，添加浮动了之后都具有行内块元素相似的特性。

如果盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动了之后，它的宽度由内容来决定（因为变成了行内块元素）。
浮动的盒子中间是没有缝隙的，是紧挨着一起的。
行内元素同理

p{
			/*width: 100px;*/
			height: 200px;
			background-color: purple;
			float: left;
		}

由下图可见，我们没有给p标签设置宽度，所以这个p标签的宽度是内容的长度。
在这里插入图片描述
浮动练习：
效果：

代码：

<html>
<head>
	<title>浮动练习2-手机页面</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		body{
			background-color: #f5f5f5;
		}
		.father{
			width: 1195px;
			height: 552px;
			/*background-color: white;*/
			margin: 10px auto;
		}
		.left{
			float: left;
			width: 211px;
			height: 552px;
		}
		.right{
			width: 974px;
			height: 552px;
			float: left;
			margin-left: 10px;
		}
		.phones li{
			float: left;
			width: 236px;
			height: 271px;
			background-color: white;
			margin-right: 10px;
			margin-bottom: 10px;
			text-align: center;
		}
		/*注意权重问题*/
		.phones .last{
			margin-right: 0;
		}
		.img{
			width: 160px;
			height: 160px;
			/*为什么没生效*/
			/*margin: 0 auto;*/
			/*margin-left: 35px;*/
			/*这里用这个就行了*/
			/*text-align: center;*/
		}
		h3{
			font-weight: normal;
			font-size: 16px;
			margin-top: 5px;
		}

		.content{
			color: #b0b0b0;
			font-size: 14px;
		}
		.price{
			color: orange;
			margin-top: 20px;
		}
		li:hover{
			box-shadow: 10px 3px 12px 0px rgba(0,0,0,.1);
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="left">
			<ul >
				<li>
					<!-- 为什么没有框住这个图片 -->
					<img src="../img/xiaomi5.png" alt="" style="height: 100%;width: 100%;">

				</li>
			</ul>
		</div>
		<div class="right">
			<ul class="phones">
				<li>
					<img class="img" src="../img/xiaomi.png" alt="">
					<h3>小米MIX FOLD</h3>
			        <p class="content">折叠大屏｜自研芯片</p>
			        <p class="price">9999元起</p>
				</li>
				<li></li>
				<li></li>
				<li class="last"></li>
				<li></li>
				<li></li>
				<li></li>
				<li class="last"></li>
			</ul>
		</div>
	</div>
</body>
</html>

注：
1.当时img这种元素时，不管我们怎么设置父元素的宽度和高度，而不设置img的宽和高时，img总是表现为其原始的宽和高。它并没有继承父元素的100%，而是根据既定的高度来等比例缩小宽度。同样，如果只设置width，那么height也会等比例改变。如果我们把img的width和height 都设置为100%，就可以发现其宽度这时就和父元素的宽度一致了。
2.权重问题。我们用复合选择器时会出现权重问题，如代码所示不能直接写.last因为其权重比上面的 .phones li权重低，会显示不出来，所以要写成 .phones .last才可以显示。

3.3 清除浮动：

很多时候我们无法设置父元素的高因为它的高可能是在一直变化的。
但如果其子元素都是浮动的，则父元素的高度会变成零，因为子元素是“飘着的”。这时如果下面是标准流，位置就会错乱。
如图父元素的高度为0.
在这里插入图片描述
这时就需要清除浮动。有四种清除浮动的方法：

额外标签法：
隔墙法，就是在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动的样式。
本质是：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
使用方法：
在最后一个浮动的盒子后面添加一个块级元素标签（注：一定要是块级元素）

.clear{
			clear:both;
		}
<div class="clear"></div>

给父元素添加overflow属性：
设置 overflow: hidden;
给父类添加一个 : after（伪元素）。
就相当于在父盒子内添加一个小盒子，浮动元素是依靠这个伪小盒子浮动的（相当于隔开了父盒子和小盒子）。

       .clearfix:after{
    		content:"";				/*设置内容为空*/
    		height:0;				/*高度为0*/
   		    line-height:0;			/*行高为0*/
   		    display:block;			/*将文本转为块级元素*/
   		    visibility:hidden;		/*将元素隐藏*/
    		clear:both;				/*清除浮动*/
		}
		.clearfix{
     		zoom:1;					/*为了兼容IE*/
		}

<div class="father clearfix">

双伪元素浮动清除：
相当于在盒子的前面和后面都添加一个盒子，两边都堵住。

.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ie6 7 专门清除浮动的样式*/
.clearfix {
*zoom:1;
}

4.定位：

定位：将盒子定在某一个位置，定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式+边偏移
定位模式用于指定一个元素在文档的定位方式，边偏移决定了元素的最终位置。

4.1 定位模式：

定位模式决定了元素的定位方式，它通过css的position属性来设置。
static：静态定位：无定位，按照标准流的属性摆放位置，没有边偏移（很少使用）。
relative：相对定位：以自己原来的位置为基准添加边偏移属性移动，并且虽然它移动了，但是它原来的位置是继续保留的，别的元素不会占这块位置。

position: relative;
top: 20px;

如图：上面的盒子是可以覆盖在下面的盒子上的，而且即使上面的盒子偏移了下面盒子也没有占领它的位置。
在这里插入图片描述
absolute：绝对定位：元素移动位置时，是以祖先元素的位置为标准的。

如果没有祖先元素，就以浏览器为准进行定位。
如果有祖先元素，但是没有定位或是普通的标准流，则还是以浏览器为准进行定位。
当祖先元素有定位时（相对，绝对，固定），则以最近一级有定位的祖先元素为参考点进行移动。

fixed：固定定位：
元素固定在浏览器的可视区位置，可以在浏览器页面滚动时元素的位置不会改变。
特点：
1.以浏览器的可视窗口为参照点移动元素。
2.跟父元素没有任何关系，不能随滚动条滚动。
3.固定定位不占有原先的位置。

练习一：根据整个浏览器页面的固定页面：

   .firsto{
			position: fixed;
			top: 100px;
			right: 40px;
		}

练习二：根据版芯页面的固定定位：
算法：先让图片位于页面中央，再根据版芯宽度的二分之一调整左边距。

       .first{
			width: 800px;
			height: 1600px;
			margin: 0 auto;
			background-color: pink;
		}
		.img{
			position: fixed;
			left: 50%;
			margin-left: 405px;
			margin-top: 20px;
		}

<div class="first">
		<img src="../img/2.png" class="img" alt="">
</div>

在这里插入图片描述
叠放顺序：
使用z-index属性控制盒子的前后顺序：
注：1.数值可以是正整数，负数或0，数值越大，盒子越靠上面。
2.属性值相同，则按照书写顺序，后来居上。
3.数字后面不能加单位，并且只有定位的盒子才有z-index属性。

4.2 边偏移：

边偏移是定位的盒子移动的最终位置，有top，buttom，left 和 right四个属性。

4.3 元素显示与隐藏：

1.display属性：
display属性用于设置一个元素如何显示，
display: block：除了可以转换为块级元素之外，还有显示元素的意思。
display: none：隐藏对象。
display隐藏了原来的对象之后，不占有原来的位置。

2.visibility属性:
visibility: visible：显示元素。
visibility: hidden：隐藏元素。
区别：visibility保留了原来元素的位置。

3.overflow溢出属性：
overflow属性指定了如果内容溢出一个元素的框（超过其指定宽高）时的情况。
overflow: visible：不剪切内容也不添加滚动条。
overflow: hidden：隐藏超出盒子的内容。
overflow: scroll：为超出的部分添加滚动条，不超出也会显示滚动条按钮。
overflow: auto：超出部分自动显示滚动条，不超出不显示滚动条。

案例：土豆网
效果：当鼠标经过盒子时显示遮盖层，使用了绝对定位和元素隐藏。

<style>
		.box{
			position: relative;
			margin: 30px auto;
			width: 444px;
			height: 320px;
		}
		.box img{
			width: 100%;
			height: 100%;
		}
		.mark{
			display: none;
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			background:rgba(0,0,0,.3) url("../img/下载.png") no-repeat center;
		}
		.box:hover .mark{
			display: block;
		}	
</style>
	
<body>
	<div class="box">
		<img src="../img/土豆.jpg">
		<div class="mark"></div>
	</div>	
</body>

Ha det

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css第二部分

文章目录1.css的三大特性：1.css的三大特性：层叠性：相同选择器给设置相同的样式，此时一个样式会覆盖另一个冲突样式。原则：就近原则，哪个样式离结构近，就执行哪个样式，并且样式不冲突的地方不会被层叠。继承性：子标签会继承父标签的某些样式，如文本颜色和字号。不是父标签的什么样式子标签都会继承，只会继承text- ,font- ,line- 这些元素开头的可以继承一级color属性。子标签还会继承父标签的行高，行高可以写在字体的 / 后面，可以不加单位也可以加单位，不加单位的行高等于当前字体
复制链接

扫一扫

专栏目录