通知 网站从因情语写改为晴雨,这个网站的模板也从calmlog_ex改为 whimurmur

css知识备忘

59人浏览 / 0人评论 / | 作者:whisper  | 分类: css  | 标签: CSS  | 

作者:whisper

链接:https://www.proprogrammar.com/article/919

声明:请尊重原作者的劳动,如需转载请注明出处


1、hover一个元素,子元素样式变化

效果:

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.d1
{
	position: relative;
	background-color:#d0e4fe;
	width: 100px;
	height: 100px;
}
.d2
{
	width: 50px;
	height: 50px;
	margin: auto;
	position: absolute;
    left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	background-color: red;
}
.d1:hover .d2
{
	background-color: blue;
}
</style>
</head>

<body>

	<div class='d1'>
		<div class='d2'></div>
	</div>

</body>
</html>

2、CSS四种布局

流式布局 浮动布局 层次布局 flex布局

3、不计算偏移水平垂直居中

1、position+margin

css

.absolute_p2 {
  position: relative;

  width: 200px; height: 200px;
}
.absolute_p2 .absolute_c2 {
  position: absolute; /* fixed 同理 */
  left: 0; top: 0; bottom: 0; right: 0; /* 定位为 0 */

  width: 100px; height: 100px;
  margin: auto; /* 不用计算偏移量 */
}

html 

<div class="absolute_p2">
  <div class="absolute_c2"></div>
</div>

2、position+transform

css

.absolute_p3 {
  position: relative;

  width: 200px; height: 200px;
}
.absolute_p3 .absolute_c3 {
  position: absolute; /* fixed 同理 */
  left: 50%; top: 50%;

  width: 100px; height: 100px;
  transform: translate(-50%, -50%);
}

html 

<div class="absolute_p3">
  <div class="absolute_c3"></div>
</div>

3、inline+line-height

css

.inline_p1 {
    width: 200px; height: 200px;

    text-align: center;
    line-height: 200px; /* 行间元素的垂直居中 */
}
.inline_p1 .inline_c1 {
    display: inline;
    font-size: 0; /* 通过内容撑开宽高 */
    padding: 50px;
}

html 

<div class="inline_p1">
  <div class="inline_c1"> </div>
</div>

4、flexbox

css

.box_p1 {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    width: 200px;
    height: 200px;
}
.box_p1 .box_c1 {
    width: 100px;
    height: 100px;
}

html

<div class="box_p1">
  <div class="box_c1"> </div>
</div>

4、通配符

#search_condition [class*=search_submit] 
    表示class name里面的值包含search_submit

#search_condition [class^=search_submit]
    表示class name里面的值头部是search_submit

#search_condition [class$=search_submit]
    表示class name里面的值尾部是search_submit

* 选择器选择所有元素。

*{
    background-color:yellow;
}

* 选择器也可以选择另一个元素内的所有元素:

div *{
    background-color:yellow;
}

 


亲爱的读者:有时间可以点赞评论一下

点赞(0) 打赏

全部评论

还没有评论!
广告位-帮帮忙点下广告