【css】笔记 | 郭飞的笔记

css引入

引用 css

<!-- 方法1:引用css文件 -->
<link rel="stylesheet" href="/public/css/bootstrap.css">

<!-- 方法2:直接写在页面里面 -->
<style>
/* 点开头作用于指定的 class  */
.a_class_name{
	background-color: red;
	font-size: 18px;
	border: 1px solid #fff;
	width: 100%;
	height: 300px;
}

/* 井号开头作用于 id */
#id_name{
	font-size: 40px;
}

/* 什么也不加，作用于所有这样的标签 */
div{
	color: red;
}
/* 加逗号，表示这两个都生效 */
h1,h2{
	color:blue;
}
/* 空格表示指定子标签，这里也可以用点或井号；是作用于所有嵌套层级的子标签 */
a div{
	color: yellow;
}

/* 用 > 符号，表示只作用于下一级子标签 */
.sidebar > ul > li {
  margin: 5px 0;
}

</style>

<div class="a_class_name">通过class指定样式</div>
<div id='id_name'>通过id指定样式</div>

<h1>标题1</h1>
<h2>标题2</h2>

<a><div>指定的嵌套才生效</div></a>

知识点

作用类型：
- 点开头作用于指定的class
- 井号开头作用于指定的id
- 什么也不加作用于指定的标签
逗号分割，表示两个并列的有一样的样式
空格分割，表示子标签。
- 空格前后可以是第一条的3种类型（点开头，井开头，什么也不加）
- 可以多层级

背景图片

<style>
	#demo_background{
		background-image:url('https://www.guofei.site/public/about/me.png');
		background-repeat:no-repeat; /* 默认重复显示图片填充 */
		height: 300px;
		background-position: -29px 30px; /* 调整位置 */

		/* 大小 */
  	background-size: 100%;
	}
</style>

<div id='demo_background'>展示背景图片</div>

展示背景图片

块

从外到内：margin，border，padding

margin：外间距，元素和其它元素之间的距离
border：元素外沿轮廓线
padding：元素内容与边框之间的距离

margin

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;

margin-bottom: 100px;

margin : 10px , 0 , 0 , 0 # 顺序是上下左右

border

边框

<style>

#demo_border{
	border: 1px solid red; /* 粗细、样式、颜色 */
	height: 50px;

	/* 可以单独 top/left/right/bottom修改 */
    border-right: 10px solid red;

	border-top-style:dotted; /* 虚线 */
	border-top-color: blue;
	border-top-width: 10px;
	/* 可以同样对 left/right/bottom修改 */
}
</style>
<div id="demo_border">展示边框</div>

展示边框

padding

内边距，边框到内容的距离

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;

/*上下左右*/
padding: 20px;

其它知识

鼠标形状

<span style="cursor:help">help</span>
<span style="cursor:wait">wait</span>
<span style="cursor:move">move</span>

鼠标放到这里就会变化

还有更多的，右键检查可以替换。

交互样式

/* 鼠标指针悬停在元素上时生效 */
button:hover { background-color: #f0f0f0; }

/* 元素获得焦点时生效（如输入框被点击、通过键盘Tab键选中） */
input:focus { border: 2px solid blue; }

/* 元素被激活时生效（如鼠标按下但未松开） */
button:active { transform: translateY(2px); }

漂浮效果

<div style="background-color: red;float:left">左漂浮</div>
<div style="background-color: blue;float:right;width:50%">右漂浮</div>

左漂浮

右漂浮

注意：如果同等级有其它文字，会放中间

position

fixed：固定在某个位置。使用场景：可以作为固定横幅；左侧标题拦；返回顶部按钮。
relative&absolute：“父div”是relative，“子div”是absolute，效果：子div的位置会相对父div

position=fixed 把div固定在某个位置，top控制位置

透明度

opacity，可用于图片、文字、背景色等

<div style='background-color:red;height:100px;opacity:0.4'></div>

hide效果

.hide{
	display: none;
}

示例

<style>
.demo-iframe-holder {
  width: 100%;
  height: 300px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}
</style>

flex

.main-content {
    flex: 1; /*使用弹性布局，并且占用所有可用空间 */
    padding: 10px 10px 50px 10px;
    box-sizing: border-box; /*计算元素宽高时，把padding 和 border 都计算在内*/
    overflow-y: auto; /*纵向超出范围时，自动出现滚动条*/
    overflow-x: hidden; /*横向超出范围时，不允许出现滚动条，超过部分被隐藏*/
}

根据屏幕大小的样式

@media screen and (max-width: 600px) {
	/* 这里填入的 css 在屏幕宽度小于 600px 的情况下才生效 */

}