CSS day3

已于 2023-08-14 17:55:19 修改
阅读量23 收藏
点赞数
分类专栏： CSS 文章标签： css 前端
于 2023-08-13 21:50:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Follow_haodi/article/details/132265878
版权

盒子模型

 前端开发

1.PC端页面

2.移动端页面

3.移动端app

4.微信小程序

5.电视猫、云视厅、奇异果

6.ATM操作界面

盒子模型

把页面内的所有div当作是一个矩形的盒子

这个盒子将会包含：外边距（margin）、内边距（padding）、边框（border）、内容（content）

 margin 外边距的使用方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中页面上所有类名为 txt 的元素 */
        .txt {
            /* 外边距:一个元素与另一个元素的距离 */
            /* margin:上 右 下 左; */
            /* 单位是px 像素 */
            margin: 0px 20px 0px 0px;
            margin: 100px 20px 0px 100px;
        }

        .top {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 下外边距 */
            margin: 0px 0px 100px 0px;
        }

        /* 外边距重叠 */
        .box {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* 外边距 */
            /* margin:上 右 下 左; */
            margin: 100px 20px 0px 100px;
        }

        /* 根据方向写属性 */
        .box2 {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* top right bottom left */
            margin-top: 100px;
            margin-right: 100px;
            margin-bottom: 100px;
            margin-left: 100px;
        }
    </style>
</head>

<body>
    <!-- <span class="txt">这是一个行内元素</span>
    <span class="txt">暑期游新玩法折射消费新趋势</span> -->

    <div class="top"></div>

    <div class="box"></div>

    <div class="box2"></div>
    <span>1234567890-</span>
</body>

</html>

padding 内边距的使用方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 内边距：将内容与元素边缘的距离 增加 从而把盒元素撑大
            那么这个元素在网页里面占用的大小就会改变
        */
        /* padding:上 右 下 左; */
        /* padding:上  左右  下 */
        /* padding:上下  左右 */
        /* padding:上下左右 */
        .txt {
            color: orange;
            background-color: skyblue;
            padding: 10px 10px 10px 10px;
            padding: 20px 10px 30px;
            padding: 20px 10px;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: purple;
            color: springgreen;
            /* 方向 */
            padding-left: 100px;
            padding-top: 100px;
            padding-bottom: 100px;
            padding-right: 100px;
        }

        .fahter {
            width: 300px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="fahter">
        <span class="txt">东京大楼爆炸瞬间 有人高喊快逃</span>
    </div>
    <div class="box">
        东京大楼爆炸瞬间 有人高喊快逃
    </div>
</body>

</html>

border 边框的使用方法

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;

            /* 边框 border */
            /*  粗细px 样式  颜色(十六进制 单词 rgb) */
            border: 10px solid pink;
            /* none：没有边框即忽略所有边框的宽度（默认值） */
            /* solid：边框为单实线(最为常用的) */
            /* dashed：边框为虚线   */
            /* dotted：边框为点线 */
            /* double：边框为双实线 */
            border-top: 10px solid pink;
            border-right: 10px dashed skyblue;
            border-bottom: 10px dotted purple;
            border-left: 10px double springgreen;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

利用边框做圆角

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 边框圆角  */
            /* border-radius: 左上角  右上角  右下角  左下角;*/
            /* border-radius: 20px 0px 0px 0px; */
            /* border-radius: 150px 150px 150px 150px; */
            /* border-radius: 50% 50% 50% 50%; */
            border-radius: 50%;
        }

        /* 扇形 */
        .box2 {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            border-radius: 0px 300px 0px 0px;
        }

        /* 半圆 */
        .box3 {
            width: 300px;
            height: 150px;
            background-color: purple;
            border-radius: 150px 150px 0px 0px;
        }

        .content {
            width: 500px;
            height: 100px;
        }

        .content div {
            display: inline-block;
        }

        .content .left {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* border-radius: 左上角  右上角  右下角  左下角; */
            border-radius: 50px 0px 0px 50px;
        }

        .content .center {
            width: 200px;
            height: 100px;
            background-color: pink;
        }

        .content .right {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* border-radius: 左上角  右上角  右下角  左下角; */
            border-radius: 0px 50px 50px 0px;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <div class="box2"></div>
    <div class="box3"></div>

    <div class="content">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

清除默认内外边距

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器 *（通配符）选中页面内所有元素 */
        * {
            padding: 0px;
            margin: 0px;
        }
        .box{
            width: 300px;
            height: 600px;
            border: 1px solid red;
            /* 水平居中 */
            text-align: center;
            /* 行高 */
            /* line-height : 如果多行文本 自身的高/文本行数 */
            line-height: 600px;
            line-height: 150px;
        }
    </style>
</head>

<body>
    <p>123456789</p>
    <ol>
        <li>首页1</li>
        <li>首页2</li>
        <li>首页3</li>
        <li>首页4</li>
    </ol>
    <ul>
        <li>首页1</li>
        <li>首页2</li>
        <li>首页3</li>
        <li>首页4</li>
    </ul>
    <dl>
        <dt>标题</dt>
        <dd>内容1</dd>
        <dd>内容1</dd>
        <dd>内容1</dd>
    </dl>
    <h1>一级标题</h1>
    <div class="box">
        <p>唧唧复唧唧，</p>
        <p>木兰买手机，</p>
        <p>oppoR11，</p>
        <p>拍照更清晰。</p>
    </div>
</body>

</html>

外边距合并问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            /* border: 1px solid #000; */

        }

        /* .box1{
            margin-bottom: 30px;
        } */

        .box2{
            margin-top: 80px;
        }

        .box3{
            width: 400px;
            height: 370px;
            background-color: red;

            /* margin-top: 80px; */
            
            /* 1.换成内边距来做 */
            /* padding-top: 30px; */

            /* 2.给父元素添加 1px 的上边框或上内边距 */
            /* border-top: 1px solid #000; */
            /* padding-top: 1px; */

            /* 3.给父元素添加 voerflow:hidden; */
            overflow: hidden;
        }

        .box4{
            width: 600px;
            height: 200px;
            background-color: pink;

            margin: 50px;
        }
    </style>
</head>
<body>
    <!-- 解决外边距合并问题  相邻元素:只给其中一个设置外边距 -->
    <!-- <div class="box1"></div> -->
    <!-- <div class="box2"></div> -->

    <div class="box3">
        <div class="box4"></div>
    </div>
    
</body>
</html>

盒子模型大小计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 260px;
            height: 260px;
            background-color:pink;
            border: 10px solid red;
            margin: 20px;
            padding: 10px;
        }

        .box2{
            width: 300px;
            height: 300px;
            background-color:pink;
            border: 10px solid red;
            margin: 20px;
            padding: 10px;
            /* 把box2设置为 ie盒子模型 */
            box-sizing: border-box;
        }

        /* 标准盒子模型 ：width+border+padding+margin */
        /* IE盒子模型：width+margin 会自动算到content里面去  */
    </style>
</head>
<body>
    <div class="box">
        小谷
    </div>
    <div class="box2">
        小谷
    </div>
</body>
</html>

盒子阴影

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 800px;
            height: 200px;
            background-color: black;
            margin: 0 auto;
        }

        .box h1 {
            color: white;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
            /* text-shadow: x y 模糊程度 color; */
            text-shadow: -4px -4px 0px #00FFFF, 4px 4px 0px #DC143C;
            /* #00FFFF  	#DC143C*/
        }

        /* box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影； */
        .box2 {
            width: 300px;
            height: 300px;
            background-color: #9932CC;
            margin: 100px auto;
            /* 盒子阴影 */
            box-shadow: 4px 4px 10px 2px gray;
            box-shadow: 4px 4px 10px 2px gray inset;
        }

        /* .box2:hover {
        } */
    </style>
</head>

<body>
    <div class="box">
        <h1>🎶🐅</h1>
    </div>
    <div class="box2"></div>
</body>

</html>

文本溢出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            /* visible(默认) : 　不剪切内容也不添加滚动条。 */
            /* auto : 　 超出自动显示滚动条，不超出不显示滚动条 */
            /* hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉 */
            /* scroll : 　不管超出内容否，总是显示滚动条 */
            overflow: auto;
            overflow: hidden;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div class="box">
        11111111111111
    </div>
</body>

</html>

案例：风车

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .content {
            width: 405px;
            height: 400px;
        }

        .content .top div,
        .content .bottom div {
            display: inline-block;
        }

        .content .top {
            width: 100%;
            height: 200px;
        }

        .content .bottom .right,
        .content .top .left {
            width: 200px;
            height: 200px;
            /* 渐变色 */
            background-image: linear-gradient(to right bottom, skyblue, pink);
            /* border-radius: 左上角  右上角 右下角 左下角; */
            border-radius: 0px 200px 0px 200px;
        }

        .content .bottom .left,
        .content .top .right {
            width: 200px;
            height: 200px;
            /* 渐变色 */
            background-image: linear-gradient(to right top, skyblue, pink);
            /* border-radius: 左上角  右上角 右下角 左下角; */
            border-radius: 200px 0px 200px 0px;
        }

        .content .bottom .left {
            background-image: linear-gradient(to right top, aqua, springgreen);
        }

        .content .bottom .right {
            background-image: linear-gradient(to right top, #FF4500, #C71585);
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="top">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="bottom">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
</body>

</html>

Follow_浩弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS DAY3总结
morestudy的博客
02-19 242
盒子模型 所谓盒子模型： 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 1.1盒子模型名词解释 盒子模型有元素的**内容、边框（border）、内边距（padding）、和外边距（margin）**组成。 盒子里面的文字和图片等元素是 内容区域 盒子的厚度 我们成为 盒子的边框 盒子内容与边框的距离是内边距（类似单元格的 cellpadding) 盒子与盒子之间的...
CSS基础（二）day4
laodaer的博客
12-06 1352
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或者id选择器，两个选择器之间不能有空格，如h1.red。记忆技巧：交集选择器是并且的意思，即...又...的意思注意点：示例： 并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以使用并集选择器。记忆技巧：并集选择器表示 和 的意
css day 3
j3061331080的博客
04-23 121
CSS Day3
weixin_45253216的博客
04-06 99
css3学习day03
2201_75646248的博客
06-14 1531
复合选择器 标签显示模式 背景样式
css3day2动画.xmind
07-19
css3day2动画.xmind
day10-HTML5&CSS3提高.pdf
10-11
CSS3则带来了丰富的样式和布局功能，比如选择器的增强（如nth-child、attribute selectors等）、边框与背景的高级效果（如圆角、阴影、渐变）、多列布局、Flexbox弹性盒模型以及Grid布局系统。CSS3还引入了动画和...
CSS3动画源码
04-25
在“day11 CSS3动画”文件中，我们可以找到各种动画效果的示例，如淡入淡出、旋转、滑动等。这些效果通过组合不同的`@keyframes`和`animation`属性实现。例如，一个简单的元素滑入动画可能如下所示： ```css @...
day05（CSS03-盒子模型）v1.0.pdf
02-17
"CSS盒子模型和三大特性" CSS盒子模型是一个基本的布局模型，它由内容区域、边框区域、内边距区域和外边距区域组成。在这个模型中，每个标签都是一个盒子，通过盒子的视角可以更方便地进行布局。 一、CSS三大特性 ...
Day03-css基础
06-29
Day03的资源，自用啦啦啦啦啦啦啦啦啦啦爱啦啦啦啦啦啦啦啦啦啦啦啦奥啦绿绿绿绿啦啦啦啦啦啦了了了了了啦啦了了了啦啦啦啦啦啦啦啦啦啦啦阿拉啦啦啦阿拉啦啦阿拉蕾拉阿拉啦啦啦拉拉阿拉啦啦啦啦啦啦啦啦啦阿拉...
26.CSS 继承属性速查表 & 内部聚焦
粉丝们务必加入微信粉丝群
08-18 221
CSS 继承属性速查表CSS 规范明确规定了哪些 CSS 属性是继承的,但相关附录并不是最友好的资源。以下是你最有可能遇到的继承属性的快速参考:border-collapseborder-spacingcaption-sidecolorcursordirectionempty-cellsfont-familyfont-sizefont-stylefont-variantfont-weightfon...
响应式Web设计：纯HTML和CSS的实现技巧
vvvae1234的博客
08-18 763
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。
CSS的:host伪类：精粹自定义Web组件选择艺术
2401_85702623的博客
08-18 580
Web组件是一种自定义HTML元素，允许开发者封装HTML、CSS和JavaScript，创建可重用的组件。影子DOM为这些组件提供了样式和DOM结构的封装。:host伪类允许CSS选择器穿透影子DOM，选择自定义元素的宿主元素。
vue 动态设置每个tab的颜色scss
最新发布
qq_32555123的博客
08-20 198
vue设置动态tab样式和颜色
CSS的:placeholder-shown伪类：精确控制输入框占位符样式
2402_85758349的博客
08-17 939
伪类代表的是一个输入字段（或元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。
CSS——弹性盒（flex）
Fan_web的博客
08-16 1504
本文主要跟大家分享了弹性盒的内容，同时扩充了CSS中的部分知识：像素、视口、移动端、完美视口、vw单位以及适配、响应式布局中的媒体查询等等。下一节将开始分享关于JavaScript的初级学习内容。
CSS+JS实现一个鼠标移动的高亮边框效果
流绪@微梦
08-19 562
我们再在 .card::before 加上一个 transform属性，同时在 .card 上加上 overflow: hidden属性，观察浏览器，神奇的效果出现了！想要实现高亮的效果，我们还需要在 .card 和 .inner 之间再插入一层，这一层是我们实现高亮的关键！假如图中的小圆圈为鼠标位置，当鼠标移动到此位置时，只需要计算把每张卡片中间层的中心偏移到鼠标的位置即可。在Windows系统里有一个很棒的细节效果，元素的渐变高亮边框是可以感知鼠标的，边框的高亮部分会跟随鼠标的移动而移动。
探索tailwindcss多主题切换
xuefeng11111的博客
08-18 463
探索tailwind+css变量切换主题
CSS 对齐
wjs2024的博客
08-19 392
CSS对齐是网页设计和布局的关键部分。通过掌握文本对齐、块级元素对齐、Flexbox对齐和Grid对齐，开发者可以创建出既美观又响应式的网页布局。每种方法都有其适用场景，选择合适的对齐方式可以大大提高开发效率和页面性能。
HTML5与CSS3：前端开发的革新与标准演变
CSS3则在样式表方面取得了重大突破，它引入了动画、过渡效果、3D转换、响应式设计等特性，极大地丰富了网页的视觉表现力。CSS3的渐进增强策略允许开发者为新浏览器提供先进的视觉效果，同时保持向后兼容，确保旧版...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值