初级前端知识点整合-CSS部分

时间 2020-03-10

标签初级前端知识整合 css 部分栏目 CSS 繁體版

原文原文链接

1.CSS实现水平居中：
行内元素：text-align:center;
块级元素：div{width:100px;height:100px;margin:0 auto};css

CSS实现垂直居中：
子元素为单行文本的状况：div{height:100px;line-height:100px};
块级元素：html

div{
    height:100px;
    width:100px;
    position: relative;
    top: 50%;
    margin-top:-50px;  //设置为元素高度的一半，而且是负值
}

2.rem与em的区别：
rem是相对于根元素html的font-size而变化，而em是相对于父元素的font-size而变化css3

3.盒子模型：
<1>标准盒模型（W3C盒模型）：
box-sizing为content-box（默认值）
定义的宽度 width = content
元素显示的实际宽度 = width+padding+borderweb

div{
    width: 100px;
    border: 10px;
}

那么这个div盒子显示的宽度为110px。浏览器

<2>怪异盒模型（IE盒模型）：
box-sizing为border-box
定义的宽度width = content+padding+border
元素显示的实际宽度就是width。ide

4.Link和@import导入css的区别：布局

<style>
    @import url(css文件路径);
</style>
<link href="css文件路径" rel="stylesheet" type="text/css" />

最主要的区别在于，link引入的css会和页面同步加载，而@import引入的css则会等到页面加载完毕以后开始加载，因此@import会致使页面闪烁；
link除了能够导入css以外，还能够定义RSS、REL等。而@import只能用于加载CSS。
link可使用JS动态引入（JS建立DOM元素添加特性），而@import则不行；
link最大限度支持并行下载，@import过多嵌套致使串行下载，出现FOUC（flash of unstyled content）。flex

5.多行元素的文本省略号：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;优化

6.CSS优化：
选择器合并，共同的属性内容提出来，压缩空间和资源开销；
精准样式，例如能使用padding-left就不使用padding；
雪碧图，减小请求；
压缩css文件大小，减少资源下载负担。动画

7.css雪碧图:
概念：将多个图片拼接到一个图片中。经过background-position:-x,-y; 和元素尺寸调节须要显示的背景图案。
优势：减小HTTP请求次数和图片大小，提升网页加载速度；更换背景图片方便，只需移动背景图片位置便可。
缺点：图片合并以及维护麻烦，修改一个图片可能须要从新布局整个图片和样式。

8.display:none和visibility:hidden的区别和联系：
联系：都能使元素看不见；
区别：
<1>display:none 会让元素从渲染树中消失，渲染的时候不占用空间；而Visibility:hidden仍会占用空间，只是元素不可见而已；
<2>display:none是非继承属性的，元素消失伴随着子孙节点消失，修改子孙节点的属性也没法显示；而visibility:hidden实继承属性，经过设置visibility:visible可让子孙节点显示；
<3>修改常规流中元素的display一般会形成文档重排，而修改visibility属性只会形成本元素重绘。

9.FOUC:(flash of unstyled content)用户定义样式表在加载以前，浏览器使用默认样式显示文档，用户样式加载渲染完以后再从新显示文档，形成页面的闪烁简称FOUC；
把样式表放到文档的head中能够避免FOUC。

10.建立块级格式化上下文（BFC）及其做用：
<1>建立BFC: ·根元素；

·浮动元素float不为none；
        ·绝对定位元素，position的值为absolute或者fixed；
        display值为inline-block、table、flex之一；
        overflow不为visible。(hidden/none/auto)

<2>做用：能够包含浮动元素；

不被浮动元素覆盖；
    防止父子元素的margin折叠。

<3>BFC的布局规则：

·内部的BFC会在垂直方向，一个接一个的放置；
·BOX垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠；
·每一个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，不然相反）。即便存在浮动也是如此；
·BFC的区域不会与float box重叠；
·BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此。
·计算BFC高度的时候，浮动元素也参与计算

<4>BFC的做用及原理：
(1)自适应两栏布局

body{
    width: 300px;
    position:relative;
}
.aside{
    width:100px;
    height:150px;
    float:left;
    background: #f66;
}
.main{
    height:200px;
    background:#fcc;
}

<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

根据BFC布局规则第三条：

每一个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。

因此，虽然存在浮动元素aside，但main的左边依然会与包含块的左边相接触。
根据BFC布局规则第四条：

BFC的区域不会与float box重叠。

因此能够经过触发main生成BFC，来实现自适应两栏布局。当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。所以会根据包含块的宽度，和aside的宽度，自动变窄。效果以下：

.main{
    overflow:hidden;   //给.main加上这个属性使得其建立BFC，或者前面任意所说的建立BFC方法都行
}

(2)清除内部浮动：

.par {
    border: 5px solid #fcc;
    width: 300px;
 }
 
.child {
    border: 5px solid #f66;
    width: 100px;
    height: 100px;
    float: left;
}

<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

根据BFC布局规则第六条：

计算BFC的高度时，浮动元素也参与计算

为达到清除内部浮动，咱们能够触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

.par {
    overflow: hidden;
}

(3)防止margin重叠（坍塌）

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align: center;
        margin: 100px;
    }
</style>

<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

根据BFC布局规则第二条：

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

咱们能够在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align: center;
        margin: 100px;
    }
</style>

<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

11.清除浮动的几种方式：
<1>使用空标签清除浮动clear:both（缺点：增长无心义的标签）

<div style="clear:both"></div>   //行内元素无效，必需要用块级元素

<2>overflow:auto(缺点：内部元素宽高超过父级div时会出现滚动条)
<3>用::after伪元素清除浮动（推荐）

#content:after{                 //清除浮动须要在浮动元素后面，因此给父标签添加伪元素
    clear:both;                 
    content:"";
    display:block;
}

<div id="content">
     <div class="left">aaa</div>
     <div class="left">bbb</div>
     <div class="left">ccc</div>
    //::after    会在这里添加伪元素
 </div>

12.为何要初始化CSS样式：
由于浏览器之间的兼容问题，不一样浏览器对有些标签的默认值不一样，若是没有对CSS初始化每每会出现浏览器页面之间的显示差别。

css样式初始化：

//最简单的可是最耗资源的方法
* {
    padding: 0;
    margin: 0;
    border: 0;
}

/\* 全局样式 \*/
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{
    margin:0;padding:0;border:0;
}
body{
    background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";
}
ul,ol{
    list-style-type:none;
}
select,input,img,select{
    vertical-align:middle;
}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

13.css3新特性：
·border-radius:圆角
·gradient:渐变
·animation:动画
·transform:旋转、缩放、移动或倾斜
·transition:过渡
·shadow:阴影
·新增各类CSS选择器

14.css3新增伪类：
·p:first-of-type:某元素下的第一个子元素是P元素，选择全部这类元素的P元素
·p:last-of-type:某元素下的最后一个子元素是p元素，选择全部这类元素的p元素
·p:only-of-type:某元素下只有一个p元素，选择全部这类元素的p元素
·p:only-child:某元素下只有一个子元素而且是p元素，选择全部这类元素的p元素
·p:nth-child(2):某元素下第二个子元素是p元素，选择全部这类元素的p元素
·p:after:在p元素以后插入内容，也能够用来作清除浮动
·p:before:在p元素以前插入内容
·input:enabled:选择每一个启用的input元素
·input:disabled:选择每一个禁用的input元素
·input:checked:选择每一个被选中的input元素

15.css选择器权重：
!important>行内样式>#id>.class>元素和伪元素>*>继承>默认

16.position的值：
·absolute：生成绝对定位元素，相对于static定位之外的第一个父元素进行定位；
·fixed：生成绝对定位元素，相对于浏览器窗口进行定位；
·relative：生成相对定位元素，相对于其正常位置进行定位；
·static：默认值，没有定位，元素出如今正常的文档流中；
·inherit：规定从父元素继承position的值。

17.display：inline-block何时不会显示间隙：
移除空格（代码之间）、使用margin负值、使用font-size：0、letter-spacing、word-spacing

18.