html,css学习笔记（不定期更新）该笔记记录日常总结的零碎知识点，碰到什么而记录什么。😄😄 不给div加宽度的话

该笔记记录日常总结的零碎知识点，碰到什么而记录什么。😄😄

两个span标签之间打了回车之后，在网页中就会出现一个空格的间隙，让span之间不要有回车
li里面包裹a标签使如果发现a的大小比li 大的话，给a 标签加一个display: block;
.xxx {text-align: center;} 的作用是？

让.xxx的子代中的内联元素居中代码示例：
```
 <div class="xxx">
     <span class="aa">
     好事多磨好的好的好的
     </span>
 </div>
```
span会居中
```
 <div class="xxx">
     <div class="aa">
         好事多磨好的好的好的
     </div>
 </div>
```
不给div加宽度的话，div中的内容会居中，如果加了宽度，则div中的内容不会居中。

一个div，高度30px，字体大小14px，里面一行字，垂直居中？

 <div class="aa">
     好事多磨好的好的好的
 </div>
1. .aa{
         width: 300px;
         font-size: 14px;
         height: 30px;
         line-height: 30px;
     }
 2. .aa{
         width: 300px;
         font-size: 14px;
         line-height: 30px;
     }
 3. .aa{
         width: 300px;
         font-size: 14px;
         line-height: 20px;
         padding: 5px 0;
     }

总结：line-height也可以给元素设定高度

div的高度

div的高度由其内部文档流的高度总和决定, 文档流：文档内元素的流动方向，块级元素从上到下，内联元素从左到右

word-break

指定了怎样在单词内断行

 word-break: break-all; 可在任意任意字符间断行；
 这个属性可以使很长的英文可以随时断行。

在实际开发中，能不写width和height就不写，很容易出bug
max-width 最大宽度，写了max-width 可以自适应屏幕,最大宽度相较于宽度较有优势。
在写一个div时，可以由内向外地填补它的宽高，利用padding来填补宽高的差值。

如何利用css写一个三角形

div{
  border: 10px solid transparent;
  width:0px;
  height: 0px;
  border-top: 10px solid red;
}

可更改border每个方向的颜色来写出不同的三角形

关于伪类所有的非空标签都具有伪类,

::before   ::after
如果要让他们显示，则一定要写content:"",display: block;

box-sizing: border-box

box-sizing属性(MDN解释)，这个属性，可以在float布局的时候，给li加了50%的宽度之后再加margin或者padding值时出现换行的情况，此时可以利用这个属性，然后再加margin或者padding 的时候就不会导致换行了。
如果给一个元素加了display: inline-block;则它会在下面多出一点空隙，利用vertical-align: top;可以消除这个空隙
text-transform: uppercase; 可以把小写的字母变成大写的
网页上的字体的默认大小是 16px 1rem == 16px

    但是如果将html的font-size设置为别的数，
    例如html {font-size: 32px;},则此时1rem = 32px

1em == 一个font-size的值 ,例如：

p{font-size: 12px; height: 2em;} 那么p的高度就是24px

rem vs em ?

rem就是根元素的font-size em就是自己的font-size

js不要直接去修改样式，通过更改样式名去修改,不要做过多的事情，
比如控制他的显示隐藏之类的，都通过样式去控制，尽量用一个按钮做一个事情，而不是通过if else 去判断

css渐变工具, 可以生成csss渐变代码的工具

body{height: 100vh} 设置body的高度与视口的高度一致 
vh就是viewport  height， 100就是100%

浏览器获取网站的icon是直接访问例如：(www.qq.com/favicon.ico) 来获得的
遍历array中的key: for(var key in array) {}

var a = false;
$('#but').on('click',function(){
    a = !a;
})

每次点击使a在true和false之间切换，这样就不用写if去判断了。。。（2333以前这么笨）

documentElement MDN

#rubber > svg {
    width: 3em;
    height: 3em;
    margin: 1em  2em 0 0;
    transition: all 0.3s;
}
svg.active {
    fill: #fc0d1c;
    transform: scale(1.2);
}
transform: scale(1.2);//放大svg元素
transition: all 0.3s; //使放大过程有动画效果，变得更加圆滑些，
就是可以慢慢变大到原来的1.2倍然后再慢慢变小到原本的大小

div::before, div::after (在div的前面和后面插入元素)

html
<ul>
    <li>222222</li>
    <li>33333</li>
</ul>
给ul加上一个position: absolute;后 发现ul变成很窄,
里面的li中的文字出现换行情况的话 可以在li上加上 white-space: nowrap;

flex布局

如下结构，为使left在main的左侧，right在main的右侧
html
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
第一种方法（繁琐版本）：
.left{float:left}
.right:{float:right}
.main{清除浮动，懒得写了}
如果left和right中有文字的话，给Main加了padding之后，还要再考虑left和right中的文字是否居中，所以比较麻烦

第二种方法(简便法)：
.mian {display: flex; justify-content: space-between}
只要这一行哦，不要太简单哦

li横向布局

ul{display: flex;align-items: flex-start;}

link标签上也可以使用媒体查询

<link ref="stylesheet" href="mobile.css" @media="(max-width: 500px)" />
在设备宽度为500像素以内，mobile.css才会生效，注意，是生效，这个css文件始终是会下载的，但是不满足条件的话 就不会生效

html,css学习笔记（不定期更新）

div的高度

word-break

box-sizing: border-box