前端三件套之css(4) 边框调整和浮动

目录

边框属性

边框调整

背景与透明度

背景

透明度

溢出

继承性

浮动 

浮动范围

高度塌陷

---

边框属性

边框属性格式

选择器 {
    width apx;/*a表示数字*/
    height: apx;
    border: apx 线形 颜色;
    /* 线形可以设置直线,虚线,点状线或者双线等 */
}

例如：

#a {
    width: 150px;
    height: 150px;
    border: 1px solid red;
    /*其中,solid表示直线
    dotted表示点状线,
    dashed表示虚线,
    doulie表示双线*/
}

当然直接打border是全部四周都会变化。像以下代码段，就是可以只调整一边而不是全部

#a {
    border-top: 4px solid black;
    border-bottom: 4px dashed black;
    border-left: 4px dotted black;
    border-right: 4px double black;
}

边框调整

还是刚才这个图，在网页中按F12打开终端，选择第一个容器。

按照刚才的代码，我们只设置了容器大小和边框属性。所以在终端中也只显示这两点。

内边距存在的意义就是让边框和容器中的问题之间有一段距离。

而外边距存在的意义就是让两个相邻容器之间存在一定的距离。

#a {
    margin: 2px;
    padding: 3px;
}

 当然，内外边距也是有top，bottle等属性。

如果说要给4个不同方向设置不同的数据，但是4行代码又太长，于是就可以有以下简写：

#a {
    margin: 10px;/*代表4个方向均为10px*/
    margin: 10px 10px;/*第一个代表上下，第二个代表左右*/
    margin: 10px 10px 10px;/*上 左右 下 */
    margin: 10px 10px 10px 10px;/*上 右 下 左*/
}
/*当然，对padding也同样适用*/

背景与透明度

背景

用图片当作背景代码：

background-image:url(xxx);
/*xxx表示图片地址*/

但是我们可以看到，如果是将图片作为背景图，那么它会有一个平铺的效果，如果说，我们只想它出现一个。那么，可以这样打代码：

background-repeat: no-repeat;

background-repeat: repeat-x;/*水平平铺*/
background-repeat: repeat-y;/*垂直平铺*/

 

可是这样一来，背景图是默认在左上角的，因此可以打以下代码来调整位置。

background-position: 200px 100px;
/*表示向右移动200px 向下移动100px*/

 

然后不仅如此，还可以直接打 left rignt top bottom center来调整位置。

移动我们了解了，可是图片大小我们发现远远比边框小。所以甚至还可以更改图片大小

以及可以更改背景图片颜色（我这个不是透明图，所以颜色更改没有） 

background-color: red;
/*将图片背景颜色更改为红色*/

当然，和内外边距一样，背景图这么多行代码，其实也是可以压缩成一句话。

background: 颜色 图片地址 是否平铺 移动位置 / 图片大小。
/*注意，移动位置是由两个px的，而图片大小也是两个px
为了不搞混，因此他们之间由一个"/"号 */

 

透明度

背景图是默认不透明的，也就是说透明度为1(100%)

opacity:0.5;
/*更改透明度为50%*/

溢出

当<div>标签里的文字过多，以至于超过容器的容量的时候，就会发生溢出。

overflow:hidden;/*隐藏溢出*/
overflow:scroll;/*加一个滚动条*/
overflow:auto;/*自动添加合适的滚动条*/

  

继承性

所谓继承性，还是那一个概念，父子标签。

也就是说，有些代码，父亲标签打了之后，儿子乃至孙子等等标签都会自动有这些标签。

于是这样以来，就可以减少代码的输入量。

以下是所有标签都有的继承代码

visibility cursor

以下是内联元素继承（也就是不用css选择器打，直接打在标签里的）

letter-spacing  word-spacing  white-space  line-height
color  font  font-family  font-size  font-style  font-variant
font-weight  text-decoration  text-transform  direction

以下是块状元素继承(如div，p标签)

text-index  text-align

以下是列表元素继承(li标签）

list-style  list-style-type  
list-style-position  list-style-image

以下是表格元素继承(table标签）

border-collapse

 但是<a>标签，<img>标签，<audio>标签是不存在继承性的

浮动 

浮动可以理解为板块容器的动态移动。

浮动代码：

float:left/*代表左浮动*/
float:right/*代表右浮动*/

举个例子：先打3个容器

 然后我们对id为''b''的容器进行浮动。

 浮动技巧是可以改变容器的位置的，甚至可以巧妙利用浮动更改原先三个容器的顺序。

浮动范围

浮动是不会溢出的，也就是说如果有父子容器存在，父容器有多大，子容器浮动的范围就有多大。

但是，以上例子都是极端性的，也就是每个容器大小相同，那不相同又会出现什么效果呢？

如图，设置的全往右浮动，当浮动板块撞到其他板块即停止。当往上补位的间隔容不下，那么就不会往上补位了。 

脱离文档流

浮动会引发元素脱离文档流。

其实浮动的原理如下：

 也就是说，当元素浮动之后，它实际上是已经脱离原父元素了的，所以在视觉上看着是被压着了，他原来的空间已经不存在，这种问题就叫脱离文档流。

高度塌陷

高度塌陷是针对于父亲容器没有高度的时候，这时候父亲容器的高度就是所有子容器高度之和。

但是一旦浮动，我们就可以发现，父亲容器的高度不再取决于子容器，而是变为0了（这个现象就叫高度塌陷）（如果有高度，那橙色容器应该在绿色下方）

其原理是：浮动引发了元素脱离文档流，由于上面三个绿色div已经脱离原本大的div(class为a)，加上a没有高度，所以橙色的div会自动上去补位置。

解决高度塌陷

方法一

这是最笨的方法，既然父容器高度塌陷是由于没有高度，那么给父容器设置一个高度即可解决高度塌陷。

方法二

方法二要利用到之前的溢出。

也就是在父容器div中加一句：

.father {
   overflow: hidden; 
}

其原理基于BFC，由于overflow: hidden会使该容器触发BFC规则，使得该容器元素计算高度时，也会计算浮动子容器高度，由此解决高度塌陷。(见BFC规则6）

但是此方法有个问题就是溢出被隐藏了，要是div内有东西是溢出的，那么溢出部分将会被隐藏。

效果图如下：

方法三

方法3也叫万能清除浮动法。也是最常用的清除浮动的方法。

其方式是：再在最后加上一个div，可以不用设置高度，但是在这个div里设置：清除浮动。

/* 清除浮动 */
#s4 {
    clear: both;
}

效果图如下：

当然，为了方便，可以在css中写上这么一句：

/* 万能清除浮动法 */
.clear-fix::after {
    content: "";
    display: block;
    clear: both;
}

谁要解决高度塌陷，就在后面加一个这个类名：clear-fix 就行了。