day4-盒子模型与样式排版

最新推荐文章于 2024-07-25 09:24:40 发布

宠溺怪

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量50

点赞数

分类专栏：前端学习-css篇文章标签：前端

本文链接：https://blog.csdn.net/jkkxc/article/details/131302245

版权

前端学习-css篇专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.块元素基础特性(block)

2概念: 让开发人员更好的进行网页布局.把网页分割为一个个区块.

常用块元素:
   div,p,h1-h6,ul,ol,li,dl,dt,dd
块元素的特性:
   1.块元素总是独占一行的
   2.块元素有宽度,高度,边距属性.这些属性都可以自己设置
   3.块元素的宽度默认是浏览器的100%.高度为内容高度
   4.块元素可以包裹行内元素/其他块元素
块元素就像是斗地主.他有自己独立的一块地盘

2.行内元素基础特性(inline)

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

常用行内元素:
   span a b strong i u img
行内元素的特性:
   1.行内元素的宽高就是自身内容大小
   2.行内元素设置宽高是没意义的.它不具备结构能力
   3.行内元素不会独占一行.多个行内元素会在一起
   4.行内元素从规范性来说.是不能放块元素.只能放其他行内元素

a标签 --> 它和用户体验相关.所以a标签可以包裹块元素 -- 尤其在移动端

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

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

行内块元素是行内和块元素的集合体.同事具备两者的特征(主块次行).主要用来做水平横向布局.
   1.不会独占一行,和相邻的元素(行内块)在一行时.末尾有间隔
   2.默认宽高为内容宽度
   3.宽高,内外边距都可以设置

4.盒子模型(div)

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

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

盒子的核心属性:
   width: 宽度,默认为浏览器的100%
   height: 高度,默认为盒子的内容
   overflow: 溢出处理(盒子装不下了怎么处理)
           visible; 正常显示溢出的部分
           hideen; 隐藏溢出的部分
           scroll; 通过滚动条方式显示溢出内容
           auto; 让浏览器自己看着办

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

5.盒模型标签属性

复合写法:
background image color size position
background: url() center/cover; // center/cover显示中间内容再加缩放

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

margin和padding的样式写1-4个数值.对应含义也不同
   padding: 10px; # 距离上下左右10像素
   padding: 10px 20px; # 距离上下10像素距离左右20像素
   padding: 10px 20px 30px; # 距离上边10像素左右20像素下面30像素
   padding: 10px 20px 30px 40px: # 距离上边10像素右边20像素下边30像素左边40像素

margin设置左右居中:
margin 任意值 auto; 注意：padding不加auto
auto会自动计算页面宽度.来实现居中效果

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

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

6.边框(border)

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

border-width --> 设置边框粗细
   border-width: 5px;
border-style --> 设置边框样式
   border-style: solid; 实线
border-color --> 设置边框颜色
   border-color: #096;
border-radius --> 设置边框圆角
   border-radius: 15px;

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

拓展案例 -- 手机壁纸切换

案例里面用到了一个js模块. jQuery,需要另外导入 -->通过这个网站https://www.bootcdn.cn/,进行实时的cdn导入

1.大盒子
2.手机盒子
3.相册盒子
4.背景候选图
5.js点击切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google</title>
   <style>
      .mi{
        width: 700px;
        height: 700px;
        border: 3px solid  #096;
        margin: 100px auto;
      }
      .phone{
        width: 200px;
        height: 450px;
        border: 5px solid #000;
        margin: 30px auto;
        border-radius: 30px;
        background:url(./day4-盒子模型与样式排版/img/2.jpg) center/cover;
      }
      .album{
        width: 600px;
        height: 50px;
        margin: 30px auto;
        background-color: aqua;

      }
      .wallpage{
        display: inline-block;
        margin: 2px 15px;
        width: 45px;
        height: 45px;
        border: 2px soild #000;
        border-radius: 10px;
        background: url(./day4-盒子模型与样式排版/img/1.jpg) center/cover;
      }
      .wallpage:nth-child(2){
        background: url(./day4-盒子模型与样式排版/img/2.jpg) center/cover;
      }
      .wallpage:nth-child(3){
        background: url(./day4-盒子模型与样式排版/img/3.jpg) center/cover;
      }
      .wallpage:nth-child(4){
        background: url(./day4-盒子模型与样式排版/img/4.jpg) center/cover;
      }
      .wallpage:nth-child(5){
        background: url(./day4-盒子模型与样式排版/img/5.jpg) center/cover;
      }
      .wallpage:nth-child(6){
        background: url(./day4-盒子模型与样式排版/img/6.jpg) center/cover;
      }
      .wallpage:nth-child(7){
        background: url(./day4-盒子模型与样式排版/img/7.jpg) center/cover;
      }
   </style>  
</head>
<body>
<div class="mi">
    <div class="phone"> </div>
    <ul class="album">
        <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>
<!-- 导入jQuery模块 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> 
     <script>
        // 1.点击  2.壁纸 --> 当我点击壁纸实时触发一个功能. 给壁纸添加点击事件(点击壁纸,执行一个功能函数)
        // 点击壁纸,把手机图片,更换为壁纸图片
        // this指的是当前点击的壁纸
        // 当我点击壁纸时. 找到.phone, 把.phone的图片.  换成现在点击的壁纸的图片
        $('.wallpage').click(function(){
            $('.phone').css('background-image',$(this).css('background-image'))
        })
     </script>
</body>
</html>

实现效果：

点击小框中的图手机壁纸会自动切换

宠溺怪

关注

0
点赞
踩
0

收藏

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

2概念: 让开发人员更好的进行网页布局.把网页分割为一个个区块.常用块元素:块元素的特性:1.块元素总是独占一行的2.块元素有宽度,高度,边距属性.这些属性都可以自己设置3.块元素的宽度默认是浏览器的100%.高度为内容高度4.块元素可以包裹行内元素/其他块元素块元素就像是斗地主.他有自己独立的一块地盘。
复制链接

扫一扫