前端基础---布局

最新推荐文章于 2022-08-11 19:56:51 发布

NINOMIYA~~

最新推荐文章于 2022-08-11 19:56:51 发布

阅读量193

点赞数

分类专栏： JavaScript 前端文章标签：布局前端代码

本文链接：https://blog.csdn.net/weixin_44239385/article/details/87908078

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

一、布局核心：盒模型

盒模型的一些基础知识

盒子在网页中呈现的宽度Width=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right

padding:内边距有效内容和边框的距离

当padding发生改变时盒子大小也会发生改变此时为了保证不改变盒子的大小，需要手动内减width和height

margin:外边距两个盒子的距离可以改变盒子的位置

border:边框 （宽度 px 边形 solid 实线 dotted 圆点 dashed 虚线 none 没有边框）

全局选择器

虽热创建盒子时并没有设置外边距，但是在浏览器中运行时会默认设置外边距，如果此时想要将盒子的外边距清除便可使用全局选择器

格式：

}

具体如下：

练习：向右箭头

这里运用了border的相关知识，当border像素过大时，就会产生立体的图形，此时将盒子的宽高设置为0，并将boder-left设置为喜欢的颜色，将其它三个border设置为transpraent即可

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>day03-向右的箭头</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 0;
            height: 0;
            border-left: 100px solid #ffb409;
            border-right: 100px solid transparent;
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

结果如下：

盒模型问题

BFC 块级元素的一个规则

外边距重叠 BFC ---> 导致父盒子随着子盒子走父盒子拥有子盒子的上外边距属性

1：解决：

(1) 父盒子设置上边框 border-top:1px solid orange

(2)父盒子设置内边距 padding-top:1px

(3)overflow:hidden 溢出的隐藏

2：避免：父盒子内边距而不是子盒子的外边距优先：内边距 > 外边距

水平居中

外边距auto

margin : 10px 四面外边距值一样

margin: 10px 20px 上下外边距为10px 左右外边距为20px

margin: 10px 20px 30px 上外边距10px 左右 20px 下 30px

margin: 10px 20px 30px 40px 上右下左

盒子水平居中 margin: 0 auto; /*上下0 左右auto 浏览器自己去算 */

练习：盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
       
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 500px;
            height: 500px;
            background-color: orange;
           /* !*撑大盒子*!
            padding-top: 100px;
            padding-left: 200px;*/

            /* 方法一border-top:1px solid orange;*/
           /* 方法二padding-top:1px;*/
            overflow:hidden /* 方法三*/
        }
        .son {
            width:300px;
            height: 300px;
            background-color: skyblue;
            margin-top: 100px;
            margin-left: 200px;
           /* padding: 75px;*/
        }
        .sunZi {
            width: 150px;
            height:150px;
            background-color: deeppink;
            margin: 0  auto; 
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son">
        <div class="sunZi">
        </div>
    </div>
</div>
</body>
</html>

外边距塌陷

取最大外边距 50px 避免就好了

二、布局第二块：浮动

浮动是为了让块级元素并排

伪类选择器

语法：

第一个孩子标签名、类名:first-child { }

标签名、类名:last-child { }

2n+1 奇数 2n 偶数

标签名、类名:nth-child(2n+1) { }

浮动元素-》脱标-》不在界面-》底下盒子会占领并排盒子的位置

父盒子高度塌陷

(1) 设定高度不实际

(2) 父元素加overflow:hidden 有问题会把有用的内容都隐藏掉

(3) 前辈清除浮动影响 clear:both / left /right 属性 + 对象 (标签) 没有实现样式和结构相分离

(4) 前辈 clear:both / left /right 能不能创造一个元素（标签）不属于文档树又起到标签效果

样式上css代码创造标签 --》不属于文档树又有标签效果 ---》伪元素

.clearFix::after {

content: ''; !*如果没有文本内容就空开*!

clear: both;

line-height: 0; !*IE *!

display: block; }

伪元素

默认是一个行内元素

选择器::after{ }

选择器::before { }

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>day03-浮动02</title>
    <style>
.box5{
            width: 200px;
            height: 200px;
            /*浮动属性float*/
            /*float: left;*/
            background-color:darkmagenta;
            margin: 100px auto;
        }
        .box5::before{
            content: '我是前span标签';/*必须存在*/
            padding: 20px;
            background-color: #666666;
            color:deeppink;
            display: block;
        }
        .box5::after{
            content: '我是后span标签';/*必须存在*/
            padding: 20px;
            background-color: #666666;
            color:deeppink;
            display: block;
        }
        span{
            padding: 20px;
            background-color: #666666;
            color:deeppink;
        }
    </style>
</head>
<body>
<div class="box5">
    我是div,你是？
</div>
<p></p>



</body>
</html>

结果：

NINOMIYA~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础---布局

一、布局核心：盒模型盒模型的一些基础知识盒子在网页中呈现的宽度Width=width+padding-left+padding-right+border-left+border-right+margin-left+margin-rightpadding:内边距有效内容和边框的距离当padding发生改变时盒子大小也会发生改变此时为了保证不改变盒...
复制链接

扫一扫

专栏目录