web学习---CSS学习---笔记(二)

AsiaSun.

已于 2024-12-12 11:38:27 修改

阅读量546

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： html

于 2022-04-20 21:02:14 首次发布

本文链接：https://blog.youkuaiyun.com/IOSSHAN/article/details/124270037

Web 专栏收录该内容

14 篇文章

订阅专栏

1. CSS的三大特性

层叠性、继承性、优先级

1.1 层叠性

如果设置相同的样式，则有一个样式会层叠另外一个样式
样式冲突原则：就近原则（覆盖），哪个样式离结构近，就执行哪个样式

1.2 继承性

子标签会继承父标签的某些样式（不是全部样式）
某些样式包括：
text-、font-、line-开头的元素


	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<p>你好</p>
		</div>
	</body>

p标签的“你好”，也会是蓝色

1.3 优先级

当一个元素指定多个选择器，就会有优先级的产生

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

在这里插入图片描述 * 继承的权重为0

对于复合选择器，选择器越精准，权重越高

CSS 盒子模型

页面布局要学习三大核心：盒子模型、浮动和定位

所谓盒子模型，就是把HTML页面中的布局元素，看作是一个矩形盒子，也就是一个盛装内容的容器
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距(margin)、边框(border)、内边距(padding)和实际内容(content)
在这里插入图片描述

外框board

board的设置：

			div{
				width: 100px;
				height: 100px;
				background-color: yellow;
				border-width: 10px;
				border-color: red;
				/* border-style: solid;//实线 */
				/* border-style: dashed;//虚线 */
				border-style: dotted;//点线
			}

或者简写：
border: 10px gray solid;没有顺序

问：如何做到上边框红色，其余框蓝色？

border: 10px blue solid;
border-top: 10px red solid;

注意上下顺序不要写反

border-collapse: collapse;合并相邻的边框

如果div100x100，boarder10x10
那么，盒子的实际内容大小是100 - 10*2 = 80
变小了

内边距

padding属性用于设置内边距，既边框与内容之间的距离

padding-left: 20px;
padding-top: 20px;

简写：
在这里插入图片描述
padding也会影响盒子的实际大小
如果div100x100，padding10x10
那么，盒子的实际内容大小是100 + 10*2 = 120
变大了

导航栏小练习

在这里插入图片描述

		<style>
			.nav {
				border-top: 3px #ff8500 solid;
				border-bottom: 1px #edeef0 solid;
				height: 41px;
				background-color: @fcfcfc;
			}
			
			 .nav a{
				display: inline-block;
				color: #4c4c4c;
				text-decoration: none;
				padding-left: 20px;
				padding-right: 20px;
				text-align: center;
				line-height: 41px;
			}
			
			.nav a:hover{
				background-color: #eeeeee;
				color: #ff8500;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#">设为首页</a>
			<a href="#">手机新浪网</a>
			<a href="#">移动客户端</a>
			<a href="#">博客</a>
			<a href="#">微博</a>
			<a href="#">关注我</a>
		</div>
	</body>

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

外边距（margin）

margin属性用于设置外边距，即控制盒子和盒子之间的距离
写法：margin-left等

margin的简写与padding的简写方式一样

外边距的典型应用

外边距可以让块级盒子水平居中，但必须满足两个条件：

盒子必须指定了宽度
盒子左右的外边距都设置为auto

width: 200px;
height: 100px;
background-color: purple;
/* margin-left: auto; */
/* margin-right: auto; */
margin: 0 auto;

以上方法是让块级元素水平居中
行内元素或者行内块元素水平居中，可以给其父元素添加text-align:center即可

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
主要由两种情况：

相邻块元素垂直外边距的合并
嵌套块元素垂直外边距的塌陷

1. 相邻块元素垂直外边距的合并

如果上下两个相邻块元素相遇，如果上面那个有margin-bottom，下面那个有margin-top，实际效果是，取两个最大的，作为中间的间距

这样的话，只设置一个margin即可

在这里插入图片描述

2. 嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时，子元素也有上外边距，此时，父元素会塌陷较大的外边距值

父元素的外边距值按最大的外边距设置

在这里插入图片描述

如果，我们就是要实现父元素有上边距，子元素也有上边距的效果，该如果操作呢？

可以使用三种方法：

父元素不设置margin，而改为设置borderborder-top: 1px #800080 solid;
可以为父元素定义上内边距padding-top: 1px;
可以为父元素添加overflow: hidden

清除内外边距

不同的标签，有不同的默认边距
而不同的浏览器，默认边距有可能也不一样
因此，我们将进行清除内外边距，使得默认边距没有

* {
	margin: 0px;
	padding: 0px;
}

行内元素为了照顾兼容性，尽量只设置左右的内外边距，不要设置上下的内外边距(设置的也不起左右)
行内元素转换为块级元素或者行内块元素，就可以设置上下的内外边距了

盒子-练习

在这里插入图片描述

思路

大致分块：
在这里插入图片描述

参考代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				background-color: #f5f5f5;
			}
			
			a {
				color: #333333;
				text-decoration: none;
			}
			
			.box {
				width: 300px;
				height: 400px;
				background-color: white;
				border: 1px lightgray solid;
				/*上下100px 左右自动*/
				margin: 100px auto;
			}
			
			.box img {
				width: 100%;
			}
			
			.review {
				height: 70px;
				font-size: 14px;
				/* 因为没有设置width，因此padding不会超过盒子的宽度 */
				padding: 0px 28px;
				margin-top: 30px;
				margin-bottom: 20px;
			}
			
			.appraise {
				font-size: 12px;
				margin-top: 20px;
				padding: 0px 28px;
				color: #b0b0b0;
			}
			
			.info span {
				font-size: 14px;
				margin-top: 15px;
			}
			
			.info .first {
				padding-left: 28px;
			}
			
			.info .line {
				color: #b0b0b0;
			}
			
			.info .price {
				color: orange;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			
			<img src="img/企业微信20220420-165631@2x.png" alt="占位图" >
			
			<p class="review">快递🐂，整体不错，蓝牙可以说秒连。红米给力</p>
			
			<div class="appraise">来自 Asian 的评价</div>
			
			<div class="info">
				<span class="first"> <a href="">Redmi AirDots真无线蓝...</a></span>
				<span class="line">|</span>
				<span class="price">99.9元</span>
			</div>
		</div>
		
	</body>
</html>

小栗子

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			li {
				/* 去掉 前面的圆点 */
				list-style: none;
			}
			
			.box {
				border: 1px solid #D3D3D3;
				width: 248px;
				height: 163px;
				margin: 100px auto;
			}
			
			.box .title {
				border-bottom: 1px dotted #D3D3D3;
				height: 32px;
				font-size: 14px;
				font-weight: 400;
				padding-left: 15px;
				line-height: 32px;
			}
			
			.box ul {
				margin: 5px 10px;
			}
			
			.box ul li{
				height: 23px;
				line-height: 23px;
			}
			
			.box ul li a {
				font-size: 12px;
				text-decoration: none;
				color: #666666;
			}
			
			.box ul li a:hover {
				text-decoration: underline;
			}
			
			
		</style>
	</head>
	<body>
		<div class="box">
			<h3 class="title">优品购快报</h3>
			<ul>
				<li><a href="">【特惠】爆款耳机5折秒</a></li>
				<li><a href="">【特惠】母亲节，健康好礼低至5折</a></li>
				<li><a href="">【特惠】爆款耳机5折秒。。。</a></li>
				<li><a href="">【特惠】爆款耳机5折</a></li>
				<li><a href="">【特惠】爆款耳机</a></li>
			</ul>
		</div>
		
	</body>
</html>