什么是BFC？
看成元素的一种属性
https://blog.csdn.net/sinat_36422236/article/details/88763187?spm=1001.2014.3001.5506
块级格式化上下文，是一个独立的渲染区域，规定了内部的Block-level Box如何布局
元素拥有BFC，可看作是隔离了的独立容器，容器里的元素不会影响外面的元素
块级元素：block-level element，元素的
display为block、list-item、table时，该元素将成为块级元素块级盒子：block-level box，由块级元素生成。一个块级元素至少会生成一个块级盒子，但也有可能生成多个（例如列表项元素）
如何创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
margin重叠
同一个BFC的两个相邻的Box会发生margin重叠
我们可以设置，两个不同的BFC：把第二个p用div包起来，然后激活它使其成为一个BFC
<style>
p {
margin: 30px;
}
div{
overflow: hidden;
}
</style>
<body>
<p>看看我的 margin是多少</p>
<div>
<p>看看我的 margin是多少</p>
</div>
</body>
左接触
盒子左边相互接触，即使浮动也是如此
让right单独成为一个BFC
添加overflow: hidden 与否
<style>
.left {
width: 100px;
height: 150px;
float: left;
background: rgb(139, 214, 78);
}
.right {
/* overflow: hidden; */
height: 300px;
background: rgb(170, 54, 236);
}
</style>
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
父坍塌
给父节点激活BFC
<style>
.par {
border: 5px solid rgb(91, 243, 30);
width: 300px;
/* overflow: hidden; */
}
.child {
border: 5px solid rgb(233, 250, 84);
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
清除浮动
https://segmentfault.com/a/1190000004237437
指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面
- 利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法
.outer:after {
display: block;
visibility: hidden;
clear: both;
content: "";
}
inline、block、inline-block
https://blog.csdn.net/sinat_34719507/article/details/53512509
display:block：将元素显示为块级元素 <div>, <p>, <h1>, <form>, <ul> 和 <li>
总是在新行上开始
宽度缺省是它的容器的100%，除非设定一个宽度
高度，行高以及顶和底边距都可控制
display:inline：将元素显示为内联行内元素 <span>, <a>, <label>, <input>, <img>, <strong> 和<em>
和其他元素都在一行上
宽度就是它的文字或图片的宽度，不可改变
高，行高及顶和底边距不可改变；
display:inline-block：将对象呈递为内联块级对象 a元素 可设置宽高
将对象呈现为inline对象，但是对象的内容作为block对象呈现；之后的内联对象会被排列在同一行内
CSS实现垂直居中的常用方法
https://www.cnblogs.com/yugege/p/5246652.html
设置div的top，调整垂偏移量
通过设置margin: 0 auto实现水平居中
<style>
.content {
width: 300px;
height: 300px;
background: rgb(252, 226, 180);
margin: 0 auto;
border: 3px solid rgb(112, 233, 193);
/*脱离文档流*/
position: relative;
/*偏移*/
top: 50%;
/* 第一种方式 */
/* margin-top: -150px; */
/* 第二种方式 */
/* 使得div向上平移（translate）自身高度的一半(50%) */
transform: translateY(-50%);
}
</style>
<body>
<div class="content"></div>
</body>
弹性布局（flex）
<style>
body {
display: flex;
/*定义body的元素垂直居中*/
align-items: center;
/*定义body的里的元素水平居中*/
justify-content: center;
}
.content {
width: 300px;
height: 300px;
background: rgb(250, 234, 206);
}
</style>
<body>
<div class="content"></div>
</body>
CSS flexbox 布局
display:flex
flex-direction：row
justify-content 水平
align-items 竖直
justify-content: space-evenly; /* 更加紧凑 */
justify-content: space-around;
单行文本水平垂直居中
<style>
#hoho {
height: 100px;
/* 行高等于高度 */
line-height: 100px;
/* 文本居中 */
text-align: center;
}
</style>
<div>
<div id="hoho">hoho</div>
</div>
行高为100px 就是文字中心点距离顶部和底部各位50px 所以行号等会高度 文字就会垂直居中，测试如下
<style> #hoho { border: 3px solid rgb(112, 233, 193); height: 100px; /* 行高等于高度 */ line-height: 100px; /* 文本居中 */ text-align: center; } #asd { border: 3px solid rgb(112, 233, 193); }</style><div> <div id="hoho"> hoho haha <br> <div id="asd"> asd </div> </div></div>
引入css的方式有几种?
引入的三种方式：
行内样式/内部样式/外部样式
行内样式
<p style="color:red;font-size:20px;">内容</p>
内部样式
<style type="text/css">
@import "css.css" /*或者： @import url(css.css)*/
或者
color：red；
</style>
外部样式
<link href="css.css" rel="stylesheet" type="text/css">
选择器优先级
选择器的权值越大，优先级越高
基本选择器的权值由小到大分别为：通配符选择器（0）< 标签选择器（1）<class选择器（10）< id选择器（100）<行内样式（1000）
- 1,0,0,0,0：
!important - 0,1,0,0,0：
行内样式 - 0,0,1,0,0：
ID选择器 - 0,0,0,1,0：
类选择器、伪类选择器、属性选择器 - 0,0,0,0,1：
标签选择器、伪元素选择器 - 0,0,0,0,0：
通配选择器、后代选择器、兄弟选择器
如果选择器的权值相同，后写的内容会覆盖先写的内容
css盒模型？
盒模型又称框模型（Box Model）
在页面布局中，将页面元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范
包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素
css盒模型的本质是一个盒子，封装周围的HTML元素
CSS 选择器
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E9%80%89%E6%8B%A9%E5%99%A8
基本选择器：通配符选择器、标签选择器、类选择器、id选择器
基本选择器权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）
复合选择器：群组选择器、后代选择器、父子选择器、交集选择器、伪类选择器
div,p div p div>p div.box1
伪类( : ) 添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色
伪元素( :: ) 一个附加至选择器末的关键词，允许你对被选择元素的**特定部分修改样式**
选择器列表 A, B
指定同时选择A 和 B元素。这是一种选择多个匹配元素的分组方法
<style>
h1, p {
color: red;
}
</style>
<div>
<h1>hoho</h1>
<p>jaja</p>
<div>hehe</div>
<span>hehe</span>
</div>
相邻兄弟选择器
相邻兄弟选择器 (+) 当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中
兄弟，往后挪挪 好咧~
<style>
h1 + p {
color: red;
}
</style>
<div>
<h1>hoho</h1>
<p>jaja</p>
<div>hehe</div>
<span>hehe</span>
</div>
普通兄弟选择器
位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素
<style>
h1 ~ span {
color: red;
}
</style>
<div>
<h1>hoho</h1>
<p>jaja</p>
<div>hehe</div>
<span>hehe</span>
</div>
子选择器
A > B 指定B选择的元素是A选择的元素的直接子元素
后代组合器
A B 指定B选择的元素是A选择的元素的后代，但不一定是直接子代
<div>
<ul>
<li>ul 中的第一个</li>
<li>other</li>
<li>other</li>
</ul>
<li>div 中的第一个</li>
<li>asd</li>
<li>qwe</li>
<div>
<li>div 中的 div 中的第一个</li>
<li>sad</li>
<li>qwe</li>
</div>
</div>
div > li
div li 更深层次
::after
::after (:after)：创建一个伪元素，作为已选中元素的最后一个子元素
<style>
.exciting-text::after {
content: "<- 让人兴兴兴奋!";
color: green;
}
.boring-text::after {
content: "<- 无聊!";
color: red;
}
</style>
<div>
<p class="exciting-text">这是些有趣的文字</p>
<p>这是不无聊也不有趣的文字</p>
<p class="boring-text">这是些无聊的文字</p>
</div>
::first-letter
::first-letter会选中某 block-level element（块级元素）第一行的第一个字母，如首字母变大
<style>
p::first-letter {
font-size: 130%;
}
</style>
<p>这是些有趣的文字</p>
:first-of-type 和 :first-child 区别
https://www.cnblogs.com/2050/p/3569509.html
:first-child：实际第一个
:first-of-type：类型第一个 - 更加宽泛
<style>
/* li:first-of-type { */
li:first-child {
background: pink;
}
</style>
<div>
<ul>
<li>ul 中的第一个</li>
<li>other</li>
<li>other</li>
</ul>
<li>div 中的第一个</li>
<li>asd</li>
<li>qwe</li>
<div>
<li>div 中的 div 中的第一个</li>
<li>sad</li>
<li>qwe</li>
</div>
</div>
:first-child <li>div 中的第一个</li>是最外层<div>的第二个子元素，所以匹配不到
:first-of-type <li>div 中的第一个</li>是最外层<div>所有类型为<li>的第一个子元素，所以匹配得到
定位
relative 相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移
absolute 绝对定位是相对往上遍历第一个包含position:relative/absolute的祖先节点定位，若无此节点则相对<body>定位
margin
- 当只指定一个值时，该值会统一应用到全部四个边的外边距上。
- 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
- 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
- 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。
EM
相对于font-size的大小，浏览器默认16px
box-shadow
在元素的框架上添加阴影效果
/* x偏移量 | y偏移量 | 阴影颜色 值越大 范围越大但是颜色越浅 */box-shadow: 20px 5px 5px pink;
box-sizing
box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。
content-box：宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）
border-box：尺寸计算公式：width = border + padding + 内容的宽度 | height = border + padding + 内容的高度
布局方式
类似于后端管理系统的布局
<style>
* {
margin: 0px;
padding: 0px;
}
.outer {
display: flex;
height: 100vh;
}
.aside {
background-color: rgb(222, 240, 181);
width: 200px;
}
.content {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.header {
height: 50px;
background-color: rgb(170, 196, 231);
}
.main {
height: 100%;
background-color: rgb(140, 213, 226);
}
.footer {
height: 50px;
background-color: rgb(87, 84, 84);
}
</style>
<body>
<div class="outer">
<div class="aside">aside</div>
<div class="content">
<div class="header">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
</div>
</body>
首先，最外层 outer 给它设置高度为100vh，vh就是当前屏幕可见高度
并且将 outer 设置为flex 布局，于是它将 aside、content 分成左右两侧，你给 aside 设置一个宽度，然后 content 的宽度设置为 100%，代表占据剩下的宽度
然后content 也是 flex 布局，不过设置flex-direction: column; 就将 header、main、footer 分成垂直上中下三个部分，同理，给上下设置高度为50px， main 设置为100%，代表占据剩下所有
css中，有哪些方式可以隐藏页面元素？区别?
https://github.com/febobo/web-interview/issues/98
- display:none 元素在页面上将彻底消失 会导致浏览器的重排和重绘
- visibility:hidden 仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘
- opacity:0 元素也是隐藏的 不会引发重排，一般情况下也会引发重绘
- 设置height、width模型属性为0
- position:absolute
- clip-path
4039
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
