【面筋烧烤手册】CSS

文章目录

基础
进阶

基础

1.CSS引入方式

内联样式

<div style="100px;height:100px;"> </div>

内部样式

<head>
<style>
    div{
        100px;
        height:100px;
    }
</style>
</head>

外部样式
link: 用于引入其他文件；

<link rel="stylesheet" type="text/css" href="css/html.css" >

属性：

rel 引入文件和当前文件的关系stylesheet
href 引入文件的路径（地址）
type 引入文件的类型

2.CSS的引入方式的优先级

优先级问题

内联样式 > 外部样式
内联样式 > 内部样式

如果选择器优先级相同，则后加载的生效
如果优先级不同，则按选择器优先级

3.CSS的选择器

权重由低到高排列

继承

//如
<style>
	.father {
    	font-size: 14px;
	}
</style>
<body>
	<div class="fahter">
		<p>我是p标签</p>
	</div>
</body>

上面的案例我给 class 为 father 的元素设置了字体大小为14px,则其子元素的字体大小也为14px,这就是继承。（并不是所有的css属性都可以继承给子元素,具体的能继承的属性请移步)

通配符选择器

//页面上所有的元素都有这个属性
*{
    font-size: 14px;
}

标签名选择器

直接通过标签名

div {
	 100px;
}

类选择器

1.在标签内部设置一个 class 名称

2.在css样式中使用. + class名称 + { }设置样式

. +class 名称 + { }

//如
</style>
.father {
   	 100px;
   	height: 100px;
   	background: red;
}
</style>
<body>
	<div class="father"></div>
</body>

ID选择器

# + id名称 +{ }

//如
</style>
#father {
   	 100px;
   	height: 100px;
   	background: red;
}
</style>
<body>
	<div id="fahter"></div>
</body>

内联选择器

<div style=" 100px"></div>

后代选择器（包含选择器）

<style>
	.father p {
       color: red; 
	}
</style>

<body>
    <div class="father">
        <div>
        	<p>我是p标签</p>
        </div>
        <p>我是p标签</p>
    </div>
</body>

子代选择器

只选择直系的后代 .class_1 > p { }

<style>
	.father>p {
       color: red; 
	}
</style>

<body>
    <div class="father">
        <div>
        	<p>我是p1</p>
        </div>
        <p>我是p2</p>
    </div>
</body>

只有class为father的直系后代的p标签的字才会变为红色,也就是p2

相邻兄弟选择器

用法：选择器1+选择器2{ }

俩个选择器必须是兄弟关系(也就是要有同一个父级)
俩个选择器必须是紧挨着的
选择的是相连接的后面的兄弟

<style>
	.item2 + li {
        font-weight:bold;
        color: red;
    }
</style>
<body>
    <div>
        <ul>
          <li>List item 1</li>
          <li class="item2">List item 2</li>
          <li>List item 3</li><!--红色-->
          <li>List item 4</li>
        </ul>
        <ol>
          <li>List item 1</li>
          <li class="item2">List item 2</li>
          <li>List item 3</li><!--红色-->
          <li>List item 4</li>
        </ol>
      </div>
</body>

同级元素通用选择器

用法：选择器1~选择器2{ }
注意：

俩个选择器之间需要有相同的父级
选择器2必须处于选择器1的后面
选择具有相同的父级，并且加载顺序处于后面的内容

<style>
	.item2 ~ li {
        font-weight:bold;
        color: red;
    }
</style>
<body>
    <div>
        <ul>
          <li>List item 1</li>
          <li class="item2">List item 2</li>
          <li>List item 3</li><!--红色-->
          <li>List item 4</li><!--红色-->
        </ul>
        <ol>
          <li>List item 1</li>
          <li class="item2">List item 2</li>
          <li>List item 3</li><!--红色-->
          <li>List item 4</li><!--红色-->
        </ol>
      </div>
</body>

上面这个选择器会把列表中的class为item2的后面的列表项变为红色。第一个列表项和item2本身不受影响。

可以看到选择器 +和~的区别就是+只针对一项元素,而~可能是多项的。

属性选择器

用法：

[属性名称] + { }

[属性名称 = 属性值] + { }

<style>
    [blue] {
        color: blue;
    }
    input[type="text"] {
        width:150px;
        display:block;
        margin-bottom:10px;
        background-color:yellow;
        font-family: Verdana, Arial;
     }
 </style>
 <body>
 	<input type="text" />
 	<ul>
        <li blue>List item 1</li><!--蓝色-->
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
    </ul>
 	
 </body>

只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择

群组选择器

选择器1,选择器2, 选择器3… 选择器n{
某些相同的样式
}

.div1, .div2, .div3{
	width:300px;
	height:300px;
}

权重和优先级

权重分为四级，分别是：

代表内联样式，如style=“xxx”，权值为 1000；
代表 ID 选择器，如#content，权值为 100；
代表类、伪类和属性选择器，如.content、:hover、[attribute]，权值为 10；
代表元素选择器和伪元素选择器，如div、p，权值为 1。

通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为 0。

4.overflow属性

规定超出范围的内容如何进行显示,不可继承

div{
  	150px;
  	height:150px;
  	overflow:scroll;
}

visible
超出部分不做处理,内容不会被修剪,会呈现在元素框之外（默认样式）
scroll
让超出部分以滚动条的方式来显示；
hidden
让超出部分隐藏
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit
规定应该从父元素继承 overflow 属性的值

overflow-x和overflow-y

overflow实际上包含的是x 轴和y轴俩个方向,也可以将俩个方向分别设置

div {
    width: 200px;
    height: 200px;
    overflow-x: scroll;
}

overflow 在不同浏览器中呈现方式不一样，有兼容性问题

5. float属性

作用：设置元素浮动

5.1 属性值

left 左浮动

right 右浮动

none 不浮动

5.2 浮动的特性

浮动会使元素脱离“文档流”；（和绝对定位一样）
文档流：我们页面布局排列的时候所在一个层级，所有基础内容的布局全部都是处于这一层级当中

浮动会使元素脱离文档流“半级”（压住属性压不住内容和绝对定位的区别）

浮动会使没有设置宽度的元素，由内容来撑开宽度，宽度为父级元素的宽度；（和绝对定位一样）

浮动会使内联元素重新支持宽高；（和绝对定位一样）

浮动会使内联元素正常显示padding和margin；（和绝对定位一样）

浮动是针对它的下一个元素生效，对前一个对象无影响；

浮动的停止：1.浮动元素遇到父级的边界会停止；2.浮动元素碰到相同浮动方向的元素

可以设置clear属性来清除浮动

5.3 清除浮动

1.在浮动元素的下一个元素设置clear属性

clear: 属性

left 清除左浮动

right 清除右浮动

both 清除左右俩边的浮动

none 不清除浮动

2.清除浮动第二个方法：

在要清除浮动的标签加上:after{ } 原因是clear针对浮动元素的下一个元素在父级后面加一个空的元素并清除他的浮动就可以解决父级塌陷的问题；

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

例：

<style>
	.father{
        width:1000px;
        border:5px solid black;
	}
    .son_1{
        width:200px;
        height:200px;
        float:left;
    }
    .son_2{
        width:200px;
        height:200px;
        float:left;
    }

    .father:after{
        content"";
        display:block;
        clear:both;
    }
</style>
<body>
    <div class="father">
        <div class="son_1"></div>
        <div class="son_1"></div>
    </div>
</body>

3.其他清除浮动方法：

给父级float:left; 弊端：会影响后面的元素如：给父级height:500px; 子级高度改变父级也要改变

给父级overflow:hidden; 弊端：不同浏览器会有兼容性问题

给父级display:inline-block; 弊端：改变了父级原本的盒子类型

6. ! important

!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。

语法格式 { cssRule !important }，

即写在定义的最后面，例如：

.box{
	color:red;!important;
}
<body>
	<div class="box" style="color: blue;">I'm a box</div><!--最终显示的还是红色-->
</body>

在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级，也就是相当于写在最下面。

7.定位

在这里插入图片描述

z-index

作用：设置内容在z轴上的数值,也就是设置元素的层级,这个数值不限制正负，但是负数会导致用户事件无法被传递（所有不要设定为负数）； z-index未设置时默认为auto

.box{
    z-index: 100;
}

8.BFC

BFC 是什么？

BFC (Block Formatting Contexts) 即块级格式化上下文，从样式上看，它与普通的容器没有什么区别，但是从功能上，BFC 可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素，使到它可以包含浮动元素，从而防止出现高度塌陷的问题

如何触发 BFC

触发 BFC 的条件
- 浮动元素，float 除 none 以外的值
- 绝对定位元素，position（absolute，fixed）
- display 为以下其中之一的值 inline-blocks，table-cells，table-captions
- overflow 除了 visible 以外的值（hidden，auto，scroll）
在 CSS3 中，BFC 叫做Flow Root，并增加了一些触发条件：
- display 的 table-caption 值
- position 的 fixed 值，其实 fixed 是 absolute 的一个子类，因此在 CSS2.1 中使用这个值也会触发 BFC ，只是在CSS3 中更加明确了这一点

BFC布局规则

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

BFC的作用及原理

自适应两栏布局

 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布局规则第3条：
- 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触
根据BFC布局规则第四条：
- BFC的区域不会与float box重叠
我们可以通过通过触发main生成BFC，来实现自适应两栏布局

.main {
    overflow: hidden;
}

当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下：

清除内部浮动

.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;
}

防止垂直 margin 重叠

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

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

两个p之间的距离为100px，发送了margin重叠
根据BFC布局规则第二条：
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了

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

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

总结

其实以上的几个例子都体现了BFC布局规则第五条
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理

进阶

1.如何居中 div？

水平居中：给 div 设置一个宽度，然后添加 margin:0 auto 属性

div {
  width: 200px;
  margin: 0 auto;
}

水平居中，利用 text-align:center 实现

.container {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

让绝对定位的 div 居中

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /*方便看效果*/
}

水平垂直居中一

/*确定容器的宽高宽500高300的层设置层的外边距div{*/
position: absolute;/*绝对定位*/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px00-250px;/*外边距为自身宽高的一半*/
background-color: pink;/*方便看效果*/
}

水平垂直居中二

/*未知容器的宽高，利用`transform`属性*/
div {
  position: absolute; /*相对定位或绝对定位均可*/
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; /*方便看效果*/
}

水平垂直居中三

/*利用flex布局实际使用时应考虑兼容性*/
.container {
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /*方便看效果*/
}

水平垂直居中四

/*利用text-align:center和vertical-align:middle属性*/
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}

.container::after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
  white-space: normal;
  vertical-align: middle;
}

回答：

一般常见的几种居中的方法有：

对于宽高固定的元素

（1）我们可以利用margin:0 auto来实现元素的水平居中。

（2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水
平和垂直方向上的居中。

（3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素
的中心点到页面的中心。

（4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素
的中心点到页面的中心。

（5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对
齐，然后它的子元素也可以实现垂直和水平的居中。

对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

2.伪类伪元素

::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。

伪类与伪元素的区别

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句
话中的第一个字母，或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的
元素时，我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::be
fore来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览
器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的W3C规范并未对此进行
特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

详细资料可以参考：
《总结伪类与伪元素》

3.请解释一下 CSS3 的 Flex box（弹性盒布局模型），以及适用场景？

4.margin 和 padding 分别适合什么场景使用？

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干。
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离。

何时应当使用margin：
•需要在border外侧添加空白时。
•空白处不需要背景（色）时。
•上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

何时应当时用padding：
•需要在border内测添加空白时。
•空白处需要背景（色）时。
•上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

5.上下固定中间自适应布局

利用绝对定位实现

body {
  padding: 0;
  margin: 0;
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background: red;
}

.container {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
  background: green;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: red;
}

利用flex布局实现html,
body {
  height: 100%;
}

body {
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: column;
}

.header {
  height: 100px;
  background: red;
}

.container {
  flex-grow: 1;
  background: green;
}

.footer {
  height: 100px;
  background: red;
}

详细资料可以参考：
《css 实现上下固定中间自适应布局》

6.两栏布局的实现？

7.css 三栏布局的实现？

8.实现一个宽高自适应的正方形

/*1.第一种方式是利用vw来实现*/
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

/*3.第三种方式是利用子元素的margin-top的值来实现的*/
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}

.square::after {
  content: '';
  display: block;
  margin-top: 100%;
}

《自适应正方形 demo 展示》

9.实现一个三角形

<!DOCTYPE html>
<html>

<head>
  <title>三角形</title>
  <style type="text/css">
  /*三角形的实现原理是利用了元素边框连接处的等分原理。*/
    .box1,
    .box2,
    .box3,
    .box4 {
      height: 0px;
      width: 0px;
      float: left;
      border-style: solid;
      margin: 10px;
    }

    .box1 {
      /* 等腰直角 */
      border-width: 100px;
      border-color: tomato transparent transparent transparent;
    }

    .box2 {
      /* 等边 */
      border-width: 100px 173px;
      border-color: transparent tomato transparent transparent;
    }

    .box3 {
      /* 等腰 */
      border-width: 100px 80px;
      border-color: transparent transparent tomato transparent;
    }

    .box4 {
      /* 其他 */
      border-width: 100px 90px 80px 70px;
      border-color: transparent transparent transparent tomato;
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</body>

</html>

《三角形 demo 展示》

10.一个自适应矩形，水平垂直居中，且宽高比为 2:1

/*实现原理参考自适应正方形和水平居中方式*/
.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;

  width: 10%;
  height: 0;
  padding-top: 20%;
  background: tomato;
}