盒子模型与样式排版

skytelling

已于 2024-01-20 11:18:37 修改

阅读量1.5k

点赞数 44

分类专栏：前端文章标签：前端 html css

于 2024-01-18 21:56:26 首次发布

本文链接：https://blog.csdn.net/m0_73660403/article/details/135683614

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、块元素(block)

基础特性

   概念: 让开发者更好的对页面进行布局,把网页分割为一个个区块

   常用块元素:（盒子、正文、列表等独占一行的）
       div,p.h1-h6,ol,ul,li,dl,dt,dd
   块元素特性:
       1.总是独占一行
       2.有宽度,高度,边距.这些属性都可以设置
       3.宽度默认是浏览器的100%. 高度为内容高度 (body有默认属性,设置margin和paading)
       4.可以包裹其他块元素
   块元素相当于地主,有自己独立的一块地盘

2、行内元素(inline)

基础特性

   概念: 和块元素相比,行内元素相当于是打工人.它主要作为内容
   它没有自己地盘.内容大小就是自身大小. 所以给它设置宽高,对齐都是无效

   常用行内元素:
       span a b strong i u img
   行内元素特性:
       1.宽高为自身内容大小
       2.设置宽高等属性无效.因为它们不具备结构能力
       3.不会独占一行.有多个行内元素时.会在同一行显示
       4.从规范角度来说.行内元素不能放块元素. 只能放其他行内元素
   a标签里可以放块元素.它和用户体验有关.所以a标签可以包裹块元素 -- 比如在移动设备中

   img: 行内元素
       img虽然可以设置宽高.但它不是块元素.因为宽高是它的自身属性

3、行内块元素(inline-block)

行内块元素是行内和块元素的结合体.同时具备两者特性(主块次行). 主要用来做水平横向布局
       1.不会独占一行.和相邻的行内快元素之间会有一定的空隙
       2.默认宽高为内容大小
       3.宽高,内外边距都可以设置

元素类型转换

display: 类型转换样式.让标签元素变为其他类型
       display:block; 把标签转为块元素
               inline; 把标签转为行内元素
               inline-block; 把标签转为行内块元素
               none; 把标签转为空元素.不显示

盒子模型(div)

  盒子组成:
       外边距 -- 边框 -- 内边距 -- 内容

   外边距margin:
       盒子距离外层边界的距离
   内边距padding:
       盒子内容距离盒子边框的距离

   盒子的核心属性:
       width: 宽度,默认为浏览器的100%
       height: 默认为盒子内容
       overflow: 溢出处理(内容超出了盒子范围.怎么处理)
           visible; 正常显示溢出
           hidden; 隐藏显示溢出
           scroll; 滚轮显示内容
           auto; 浏览器自动处理

   如果盒子的宽高写死了.再设置padding内边距.会把盒子撑大
   如果没有写死.盒子的宽高就会随着内容变化
   有时候写大盒子时,为了后续拓展性.只写宽度,不写高度.让盒子高度随着内容增长

盒模型标签属性

  复合写法: background image color size position
       background: url() center /cover;
           // image position size

   margin -- 设置外边距
       margin: 10px

   padding -- 设置内边距
       padding: 10px;

   margin和padding的样式都可以写1-4个值.对应含义也不同 (一般就是写1/2)
       margin: 10px;   # 距离4个方向10px 主要基于左/上
       margin: 10px 20px; # 距离上10px 左20px
       margin: 10px 20px 30px; # 距离上10px 左右20px 下30px
       margin: 10px 20px 30px 40px ; # 距离上10px 右20px 下30px 左40px

   margin设置左右居中:
       margin: 任意值 auto;
       auto会自动计算页面宽度,实现居中

   单独设置边距方向:
       margin-top -- 设置上外边距
       margin-right -- 设置右外边距
       margin-bottom -- 设置下外边距
       margin-left -- 设置左外边距

       padding-top -- 设置上内边距
       padding-right -- 设置右内边距
       padding-bottom -- 设置下内边距
       padding-left -- 设置左内边距

边框(border)

边框复合写法:
       border: 1px solid #096; 粗细,样式,颜色

   border-width -- 边框粗细
       border-width: 5px;
   border-style -- 边框样式
       border-style: solid;/*实线*/
   border-color -- 边框颜色
       border-color: #096;
   border-radius -- 边框圆角
       border-radius: 20px;

   border-top -- 设置上边框
   border-right -- 设置右边框
   border-bottom -- 设置下边框
   border-left -- 设置左边框

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul,li{
            /* 去除列表样式 */
            list-style: none;
        }
        .big{
            width: 700px;
            height: 600px;
            border: 3px solid #096;
            margin: 70px auto;
        }
        .phone{
            width: 200px;
            height: 400px;
            background: url(img/7.jpg) center/cover; /* image + position + size*/
            border: 3px solid #000;
            border-radius: 25px;
            margin: 30px auto;
        }
        .photo{
            width: 600px;
            height: 80px;
            margin: 50px auto;
            background-color: #6cf;
        }
        .wallpage{
            display: inline-block;
            margin: 12px;
            width: 50px;
            height: 50px;
            border: 2px solid #000;
            border-radius: 12px;
            background: url(img/1.jpg) center/cover; 
        }

        /* 结构选择器. 如果你有一堆标签/元素.让你选中指定的对象*/
        /* 选中第二个元素 */
        .wallpage:nth-child(2){
            background: url(img/2.jpg) center/cover; 
        }
        .wallpage:nth-child(3){
            background: url(img/3.jpg) center/cover; 
        }
        .wallpage:nth-child(4){
            background: url(img/4.jpg) center/cover; 
        }
        .wallpage:nth-child(5){
            background: url(img/5.jpg) center/cover; 
        }
        .wallpage:nth-child(6){
            background: url(img/6.jpg) center/cover; 
        }
        .wallpage:nth-child(7){
            background: url(img/7.jpg) center/cover; 
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="phone"></div>
        <ul class="photo">
            <li class="wallpage"></li>
            <li class="wallpage"></li>
            <li class="wallpage"></li>
            <li class="wallpage"></li>
            <li class="wallpage"></li>
            <li class="wallpage"></li>
            <li class="wallpage"></li>
        </ul>
    </div>

    <!-- 
        1.大盒子 -- ok
        2.手机盒子 -- ok
        3.相册列表 -- ok
        4.背景候选图
        5.js点击切换
        
        wallpage:壁纸  photo:图片  phone:手机
     -->
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <script>
        /*
            1.点击 2.壁纸 -- 当我点击壁纸时,触发函数
            把手机盒子的背景图, 换成我点击的壁纸的背景图
        */
       $('.wallpage').click(function(){
            $('.phone').css('background-image',$(this).css('background-image'))
       })
     </script>
</body>
</html>

拓展

cdn引用

1.点击https://www.bootcdn.cn/

2.点击jquery

3.复制script链接

4.粘贴到自己的代码里面就可以了

skytelling

关注

44
点赞
踩
30

收藏

觉得还不错? 一键收藏
1
评论
盒子模型与样式排版

概念: 让开发者更好的对页面进行布局,把网页分割为一个个区块常用块元素:（盒子、正文、列表等独占一行的）块元素特性:1.总是独占一行2.有宽度,高度,边距.这些属性都可以设置3.宽度默认是浏览器的100%. 高度为内容高度 (body有默认属性,设置margin和paading)4.可以包裹其他块元素块元素相当于地主,有自己独立的一块地盘。
复制链接

扫一扫