前端基础03

最新推荐文章于 2025-09-10 11:07:46 发布

转载最新推荐文章于 2025-09-10 11:07:46 发布 · 57 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangkang894/p/5705845.html

文章标签：

#前端 #ViewUI

1.1 复习

1.1.1 相邻的行内块元素之间的间距问题

只能用浮动来解决(脱标)

1.1.2 边框半径 border-radius

有四值，左上，右上，右下，左下

如果只设置一个值的话，那么四个值都起作用，但是有一个峰值，就是当边框半径达到宽度或是高度的一半的时候，会将元素变成圆形或是椭圆形。

1.1.3 块级元素的水平垂直居中问题

我们可以先让元素定位(绝对定位)，水平或是垂直方向到达50%的位置，然后再让元素回退自己身位的一半，这样才能达到水平和垂直都居中的效果。

定位了的元素只有margin-left,没有margin-right

1.1.4 清除浮动

有时候在我们布局的时候，不方便给父盒子设置高度，父盒子的高度是靠子盒的高度撑起来的，但是如果子盒子浮动了之后，父盒子的高度就变为0了，就相当于在标准流中没有位置了。

本质其实就是相当于给父盒设置属性，让父盒子感知到子盒子的具体高度，来消除浮动对后面元素的影响。

内容塌陷(父盒子高度为0，靠子盒子撑起来的，如果子盒子浮动起来后，父盒子会发生内容塌陷的问题)。

清除浮动的方式：

给父盒子单独的设置高度(很少用)
clear: both;
Overflow: hidden; 触发底层的BFC模式，也达达清除浮动的模式
单伪元素或是双伪元素清除浮动

.clearfix:before, .clearfix:after {
    /*清除浮动，最好最标准的写法*/
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/ /*兼容IE6下的写法*/
}

1.2 定位的层级问题

定位(相对，绝对，固定)的元素都有一个层级的概念。

只有定位的元素才有层级，浮动或是标准流的元素都没有层级。

如果定位了的元素，默认的情况下，层级都是0，而且相邻的相同定位的元素，如果在同一个位置显示的话，后面的元素会压住前面的元素。如果想让当前元素在后面的元素之上显示，这个时候需要设置z-index: 取值范围在0--9999;

注意，尽量使用正整数，不要使用负数。

定位了的元素，如果不设置trbl，默认会在原位以标准流的形式显示。

1.3 透明度 opacity

Opacity:有兼容性问题，而且不但让背景颜色透明，而且还让里面的内容也透明

background: rgba(0,0,0,.3);

仅让背景色透明，内容不透明

1.4 相邻元素的层级(仿淘宝的效果)

转载于:https://www.cnblogs.com/wangkang894/p/5705845.html