css学习

最新推荐文章于 2024-01-26 16:09:53 发布

qq_50280292

最新推荐文章于 2024-01-26 16:09:53 发布

阅读量161

点赞数

分类专栏：前端学习文章标签： css css3 前端前端框架

本文链接：https://blog.csdn.net/qq_50280292/article/details/126970230

版权

前端学习专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1.盒子模型

盒子模型本质就是一个盒子，主要包括边框、外边框、内边距、实践内容等

1.1 边框border

边框border:border-width/border-style/border-color

border-width;设置边框的粗细程度

border-style:none/solid/dashed/dotted

border-color:设置边框的颜色

边框的复合写法：border:2px solid red

补充：表格的细线边框 border-collapse:collapse

1.2 内边距padding

表示边框与内容之间的距离，padding后面跟几个数值表示不同的涵义

1.3 外边框margin

外边距典型应用：让块级盒子水平居中

必须指定宽度且左右的外边距都设置为auto margin:o auto

2.浮动

传统网页布局三种方式：标准流浮动定位

浮动最典型应用：可以让多个块级元素一行内排列显示 float: none/left/right

浮动特性：1.脱标 2.浮动的盒子不在保留原先的位置

3.清除浮动

原因1.父级没高度 2.子盒子浮动 3.影响到下面的布局

清除浮动四种方法：1. 额外标签法 2.父级overflow:hidden 3.父级after伪元素 4.父级双伪元素

3.1 额外标签法

额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style=”clear:both”></div>，或者其他标签（如<br />等）。

注意:这个标签只能是块级元素

3.2 父级overflow方法

给父级元素添加 overflow: hidden;

3.3 父级after伪元素

给父元素添加如下代码：


.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;

3.4 父级双伪元素

给父元素添加如下代码：

 .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }