css简要笔记

css样式的优先级

权重:
id:1000
class:10
多个class权重累加，.div1 .p1{ width: 10px; }大于一个class
标签：1

内联样式>头部样式>外部导入样式
外部导入样式,<link rel="stylesheet" href="css/Test.css"> 靠后的优先级高。
同个文件中靠后的优先级高。

css伪类–例如:hover

https://www.runoob.com/css/css-pseudo-classes.html

a:hover {color:#FF00FF;}   鼠标划过的按钮表单等
a:active {color:#0000FF;}   已选中的链接 

input:focus   有光标闪烁的表单
input:checked { }  选中的checkbox

p:first-child
{
    color:blue;
}

p:before   之前插入内容
{
content:"Read this: ";
}

p:after   之后插入内容
{
content:"- Remember this";
}

宽高的计算

一般情况下, div的真实宽高=width+padding

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;   /* 增加这个使得真实宽高等于width, 不用做加法运算了*/
}

flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

举例情况 div.mainBody下面有3个div.items, 原始默认是从上到下,从左到右排列.

1. flex-direction: row;
   

 .mainBody{
    display: flex;    // flex默认是row, 排列在同一行, 从左到右
    flex-direction: row;   // 
  }
  .items{
    width: 200px;
    height: 100px;
    border: 1px solid red;
  }

2. flex-direction: column;

flex-derection:row 横着排列的情况 (默认)

1. 横着排列, 并且子元素分散居中
   

.mainBody{
    display: flex;
    flex-direction: row;
    justify-content:space-around;   // 横着排列, 并且子元素分散居中
    width: 300px;
  }
  .items{
    width: 60px;
    height: 60px;
    border: 1px solid red;
  }

2. 横着排列, 子元素居中挤在一起
   

.mainBody{
    display: flex;
    flex-direction: row;
    justify-content:center;   /* 横着排列, 一起居中挤在一起*/
    width: 300px;
  }
  .items{
    width: 60px;
    height: 60px;
    border: 1px solid red;
  }

3. 更多关于 justify-content:

justify-content: flex-start | flex-end | center | space-between | space-around;     默认flex-start

4. 当子元素宽高不同时, 用align-items 设置顶端对齐还是其他

align-items: flex-start | flex-end | center | baseline | stretch;

flex-derection:column 竖着排列的情况

最常用：竖直排列 顶部居中向下排列,可替代 margin:0 auto

.mainBody{
      display: flex;
      flex-direction: column;   	 /*   竖直排列/**/
      justify-content: flex-start;    /* 子元素从顶端排列 */
      align-items: center;      	 /*居中  */

      width: 300px;
      height: 300px;
    }
    
    .items{
      width: 80px;
      height: 60px;
      border: 1px solid red;
    }

注意: 上述只是针对子元素顶部居中, margin:0 auto;可以使当前元素顶部居中

四周居中

.mainBody{
    display: flex;
    flex-direction: column;  /* 竖直排列 */
    justify-content: center;   /* 使子元素在中间位置 */
    align-items: center;   /* 是子元素在中央位置  */

    width: 300px;
    height: 300px;
  }
  .items{

    width: 80px;
    height: 60px;
    border: 1px solid red;
  }

css实现好看的表单:input和button

.input{
	font-size:16pt;
	border: 1px solid #ccc;
	padding: 10px 12px; 
	line-height: 1.2em;  /*行间距*/
	border-radius:5px;  
	box-shadow: 1px 1px 2px #888888;  /*阴影 */
	outline-style: none ;	   /*鼠标点击没有其他效果*/
}
.input:hover{
	border:1px solid blue;
}
.input:focus{
	border:1px solid blue;
}
	
	
.button {
	background-color: #008CBA;  /* blue */
	border-radius:5px;
    border: none;
    color: white;
    padding: 12px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	cursor: pointer;
}
.button:hover{ 
	opacity:0.85;  /* 背景透明度 */
}
	
.btn-white{
	background-color: white;
	border-radius:5px;
	border: 1px solid gray;
	color: black;
	padding: 12px 30px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
}
.btn-white:hover{
	background:#ECF5FF;
	opacity:0.85;
}
	
	

.button2 {background-color: #4CAF50; /* Green */} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: white; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */
	


	<input class="input" placeholder="请输入姓名" />
		<br> <br>
	<button class="button">Blue</button>
	<button class="btn-white">white</button>
	<button class="button button2">Green</button>
	<button class="button button3">Red</button>

效果:

响应式布局–媒体查询

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）
user-scalable：用户是否可以手动缩放（设置为no，用户不可以放大缩小页面）


/*屏幕小于等于600px时*/
@media screen and (max-width:600px){
 .ads {  display:none;  }
}

/* 屏幕在600px~900px之间 */
@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}


/* 屏幕小于600时,引用phone.css */
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="phone.css" />

postion 定位

https://www.runoob.com/css/css-positioning.html

默认是的 positon:static;

绝对定位:

div{  
		position:absolute;
		top:100px;
		left:50px;
		border:1px solid red;
	 /* 	z-index:3;   数值与大,就盖在上面 */    
	}

相对于父亲的定位:

h2
{
    position:relative;
    left:20px;
    top:40px;
}

永远在顶部, 不管滚轮怎么滚动永远在那里

p
{
    position:fixed;
    top:30px;
    right:5px;
}

吸附顶部, 正常情况下是postion:static 滚动看不见了就变成position:fixed

div{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}