css

最新推荐文章于 2024-11-12 22:56:44 发布

qq_43552118zx

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量108

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_43552118/article/details/83757731

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1，选择器

（1）组合选择器/组选择器

格式:选择器名称1,选择器名称2.......

组合选择器:

<div class="div2">div2</div>

<div class="div3">div3</div>

<p class="p1">p元素</p>

<h1>标题1</h1>

<h2>标题2</h2>

<div></div>

伪类、伪元素选择器

a{
				text-decoration: none;
				font-family: 阿美简体;
				font-size: 24px;
				color: black;
			}
			a:link{
				color: red;
			}
			a:visited{
				
				color: green;
			}
			a:hover{
				color: deeppink;
			}
			a:active{
				color: gold;
			}

A：link:设置未被访问过的页面显示

A：visited:设置被访问过的页面显示

A：hover:设置鼠标悬停时的页面显示

A：active:设置被点击时的页面显示

注:这四个书写的顺序很重要（link和visited必须写到hover之前），active必须写到hover之后。

(3).Css三种样式的默认优先级：

行内样式>内嵌样式>外联样式

Css三种样式可以改变优先级: !important

<style type="text/css">

div{

width: 300px !important;

height: 500px !important;

background: green !important;

}

</style>

2.盒子模型

(1)*盒子模型中重要的元素:

Content(内容) Padding(内边距) Border(边框) Margin(外边距)

(2).Margin-top塌陷的产生:

一个元素中含有一个子元素,给子元素设置Margin-top时,会发现将设置的值添加给了父元素, 所以子元素的Margin-top设置失效;

(3).Margin-top塌陷解决办法:

(1)给父元素添加属性overflow:hidden

(2)给父元素添加边框:border:1px solid black

(3)使用伪元素类

3，元素溢出

元素溢出的产生: 一个元素中含有其他元素,而其他元素超出了这个元素(父元素),我们把这种情况称之为元素溢出

解决方式: 使用属性overflow

Overflow:hidden 设置溢出的内容裁剪(隐藏), 但是并不会在父元素中显示被裁剪的内容;

Overflow: visible 默认值,即内容不会被修改,内容会显示在元素框之外

Overflow: scroll 设置被裁剪的内容以滚动条形式显示

Overflow:auto 设置如果元素中的内容被裁剪,浏览器自动以滚动条形式显示内容

<style type="text/css">
			.div1{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				overflow:hidden;
				overflow: scroll;
				overflow-y: scroll;
				overflow-x: scroll;
				overflow: auto;
			}
			.div1>div{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div>
				学的不仅是技术更是梦想
				学的不仅是技术更是梦想
				学的不仅是技术更是梦想
				学的不仅是技术更是梦想
				学的不仅是技术更是梦想
				学的不仅是技术更是梦想
			</div>
		</div>

4，块元素、内联元素、内联块元素

布局中常见的三种标签

(1)块标签/元素 : 元素会占据文档流的一行显示,即便设置了宽高也会占据一行显示.

(2)内联标签/元素: 元素的大小会跟随元素内容的改变而改变, 设置了宽高也不会改变元素的大小. 同时不会占据文档流的一行显示, 从左往右编写执行.

(3)内联块标签/元素: 既具备块元素设置宽高的属性也具备内联元素不会占据一行的属性;

display属性

可以将内联元素转换成内联块元素/块元素

同时也可以将内联块元素转换成内联元素/块元素

还可以将块元素转换成内联元素/内联块元素

display属性的值有如下:

none: 元素隐藏不显示

inline: 表示的是内联元素

block:表示的是块元素,并显示元素

inline-block: 表示内联块元素

块元素:

<style type="text/css">
div{
width: 200px;
height: 200px;
}
.div1{
background: red;
}
.div2{
background: green;
}
p{
background: pink;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<p>学的不仅是技术更是梦想</p>
<h1>标题1</h1>
<h2>标题2</h2>
<ul>
<li style="background: red;">首页</li>
</ul>

内联元素:

style type="text/css">
a{
background: red;
height: 300px;
width: 300px;
}
label{
background: green;
}
span{
background: pink;
}
</style>
</head>
<body>
<a href="#">我的超链接</a>
<label>姓名:</label>
<span>我的span标签</span>
<img src="img/bg1.jpg" style="width: 200px; height: 100px;" />
<img src="img/bg2.jpg" style="width: 200px; height: 100px;" />

</body>

.内联块元素:

<style type="text/css">
a{
background: red;
width:200px;
height:30px;
display: none;
display: block;
display: inline-block;
}
</style>
</head>
<body>
<a href="#">我的超链接</a>
<a href="#">我的超链接</a>
</body>