css工作总结

最新推荐文章于 2023-11-22 15:22:36 发布

_心动

最新推荐文章于 2023-11-22 15:22:36 发布

阅读量1k

点赞数 2

分类专栏： html_css

本文链接：https://blog.csdn.net/XSFD_DFSX/article/details/82915172

版权

html_css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、width||height: 100% && auto 区别

auto

子元素（包括content+padding+border+margin）撑满整个父元素的content区域。
子元素有margin、border、padding时，会减去子元素content区域相对应的width值
父元素的content = 子元素（content + padding + border + margin )

100%

强制将子元素的content区域 撑满 父元素的content区域
子元素有margin、border、padding时，不改变子元素content区域的width，而是溢出父盒子，保持原有值
父元素的content = 子元素的content

2、BFC

在一个web页面的css渲染中，块级格式化上下文（Block Fromatting Context）是按照块级盒子布局的，w3c对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（inline-blocks, table-cells, and table-captions）, 以及overflow值不为’visiable’ 的块级盒子，都会为他们的内容创建新的BFC。
1、float 的值不为none
2、position的值不为static 或者relative
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
5、根元素
特点：
1、内部的Box会在垂直方向，按照从上到下的方式逐个排列。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素的高度也参与计算

BFC中盒子怎么对齐

如前文所说，在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。W3C给出得规范是：

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。浮动也是如此（尽管盒子里的行盒子 Line Box 可能由于浮动而变窄），除非盒子创建了一个新的BFC（在这种情况下盒子本身可能由于浮动而变窄）。
bfc

外边距折叠
常规流布局时，盒子都是垂直排列，两者之间的间距各自的外边距所决定，但不是二者外边距之和。
比如：两个垂直排列的盒子，外边距都是10px ，但是最后的结果是10 px 而不是两者之和20px

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算：

1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3、两个外边距一正一负时，折叠结果是两者的相加的和。

利用bfc避免外边距折叠
BFC可能造成外边距折叠，也可以利用它来避免这种情况。BFC产生外边距折叠要满足一个条件：两个相邻元素要处于同一个BFC中。所以，若两个相邻元素在不同的BFC中，就能避免外边距折叠。

bfc包含浮动
浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。如果一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。我们通常会利用伪元素(:after或者:before)来解决这个问题。BFC能包含浮动，也能解决容器高度不会被撑开的问题。

使用BFC避免文字环绕
在这里插入图片描述

.container > div {float: left}
.constainer > p { overflow: hidden /*BFC*/}
<div class="container">
	    <div class="floated">
	        <img src="...">
	    </div>
	    <p>....</p>
</div>

在多列布局中使用BFC
如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。
例如：

<div class="container">
    <div class="column">column 1</div>
    <div class="column">column 2</div>
    <div class="column">column 3</div>
</div>
对应的CSS：

.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
/*  Establishing a new block formatting 
    context in the last column */
.column:last-child {
    float: none;
overflow: hidden; 
}

现在尽管盒子的宽度稍有改变，但布局不会打破。当然，对多列布局来说这不一定是个好办法，但能避免最后一列下掉。这个问题上弹性盒或许是个更好的解决方案，但这个办法可以用来说明元素在这些环境下的行为。

清除浮动

方案一：
父元素中，追加空子元素，并设置其clear属性为both
方案二：
设置父元素浮动
方案三：
overflow: hidden or auto
方案四：
父元素设置display:table
优势：不影响结构与表现的分离，语义化正确，代码量少
弊端：盒模型属性已经改变，会造成其他问题
方案五：
使用内容生成的方式清除浮动

.clearfix:after {
   content:""; 
   display: block; 
   clear:both; 
}

方案六：

.cf:before,.cf:after {
   content:"";
   display:table;
}
.cf:after { clear:both; }

注意：display:table本身无法触发BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以触发BFC，简单说就是，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的（后面会说到BFC）。

CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。
overflow: visible|hidden|auto|scroll|inherit
ie8+ : overflow-x和 overflow-y
如果overflow-x和 overflow-y这两个相等，等同于oveflow ，如果不相等：其中一个值赋为visible，另一个被赋为hidden|auto|scroll ，那么这个visible会被重置为auto

在这里插入图片描述

无论什么浏览器，默认滚动条均来自html ，而不是body 标签
ie7- 浏览器默认： html{ overflow-y : scroll}
ie8+ 浏览器默认： html {overflow: auto}
body/html 与滚动条 - js与滚动高度
chrome 浏览器： document.body.scrollTop
其他浏览器： document.documentElement.scrollTop
目前，两者不会同时存在，因此，坊间流传这类写法：
var st = document.body.scrollTop + document.documentElement.scrollTop; 不使用这种写法
var st = document.body.scrollTop || document.documentElement.scrollTop 推荐

overflow 的padding-bottom 缺失现象
.box { width: 400px; height: 100px; padding: 100px 0 ; overflow: auto;}
除了chrome 浏览器外，滚动体的下面padding-bottom 自动消失
在这里插入图片描述
导致：不一样的scrollHeight （元素内容高度）