前端开发-css提升

小知识点：body与页面四周有个天生的8像素距离，所以里面的标签不写位置的时候会看到与边界有缝隙，想要无缝，设置*{margin:0;}即可

一、盒模型-内外边距（padding、margin）、边框border、宽width、高height

二、层模型

1、position:absolute

脱离原来位置进行定位，原来的层级就不保留它原来的位置了

相对于最近的有定位的父级进行定位，如果没有那么相对于文档进行定位

2、relative:保留原来位置进行定位

相对于原来的位置定位

对元素定位：用relative做参照物，absolute定位

3、fixed:广告定位，不随着页面滚动而滚动

div{
        /*相对于文档居中-如果是fixed就可以实现窗口居中定位*/
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    background-color: red;
    margin-left: -50px;
    margin-top: -50px;
}

三、两个经典的bug

1、父子级都设置垂直方向的margin的时候，父子元素是结合到一起的，只有当子级元素margin大于父级的时候才会有效果，并且带着父元素一起移动，就是说无论你怎么设margin-top，子元素与父元素top之间也不会有距离

margin塌陷

解决办法

1）父级加个边框：border:1px solid black;
确实能解决问题，但一般不这么做
2）bfc(block format context)块级格式化上下文
css认为每一个标签都是一个盒子，每个盒子有自己的渲染规则，bfc可以改变某些盒子的渲染规则

如何触发一个盒子的bfc:
position:absolute;
display:inline-block;
float:left/right;//浮动布局
overflow:hidden://溢出部分隐藏
虽然能解决问题，但是会带来一些新的影响，实际开发中根据需要自行选择

2、兄弟元素在垂直方向的margin问题

margin合并

同样也可以用bfc来解决这个问题

一般这种问题可以不解决，设置某一个的margin即可

3、float:left/right（可实现图文混排环绕）

如果所有元素都是浮动，可以让元素从左或从右站队
如果只是某一个元素是浮动的，它就产生了浮动流

所有产生了浮动流的元素，块级元素看不到他们（块级元素会占有他们原来的位置，覆盖，类似层模型）

产生了bfc的元素和文本类型属性的元素（inline）以及文本都能看到浮动元素（也就是不会覆盖）
如果子元素都是浮动元素，父级是块元素，会造成块元素包不住浮动元素的情况

1）只需要加个

标签，设置clear:both（块级元素才能使用）就能清楚所有浮动效果，让子元素将父元素自适应撑开

这种会改变原来的页面结构，不建议

2）另一个知识：每一个标签都有伪元素，有前后两个，使用双冒号可以用css改变它的样式，可以跟正常元素一样使用，只不过平常看不见
伪元素天生都是行级元素

span::before{
    content:"前伪元素";
    clear:both;/*块级元素使用才有效果*/
    display:block;
}
span::after{
    content:"后伪元素";
}

3）只要父级元素触发了bfc、或者是文本类型、浮动类型都可以包住浮动元素

凡是设置为position:abolote;float:left/right;的元素，系统会从内部把它转换成inline-block,宽高就不由内容决定了，可自行设置

四、css补充知识

1、文字溢出容器，要显示点点点

单行文本溢出处理

多行做文字截断即可
2、网络不好时的处理

网络不好会优先加载html，所以要保证没有css的情况下html也能展现内容

还可以利用padding不能显示文字的特性来处理

行级元素只能嵌套行级元素

块级元素能嵌套任何元素

标签虽然是块级元素，但是不允许嵌套

,否则会被拆分成两个

标签
标签不能嵌套标签

3、一旦一个文本类元素或者行级块元素包含内容文字，外面的文字就会跟内部文字底对齐，而不是跟元素底部对齐

span{
      display:inline-block;
      width:100px;
      height:100px;
      background-color:red;
      font-size:50px;
      vertical-align:middle;/*中线对齐，也可以写数值更改对齐线*/
 }