CSS学习，常用常记（分组和嵌套，尺寸Dimension，显示Display与可见性Visibility）

最新推荐文章于 2020-10-15 11:21:13 发布

hhjian6666

最新推荐文章于 2020-10-15 11:21:13 发布

阅读量239

点赞数

分类专栏： ***CSS + CSS3***Study***

本文链接：https://blog.csdn.net/qq_30796379/article/details/88691262

版权

***CSS + CSS3***Study*** 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

分组选择器

在样式表中有很多具有相同样式的元素，为了减少代码，可以使用分组选择器，逗号分隔；

h1,h2,p{
	color:green;
}

嵌套选择器

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>菜鸟教程(runoob.com)</title> 
	<style>
		p{
			color:blue;
			text-align:center;
		}
		.marked{
			background-color:red;
		}
		.marked p{
			color:white;
		}
		p.marked{
			text-decoration:underline;
		}
	</style>
</head>

<body>
	<p>这个段落是蓝色文本，居中对齐。</p>
	<div class="marked">
		<p>这个段落不是蓝色文本。</p>
	</div>
	<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
	<p class="marked">带下划线的 p 段落。</p>
</body>
</html>

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度，允许你增加行间距；

img.normal{
	height:auto;
}
img.big{
	height:120px;
}
p.ex{
	height:100px;
	width:100px;
}

html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}

p{<!--设置元素的最大高度（仍会溢出）-->
	max-height:50px;<!--可使用百分比表示-->
	background-color:yellow;
}

p{<!--设置元素的最小高度（占据整个范围）-->
	min-height:100px;
	background-color:yellow;
}

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果；
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局；
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失；

h1.hidden {visibility:hidden;}
h1.hidden {display:none;}

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

<h1>
<p>
<div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

<span>
<a>

如何改变一个元素显示

可以更改内联元素和块元素，使页面看起来是以一种特定的方式组合，遵循web标准；

li {display:inline;}<!--把列表项显示为内联元素-->
span {display:block;}<!--把span元素作为块元素-->

使用表的collapse属性；

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

对于 CSS 里的 visibility 属性，通常其值被设置成 visible 或 hidden。

visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：

1、display:none 元素不再占用空间。
2、visibility: hidden 使元素在网页上不可见，但仍占用空间。

然而，visibility 还可能取值为 collapse 。

当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。

在不同浏览器下，对 visibility: collapse 的处理方式不同：

1、visibility: collapse 的上述特性仅在 Firefox 下起作用。
2、在 IE 即使设置了 visibility: collapse，还是会显示元素。
3、在 Chrome 下，即使会将元素隐藏，但无论是否是与 table 相关的元素，visibility: collapse 与 visibility: hidden 没有什么区别，即仍会占用空间。