CSS基础（盒模型，Position，display，水平垂直居中，CSS兼容，伪类，清除浮动）

最新推荐文章于 2022-06-10 15:19:43 发布

DepressedPrince

最新推荐文章于 2022-06-10 15:19:43 发布

阅读量684

点赞数

分类专栏： CSS 前端基础

本文链接：https://blog.csdn.net/depressedprince/article/details/80461627

版权

前端基础同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

一、盒模型

W3C盒模型

IE盒模型

两者的区别就在于Width的计算，标准盒子模型的宽度直接就是内容宽度，而IE盒子模型的宽度则是需要算上Padding和border。可以通过box-sizing来切换盒模型，详情如下：

1）box-sizing：content-box —— padding和border不被包含在定义的width和height之内，即标准盒子模型

2）box-sizing：border-box —— padding和border被包含在定义的width和height之内，即IE盒子模型

但是对于边距（无论是外边距还是内边距）的值，既可以是具体的数值，也可以是百分比。当值为百分比时，需要特别注意的是，百分比的值是由父元素的宽度width计算来，尤其是margin-top/margin-bottom这类纵向上的属性值。而且边距的值还可以为负值，这一特性值针对外边距有效，因为内边距的负值，会默认被浏览器忽略。负外边距的妙用，点击了解详情

外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当然只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。包含三种情况：

1）相邻元素合并；

2）父子合并；(经测试，父、子区域块不能有border，如果存在border，实际上父子区域块的边距并没有相邻那么将不会合并外边距）

3）自己合并；

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

二、Position

Position有四种定位方式：默认（static），绝对（absulate），相对（relative），固定（fixed）

１）默认（static）：默认布局。

２）绝对（absulate）：脱离文档流，相对于最近的position为absolute/relative/fixed的父元素进行定位，如果没有父元素，则相对与html定位；对于父元素来说，父元素的定位不能是static。

３）相对（relative）：不脱离文档流，相对于自身的位置进行定位。

４）固定（fixed）：脱离文档流。相对于浏览器窗口固定位置，不随滚动条而移动位置。

三、display

常见的属性有：none，block，inline，inline-block，inherit

１）none：元素在页面中不再显示

２）block：元素显示为块级元素，可以设置它的宽高和上下左右的padding和margin。常见的标签p、div、ul、ol、li、dl、dt、dd、h1~h6、form

３）inline：元素显示为行内元素，不会自动换行，设置宽高，上下的margin无效。常见的标签：a、span、em、strong、b、i、u、label、br

４）inline-block：设置了inline-block属性的元素，既具有block元素可以设置width和height属性以及上下margin的特性，又保持了inline元素不换行的特性。常见的标签：img,input,textarea

５）inherit：从父元素继承 display 属性的值

四、水平垂直居中

１）maigin：auto;

.parent {
    with: 200px;
    height: 200px;
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

２）margin & transform

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

３）flex

.parent {
    display:　flex;
    justify-content:　center;
    align-items: center;
}

4）table-cell;　vertical-align:middle;

.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child {
    display: inline-block;
    vertical-align: middle;
}

五、CSS浏览器的兼容

!important ,表示高优先级，ie7及以上，firefox都支持，ie6认识带!important的样式属性，但不认识!important的优先级；
-webkit- ，针对safari，chrome浏览器的内核CSS写法
-moz-，针对firefox浏览器的内核CSS写法
-ms-，针对ie内核的CSS写法
-o-，针对Opera内核的CSS写法

兼容360浏览器：

<meta name="renderer" content="webkit" />  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

六、伪类

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

伪类选择器分为两种。

（1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前
:visited 链接被访问过之后

PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）。

PS：以上三种样式，只能用于超链接。

        /*让超链接点击之前是红色*/
        a:link{
            color:red;
        }
        /*让超链接点击之后是橘色*/
        a:visited{
            color:orange;
        }
        /*鼠标悬停，放到标签上的时候*/
        a:hover{
            color:green;
        }
        /*鼠标点击链接，但是不松手的时候*/
        a:active{
            color:black;

住，在css中，这四种状态必须按照固定的顺序写：a:link 、a:visited 、a:hover 、a:active

如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。

CSS3新增的选择

:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。

七、伪类元素

１）::first-letter——选择元素的第一个字母

２）::first-line——选择文本块的第一行

３）::before——可用于在某个元素之前插入某些内容，常和"content"结合使用

４）::after——可用于在某个元素之后插入某些内容，常和"content"结合使用

八、清除浮动

我们在使用 float 布局的时候，如果子元素都设置了 float 属性，父元素的高度无法展开，那么父元素的背景、border、margin、padding等属性显示就会有问题。

<style>
    .box{margin: 50px auto;border:1px solid #ccc;background: #fc9;color:#fff;}
    .red{width: 80px;height: 100px;background: red;float:left;}
    .sienna{width: 80px;height: 100px;background: sienna;float:left;}
    .blue{width: 80px;height: 100px;background: blue;float:left;}
</style>
<body>
<div class="box">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
</div>
</body>

1）在结尾处添加新的元素，并应用 clear:both 属性
在浮动的盒子之下再放一个标签，在这个标签中使用 clear:both，来清除浮动对页面的影响。注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱。

<style>.clear{clear: both;}</style>
<div class="box">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
    <div class="clear"></div>
</div>

2）父类div定义伪类 —— :after & zoom

<style>
    .clearfix:after{
        content:"";/*设置内容为空*/
        height:0;/*高度为0*/
        line-height:0;/*行高为0*/
        display:block;/*将文本转为块级元素*/
        visibility:hidden;/*将元素隐藏*/
        clear:both;/*清除浮动*/
    }
    .clearfix{
        zoom:1;/*为了兼容IE*/
    }
</style>
<body>
<div class="box clearfix">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
</div>
</body>

3) 双伪元素清除—— :after & :before

.clearfix:before,.clearfix:after {
     content: "";
     display: block;
     clear: both;
}
.clearfix {
     zoom: 1;
 }

4) 父元素设置overflow 属性

使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden，auto，visible。我们可以使用 hidden和 auto 值来清除浮动，但切记不能使用 visible 值。

九、溢出文本省略

/*单行文本省略*/
.oneLine {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

/*多行文本省略*/
.twoLine {
    display: -webkit-box;  /* 弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical;  /* 表明盒子内子元素的排列方式 */
    -webkit-line-clamp: 3; /* 限制在一个块元素显示的文本的行数 */
    overflow: hidden;
}

十、visibility=hidden, opacity=0，display:none 三者的区别

（1）opacity=0，该元素透明度设为0，让用户看不见，不会改变页面布局，而且如果该元素已经绑定一些事件（如click），那么点击该区域，也能触发点击事件。

（2）visibility=hidden，该元素隐藏起来了，但不会改变页面布局，会浏览器触发执行repaint（重绘）操作，但是不会触发该元素已经绑定的事件。

（3）display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样，会触发浏览器的reflow（回流）操作。

十一、实现0.5px的细线

1) 伪类 & transform：scale

.thinner-border {
    position: relative;
}

.thinner-border:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    box-sizing: border-box;
}

/* 或者直接使用scale */
.border-line{
    width:100%;
    height: 1px; 
    transform: scaleY(0.5);
    background: #f00;
}

2）meta 设置（但需要注意整体页面样式变化）

//1px像素线条
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
//0.5像素线条
<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">

3）border-image 属性（直接使用0.5px的图片作为边框）

4）background-image 属性（利用背景图片渐变，从有色到透明，给人0.5像素的视觉体验）

.thinner-border{
    background-image: -webkit-linear-gradient(bottom,red 50%,transparent 50%); 
    background-image: linear-gradient(bottom,red 50%,transparent 50%); 
    background-size:  100% 1px; 
    background-repeat: no-repeat; 
    background-position: bottom right; 
}