Css 记事_css 记事板-优快云博客

本文链接：https://blog.youkuaiyun.com/tjcjava/article/details/82116762

标准盒子模型

块级元素、行内元素比较
块级元素：
a. 默认横向充满其父元素的内容区域，而且在其左右两边没有其他元素
b. 浮动元素是块级元素，可以设置宽高,但是其旁边可以有其他元素
行内元素：
a. 设置width和height无效,竖直方向的margin、padding无效
b. display：inline-block 可以让元素具有块级元素和行内元素的特性，既可以设置长宽，让padding和margin生效，又可以和其他行内元素并排
c. 替换元素：<img> <input> 具有内在尺寸,可以设置width和height(不指定时，按照图片被保存的时候的宽度和高度显示)

margin 塌陷

1、垂直并列(少见)：未绝对定位(固定定位)的2个元素,垂直之间塌陷的原则是以两盒子最大的外边距为准
2、嵌套关系(常见)：
子元素设置margin-top：** px时，父子盒子间并没出现期望的** px间隙而是父子盒子一起与外部顶端产生了XXpx间隙

解决办法：
1、父元素设置 padding 值,宽高可以 box-sizing: border-box 控制
2、父盒子添加overflow：hidden；

幽灵空白点

可以参考：css 深入理解 vertical-align line-height 属性

内联元素各种想得通或者想不通的行为表现，基本上都可以用vertical-align和line-height来解释，以及进行行为矫正；

矫正方式：设置父元素的font-size: 0;

Position属性
static(静态定位): 默认值。没有定位，元素出现在正常的流中（忽略TRBL、 z-index的声明）
relative(相对定位)：元素脱离正常的文本流中，但其在文本流中的位置依然存在
1、无论父级是否存在，无论有没有TRBL，均以父级的左上角进行定位，但是父级的Padding属性会对其影响。
2、一般使用relative来改变位置比较少，主要是用来设置子级的absolute定位的参考对象
absolute(绝对定位)：元素脱离正常文本流,其在正常流中的位置不再存在,相对于 static 定位以外的第一个父元素进行定位。
若想把一个定位属性为absolute的元素定位于其父级元素内，只有满足两个条件：
　第一：设定TRBL 第二：父级设定Position属性(一点不满足，元素就会以浏览器左上角为原点)
fixed(固定定位)：元素脱离正常文本流,不占据空间，相对于浏览器窗口定位,即使窗口是滚动的它也不会滚动，且它会和其他元素发生重叠
备注：
　1、如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用 absolute，因为它不受父级元素的padding的属性影响。
2、子元素的position为fixed或者是absolute，那么它就会脱离文档流，这样的后果是父元素无法被撑开

伪类元素：参考 https://blog.youkuaiyun.com/u013594477/article/details/80393667

font-size 字体相关

1、字体用像素表示：rem自适应会导致从客户端 --> H5页面，字体大小变化突兀；iphone4小屏手机，一行文字放不下，用媒体查询处理

2、字体实际高度：字体大小(UI设计稿标注大小)* 三分之二

iphone X、iphone Xs、iphone Xs Max、iphone Xr 适配

iphone X、iphone Xs：

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

iphone Xs Max：

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) { }

iphone Xr：

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) { }

备注：