CSS常用命令
文档流就是文档内元素流动方向
流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断
块元素从上往下流动，一排一排
内联元素中有英文单词，流动时宽度不够，英文单词会整体迁移，不会被打断
若想打断上述联结，请使用css属性
/*想打断的内联元素*/{ word-break: break-all; display: inline-block; } 脱离文档流类似悬浮在页面上一样
position: fixed;
position: absolute;
关于字体一般，页面默认字体大小16px
字体一般都分为上部、中部、下部
文字（汉字、西文）都相对基线（下部）对齐
不同字体有自己规定的建议行高，可以自行line-height规定
设定字体样式
/*各类选择器*/{ font-family: kai; }
字体加粗
/*各类选择器*/{ font-weight: bold; }
字体大写
/*各类选择器*/{ text-transform: uppercase; } 背景相关
背景位置与自适应
/*各类选择器*/{ background-position: center center;/*水平方向*/ /*垂直方向*/ background-size: cover;/*背景自适应*/ background: url(背景图片地址); } 设定内外边距padding margin /*各类选择器*/{ padding: 10px 20px 30px 40px;/*上 右 下 左*/ margin: 10px 20px 30px 40px;/*上 右 下 左*/ } /*各类选择器*/{ padding: 10px 30px;/*上 右 下 左*/ margin: 10px 30px;/*上下 左右*/ }margin甚至可以调成负值，往反方向移呗
内联元素左右 padding有用，上下 padding不影响页面布局，，位置不变。可以设置css：display: line-block;，使上下左右padding都生效。
position定位（详细请阅读：https://developer.mozilla.org...）(??????)??
/*各类选择器*/{ position: relative/absolute/fixed/sticky/static; } fixed 元素的宽度会自动缩成最小、最紧凑的宽度 可以使用 width height 调整大小 可以使用 top left right bottom 调整位置 可以使用 left: 0; right: 0; 来使元素充满<body> absolute 可以设置子元素 position: absolute; 父元素position: elative; 子元素相对父元素绝对定位 子元素居中
水平居中
/*想要子元素居中的元素*/{ text-align: center; }
垂直居中
/*使用vertical-align要求父元素必须有行高，如果没有的话，一定要手动添加：line-height: ;*/ /*想要居中的子元素*/{ verticle-align: center; }
使内联元素在页面中居中：用一个块元素包着它，然后加上css：
<div> <span></span> </div> div{ text-align: center; }
设置子元素高度height: 100%;，在父元素上加上上下等量的 padding
<div> <span></span> </div> div{ padding: 10px; } span{ height: 100%; }
使用flex布局：左右居中，垂直居中。在父元素上加上如下 css：
/*某父元素*/{ display:flex; align-items:center; justify-content:center; } 边框
边框圆角
/*想要圆角边框的元素*/{ border: 1px solid red; //设置元素边框 border-radius: 30px; //设置边框圆角30px } 图标可以登录网站：，添加网站生成的<svg>到 html 里
给<svg>添加 css属性改变样式
svg{ width: height: fill: /*颜色*/ margin: padding: } 其它
鼠标悬停
/*各类选择器*/:hover{ color: red; }
继承父辈属性
并不是所有属性都能继承的
<a>标签去掉列表下划线
a{ text-decoration: none; }内联元素不能制定高度（height）和宽度（width）
要转变为块级元素（display: block;）或内联块级元素（display: inline-block;）
自己写的属性优先级比浏览器和默认的高
行高line-height可决定内联元素高度
html编程中两行代码中间的空格和回车都会变成一个空格
同样颜色不同字体上有不同颜色
设置上下 padding 一样就是居中，仅对块元素生效，内联元素无效
行高line-height和字高font-size的差值会自动的填充在字体的上下
border 与 浮动
动画操作（如 :hover）border后，元素会左右浮动， 这是由于一开始没有 border，操作后多出来了， 将元素一开始就添加【透明 border】，坑先站好啊，之后动画 border 颜色的显现
内联元素盒模型超过父辈
一些默认 display: inline; 的元素被包起来的时候，它的 padding 和margin 有时会超过父辈 需要设定 display: block; 解决 /*内联元素*/{ display: block; }div 高度由其内部文档流元素的高度总和决定
内联的高度任性，强行准确测量意义不大
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/42027.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")