转为行内块的三种方式：display、float、绝对定位和固定定位
按住滚轮竖向选择
块级元素的特点：是一个容器及盒子，里面可以放行内或者块级元素。<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
行内元素的特点：默认宽度就是它本身内容的宽度。行内元素只能容纳文本或则其他行内元素。<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
行内块元素的特点：高度，行高、外边距以及内边距都可以控制。一行可以显示多个<img />、<input />、<td>
-
块转行内：display:inline;
-
行内转块：display:block;
行高（文字line-height）和高度（div父盒子height）的关系（行高默认16px)
行高等于高度单行文字会居中
行高大于高于文字偏下，行高小于高度文字偏上
text-decoration:none取消下划线
css的继承性，line-，text-，font-这些元素可以继承已经color属性
元素选择器，伪元素选择器1<类选择器，伪类选择器，属性选择器10<id选择器100
权重相同就近原则
css三大特性：层叠性，优先级，继承性
盒子模型由四部分组成：外边距，边框，内边距，内容
border-collapse:collapse 合并边框不会重叠1+1=1
padding会把盒子往内撑大，边框会把盒子往外撑大
内容宽高+内边距+边框=盒子实际宽度
如果一个盒子没有指定宽度（高度不行），那么此时这个盒子指定padding，不会撑开盒子（继承也只能继承特定的属性，宽高这种不行），块级元素宽度和父级元素相同，默认宽度相同!
margin:0 auto 块级盒子居中对齐
text-align:center 可以让盒子里的文字，行内块，行内元素均居中对齐
插入图片主要靠margin，padding移动盒子
背景图片主要靠background-position移动
清除元素默认的上下margin
*{
margin:0;
padding:0;
}
li {
list-style: none;
}
嵌套块元素垂直外边距的合并（塌陷）解决方案：给父元素添加
1、border-top: 1px solid transparent
2、padding：1px
3、overflow:hidden
子盒子有浮动则外边距不会掉下来
盒子模型的稳定性：width>padding>margin
CSS3的圆角边框 border-radius:50%
text-align:center 和line-height水平居中和垂直居中
值得注意的是，一个元素浮动以后，他的位置不会漏给下面的图片元素。图片比较特殊
css代码编写规范
选择器和{}之间空格，属性名和属性值：后面的空格
并集选择器，每个选择器独占一行
浮动的作用：虽然行内块也能实现，但是块与块之间会有缝隙。左对齐右对齐也需要浮动
浮动可以脱离标准流的控制，可以做图片文字环绕的效果
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
方法：额外标签法，给父级元素添加overflow:hidden|auto|scroll
父级元素使用after伪元素清除浮动
- li+a 语义更清晰，一看这就是有条理的列表型内容。
- 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名
建议遵循以下顺序：
- 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
- 自身属性：width / height / margin / padding / border / background
- 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
text-decoration不会被继承
/*css 初始化代码 css reset*/
/*清除元素默认的内外边距*/
* {
margin: 0;
padding: 0;
}
/*清除列表样式*/
li {
list-style: none;
}
/*去掉button 默认自带的边框*/
button {
border: none;
}
body {
background-color: #f3f5f7;
/*方便写代码 一会别忘了删除*/
/*height: 3000px;*/
}
a {
text-decoration: none;
}
input {
outline: 0;
}
让粗体不加粗相当于normal
/* font-weight=400; */
如何解决5个盒子4个空隙的情况，可以让子盒子刚好比父盒子大一个空隙
定位=定位模式+边偏移
定位模式：
相对定位relative-----原来在标准流的区域继续占有，后面的盒子以标准流的方式对待它
绝对定位absolute------如果父级盒子没有定位，那么以浏览器为准，如果上级盒子有定位，则以第一个有定位的上级盒子为准，不保留原来位置，是脱标的（子绝父相）
固定定位fixed------ 脱标，只认浏览器可视窗口
绝对定位的盒子居中，不能通过margin: auto
left: 50%;
margin-left: -100px; 其中100px为盒子的宽度一半
z-index:1 设置数值改变堆叠顺序，有z-index只有定位position的元素里面的才有
转为行内块的三种方式：display、float、绝对定位和固定定位
定位的盒子如果需要通栏，则宽度给100%
外边距合并问题的解决方案：父元素border/padding、子元素float、绝对定位和固定定位
即浮动元素和绝对定位元素不存在外边距合并问题
切图如果需要用透明背景则用png格式
显示与隐藏常用，display(none和block)、overflow
visibility会占位置不常用
vertical-align 通常用来控制图片/表单与文字的对齐。块级元素失效
解决空白缝隙，要么改vertical-align: top;要么改为块级元素(修改掉原来的基线对其即可)
边框重叠问题可以用margin-left: -1px解决，边框显现的问题可能被压，因此用position： relative将其提到最上层
2D转换，transform: translate(x,y); 优点是不会影响其他元素，百分比是自身的宽高百分比，对行内元素无效
transform: scale(2,2); 不会影响其他盒子，且从中心点处缩放，如果直接设置width或者height上边界保持不变
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
animation相对于过渡的好处是打开页面立刻播放，不需要hover
transform: translateZ() 移动的是物体
perspective：10px 移动的是人眼 加到父元素上
移动端物理像素比
box-sizing: border-box;编程css3的盒子模型 盒子width和height不再试内容而是以边框为边界，可以看成是盒子大小而不是内容大小。padding,border不会撑大盒子
移动端特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
行高没有单位的时候
1. 数字的时候，子元素的行高 = 子元素的字体大小 * 数字
2. 百分比和em单位时，子元素的行高 = 父元素的字体大小 * 百分比
二倍精灵图：
先等比例缩小一半再量坐标，这样的坐标才准确
background-size: 200px auto;
backgroud: url(…) no-repeat -81px 0;
header— 头部标签nav— 导航标签article— 内容标签section— 块级标签aside— 侧边栏标签footer— 尾部标签
flex就相当于把所有元素转为行内块，没有float，vertical-align，clear
a的属性title可以提供提示信息
渐变色浏览器的私有前缀
background-color: -webkit-linear-gradient(left,red,blue);
flex既可以写数字表示份数，也可以写百分比。百分比的写法可以指定宽度并实现多行显示
text-indent: -999px； 缩进文本达到隐藏的效果
可以改为行内块的有display: flex; display: inline-block; float:left; position:absolute/fixed;
注意不能转为行内块的是box-sizing: border-box; css3盒子模型的好处就是padding不会撑开盒子
less的运算符左右两侧必须有空格
两个数都有单位，以第一个单位为准
如果只有一个数有单位那么以这个单位为准。
less: 可以有变量，减少css的重复代码；可以有嵌套；伪类伪元素&：hover; 可以进行计算
rem+媒体查询(根据不同的屏幕尺寸变化html字体大小)+less(方便计算)
先max-width后min-width
页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
（屏幕宽度 / 划分的份数）=html字体大小
简单理解就是：先把屏幕划分成n等分，再看页面元素占几等份，就是几rem
less文件导入less文件： @import: common
margin: auto对于行内块元素如img失效
使用flexible.js不用写common.less文件
修改cssrem计算辅助器插件的设置cssroot
以进行计算
rem+媒体查询(根据不同的屏幕尺寸变化html字体大小)+less(方便计算)
[外链图片转存中…(img-pQXotnAt-1625198812453)]
先max-width后min-width
页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
（屏幕宽度 / 划分的份数）=html字体大小
简单理解就是：先把屏幕划分成n等分，再看页面元素占几等份，就是几rem
less文件导入less文件： @import: common
margin: auto对于行内块元素如img失效
使用flexible.js不用写common.less文件
修改cssrem计算辅助器插件的设置cssroot
2132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
