css 常见知识点

怪异盒模型

标准盒模型转换怪异盒模型
box-sizing: border-box;

1.css选择器

 X:first-child			匹配子集的第一个元素。IE7就可以支持
 X:last-child			匹配父元素中最后一个X元素
 X:nth-child(n)		用于匹配索引值为n的子元素。索引值从1开始
 X:nth-last-child(n)	从最后一个开始算索引。
 X:first-of-type		匹配同级兄弟元素中的第一个X元素
 X:last-of-type			匹配同级兄弟元素中的最后一个X元素
 X:nth-of-type(n)		匹配同类型中的第n个同级兄弟元素X
 X:only-of-type			匹配属于同类型中唯一兄弟元素的X
 X:nth-last-of-type(n)	 匹配同类型中的倒数第n个同级兄弟元素X

https://segmentfault.com/a/1190000013745407

块元素 行内块元素 内联元素

块元素

hr 
p  
h1-h6
div
ul
ol
li 
form

      1、自动换行，独占一行，上下排列
      2、可以设置宽高
      3、块元素可以包裹块元素和内联元素 （有个别标签特殊，p ，h1~h6，dt）
      4、块元素可以设置4个方向的margin和padding
      5、如果块元素不设width，块元素的宽度就是父元素的宽度，但是浮动后，块元素的宽度就由内容撑开

行内块元素
（置换元素，可变元素）

img、input   td

        1、水平显示，不会自动换行
        2、行内块元素可以设置宽高
        3、行内块元素嵌套内联
        4、4个方向的margin和padding都能设置
  		5  默认有空隙

内联元素

b strong
i em
u
sub sup
span

     1、一行显示多个，不会自动换行
     2、内联元素的宽高由内容撑开，设置不上宽高 
     3、内联元素只能嵌套内联
     4、内联元素只能设置左右的margin和padding，上下方向会有问题
     5、设置浮动后，对于内联元素会有影响，内联元素也能设置宽高

display: inline-block;转换为行内块元素，display: block;转换为块元素

2.清除浮动

浮动：浮动后的元素会脱离文档流不占位置

1.父元素设置高度隔开
    
2.overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
    
3.在父元素中，追加空子元素，并设置其clear属性为both
    注：使用clear:both之后margin属性会失效, 所以不常用

4.使用内容生成的方式清除浮动

.clearfix:after {
   content:"."; //生成内容为空
   display: block; //转换为块级元素
   clear:both; // 清除前面元素带来的影响
}

5.双伪元素清除浮动

不仅可以清除浮动，也可以解决高度塌陷的问题（给父盒子添加类名clearfix）
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";    /*不用有内容也可以*/
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

3.BFC

BFC 就是一个独立的渲染区域，规定了块元素如何排版布局

布局规则

1，内容   上下排列。垂直显示
2，同一个bfc区域的两个盒子，上下的margin会重叠，
3，盒子左边的margin 和盒子左边边框会接触
4，浮动区域和bfc区域不会重叠
5，每一个bfc都是一个独立的容器，相互之间互不影响
6、在BFC区域内容，浮动元素也产于高度计算    

触发条件

1，标签           html根元素
2，属性
3，浮动           float：left/right
4，定位           position:absolute/fixed
5，元素类型转换    display:inline-block/table-cell/table-caption/inline-flex/flex
6，内容溢出设置    overflow:hidden/auto/scroll（最常用）

BFC的应用

 1、自适应两栏布局
 2、清除内部浮动，解决高度塌陷 (BFC区域内，浮动元素也参与高度计算)
 3、防止margin上下重叠

4.定位区别

相对定位 position:relative

1、占位，没有脱离文档流
2、相对定位的位置是相对原位置移动

绝对定位 position:absolute

1、不占位
2、绝对定位位置移动的参照物先找定位父元素（推荐使用相对定位），
如果没有定位父元素，再找浏览器窗口为位置移动的参照物。

固定定位 position:fixed

 1、不占位 (固定在浏览器可视图区域， 不占位，不会随着滚动条滑动而移动位置)
 2、始终以浏览器的可视区为位置移动的参照物

粘性定位 position:sticky

1.占位
2.，当滚动条没有划过内容的时候，类似相对定位，占位的效果，当滚动条划过内容，内容会有绝对定位的效果。类似于固定定位

5.垂直居中

水平居中

1.定位设置

   position:absolute
   left:50%；
   top:50%；
   margin-left：-（自身宽度的一半）；
   margin-top：-（自身高度的一半）；

   position:absolute
   left:0;
   right:0;
   top:0;
   bottom:0;
   margin:auto; 

2D偏移垂直居中

   left:50%
   top:50%
   transform:translate(-50%,-50%)

弹性盒垂直居中

   父：display:flex
   子：margin:auto

  	 display: flex;
     // flex-direction: column;
     align-items:center;
     justify-content: center;

5.弹性盒

flex复合属性

flex: 0 1 auto 默认值

1.flex-grow (扩展)，默认为 0，即如果存在剩余空间，也不放大。
2.flex-shrink (收缩)，默认为 1，即如果空间不足，该项目将缩小。
3.flex-basis (项目的长度) 在分配多余空间之前，项目占据的主轴空间，相当于我们设置的width，

 缩写「flex: 1」, 则其计算值为「1 1 0%」相当于可扩大，可缩小,自动填充满剩余空间
    「flex: auto」, 则其计算值为「1 1 auto」相当于可扩大，可缩小,
    
    「flex: 0」, 则其计算值为「0 1 0%」  相当于不可扩大，可缩小，表现形式为最小内容宽度
    「flex: none」, 则其计算值为「0 0 auto」不可扩大，不可缩小，内容本身的宽度是多少就是多少

flex布局中flex:1和flex:auto的区别

flex: 1   不管内容多少，一般都是平分空间，空间大小都一致
flex: auto  根据内容的大小来分，不是均分的（除非内容都是一样，才均分）。

所以: flex:1 更适合在等比例列表时使用，
	  flex：auto适用于元素充分利用剩余空间，比如头部导航文字多少不一致时使用

常见属性

flex-direction
  	X水平排列
      row          x轴方向顶端对齐(默认值)
      row-reverse  x轴方向底端对齐

    Y垂直排列
      column          y轴的顶端对齐
      column-reverse  y轴的底端对齐

主轴方向上的对齐方式

justify-content
      flex-start    主轴顶端对齐
      flex-end      主轴底端对齐
      center        主轴居中对齐
      space-between 两端对齐，中间距离自适应
      space-around  内容左右的间距一样，类似左右margin的效果
      space-evenly  所有的距离都相等

侧轴对齐

align-items
      flex-start   侧轴顶端对齐，取消行间距
      flex-end    侧轴底端对齐 取消行间距
      center      侧轴居中，取消行间距
      space-between   两端对齐，上下间距自适宜（顶端和底端对齐，)
      space-around     每个盒子两边都有距离
      space-evenly    所有的距离都相等

6 左边固定，右边自适宜

浮动
1左边浮动，右边正常，父元素设置padding-left：左宽度

**flex布局**
左边宽度固定,右边flex:1

**利用BFC**
左边浮动,右边overflow:hidden

**负margin方法**
左右给inline-block 右边给padding-left:200px,
margin-left:-200px,box-sizing:border-box

**position方法**
左侧:position:relative;z-index:1
右侧:position:absolute,right:0,top:0
padding-left:200px,width:100%

移动端适配

媒体查询

em

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸

rem

当设备尺寸发生改变的时候，等比例适配当前设备

相对于HTML根元素的字体大小 来计算的长度单位

rem + 媒体查询 +less技术

1.实现选一套标准，比如iPhone6/7的 750为准
2.屏幕除以划分的分数，得到HTML里面的文字大小
3. 页面元素的rem值 = 页面元素值(px)/html的字体大小

vw、vh

1.vw是相对视口（viewport）的宽/高度而定的，长度等于视口宽度的1/100

插件

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
文档：https://github.com/cuth/postcss-pxtorem

lib-flexible 用于设置 rem 基准值
文档：https://github.com/amfe/lib-flexible

参考：https://blog.csdn.net/Aaa_Liao/article/details/106986260

8.渐进增强和优雅降级的区别

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，
能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；
而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

最后

以上就是阳光眼神为你收集整理的css 常见知识点的全部内容，希望文章能够帮你解决css 常见知识点所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。