前端-css-03

1.盒子模型

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        .item {
            width: 400px;
            padding: 20px;
            margin: 30px;
            background: #ccc;
            border: 4px dashed #900;
        }
    </style>
</head>
<body>
    <div class="item">
        仃可厅终不见定的用台力，也朗太五没，呼救承我的六应设仓孔竟次办了好变非设，自者后韩以生，说羊后只惜病承和了也，导貂那九土别说，负侯原诗本太化意之者已魂的其归变，奔气都其天到，朗司脱有郭丹子韩新首天死，斯君联求骂订久韩这为升出得，下不家耳量衣法通为，憾的视。
    </div>

    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium ad in ex architecto ipsa quibusdam, dolorum adipisci eligendi modi possimus delectus? Nobis dolores a consequatur tempora quis nam expedita accusantium!</div>
</body>
</html>

内容（content）： 内容是元素的核心区域，元素中的文本内容和后代元素都显示在内容上。

内边距（padding）：内容与元素边界的距离。

边框（border）：位于元素的边界上。

外边距（margin）：在元素边界之外，是与相邻元素的距离。

1.1盒子模型的相关概念

1. 将元素比作成一个盒子
2. 页面布局就是盒子的排列和堆砌

 1.2影响盒子大小的因素

盒子的总宽度 = 内容宽度 + 左右内边距 + 左右边框
盒子的总高度 = 内容高度 + 上下内边距 + 上下边框

1.3盒子中的内容区域

设置内容区域的宽高的 CSS 属性

CSS 属性名功能属性值
width宽度长度
max-width最大宽度长度
min-width最小宽度长度
height高度长度
max-height最大高度长度
min-height最小高度长度

1.4元素的默认宽高

默认总宽度 = 父元素内容宽度 - 自身的左右外边距
默认内容宽度 = 父元素内容宽度 - 自身的左右外边距 - 自身的左右内边距 - 自身的左右边框

1.4.1行内元素：

默认宽度被内容撑开，没有内容就没有宽度
默认高度被内容撑开，没有内容也会有一个文字的高度

1.4.2行内块元素： 

默认宽度被内容撑开，没有内容就没有宽度
默认高度被内容撑开，没有内容就没有高度

块级元素：

默认宽度被内容撑开，没有内容就没有高度

 1.5盒子的内边距 padding

相关 CSS 属性

CSS 属性名功能属性值
padding-left左内边距长度
padding-right右内边距长度
padding-top上内边距长度
padding-bottom下内边距长度
padding上下左右内边距多个长度空格分隔

1.5.1padding 设置规则

1. 不能是负值
2. 使用百分比，上下左右内边距都参照父元素内容宽度

 padding 复合属性的设置规则：

/* 1个值: 上下左右 */
padding: 20px;
/* 2个值： 上下 左右*/
padding: 40px 30px;
/* 3个值： 上 左右 下*/
padding: 10px 20px 30px;
/* 4个值： 上 右 下 左*/
padding: 15px 25px 35px 45px;

1.5.2不同显示模式的元素设置内边距：

1. 块级元素、行内块元素内边距可以完美设置
2. 行内元素，左右内边距可以完美设置，上下内边距效果不完美

1.6边框 border 

CSS 属性名功能属性值
border-style边框风格

none：无风格。

solid：实线。

dashed：虚线。

dotted：点线。

double：双实线。

border-color边框颜色颜色，默认值是文字颜色
border-width边框宽度长度，默认值是3px
border同时设置风格、颜色、宽度多个值使用空格分隔

border-left-style

border-left-color

border-left-width

border-left

border-right-style

border-right-color

border-right-width

border-right

border-top-style

border-top-color

border-top-width

border-top

border-bottom-style

border-bottom-color

border-bottomwidth

border-bottom

border的子属性有： border-style、border-color、border-width

border-left 的子属性： bordre-left-style、border-left-color、border-left-width
border-right border-top border-bottom 各种具有子属性

border-style 的子属性： border-left-style、border-right-style、border-top-style、border-bottom-style
border-color、border-width 各种具有子属性

1.7外边距 margin

CSS 属性名功能属性值
margin-left左外边距长度
margin-right右外边距长度
margin-top上外边距长度
margin-bottom下外边距长度
margin外边距复合属性多个值使用空格分隔

1. 外边距是元素与相邻兄弟元素的距离，如果没有相邻兄弟元素就是与父元素内容边界的距离
2. 左外边距和上外边距主要影响自己的位置，右外边距和下外边距主要影响相邻兄弟元素的位置 

1.7.1margin 值设置的规则：

1. 使用百分比，上下左右内边距都参照父元素内容宽度
2. 外边距可以是负值
3. 块级元素左右外边距都设置为 auto，该元素在父元素中横向居中

1.7.2margin 复合属性的设置规则：

1个值： 上下左右
2个值： 上下 左右
3个置： 上 左右 下
4个值： 上 右 下 左

 1.7.3不同显示模式的元素设置外边距：

1. 块级元素、行内块元素外边距可以完美设置
2. 行内元素，只能设置左右外边距，上下外边距设置无效

1.7.4margin 塌陷

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        .wrapper {
            width: 800px;
            /* height: 400px; */
            background: #ccc;

            /* 方案一 父元素有边框 */
            /* border: 1px solid #f00; */

            /* 方案二： 父元素有内边距 */
            /* padding: 10px; */

            /* 方案三： 父元素开启BFC */
            /* overflow: hidden; */
        }

        .box {
            /* display: inline-block; */
            margin-left: 100px;
          
            width: 600px;
            text-align: center;
            font-size: 40px;
            line-height: 100px;
            color: #fff;
            background: #900;
        }

        .box01 {
            margin-top: 60px;
        }

        .box02 {
            margin-top: 20px;
        }

        .box03 {
            margin-top: 20px;
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, minus!</div>
    <div class="wrapper">
        <div class="box box01">自言惶，死降就，就。</div>
        <div class="box box02">自言惶，死降就，就。</div>
        <div class="box box03">自言惶，死降就，就。</div>
    </div>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, minus!</div>

</body>
</html>

1. 最上面元素的上外边距、最下面元素的下外边距会塌陷到父元素
2. 外边距塌陷只会发生在块级元素上

1.7.4.1 解决 margin 塌陷

方案一： 父元素设置边框
方案二： 父元素设置内边距
方案三： 父元素开启BFC，设置 overflow:hidden;

1.7.5 margin 合并（不用解决）

1. 上面兄弟元素的下外边距会与下面兄弟元素的上外边距合并，两者之间距离取较大的外边距
2. 外边距合并只会发生在块级元素上

 

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        .wrapper {
            padding: 20px;
            width: 600px;
            height: 400px;
            background: #ccc;
        }

        .box {
            /* display: inline-block;
            margin-left: 20px;
            margin-right: 20px; */
            width: 100px;
            height: 100px;
        }

        .box01 {
            margin-bottom: 30px;
            background: #900;
        }

        .box02 {
            margin-top: 40px;
            background: #080;
        }

        .box03 {
            background: #099;
        }


    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box box01"></div>
        <div class="box box02"></div>
        <div class="box box03"></div>
    </div>



   
</body>
</html>

 1.8内容溢出

CSS 属性名功能属性值
overflow设置溢出内容的显示方式

visible：显示，默认值。

hidden：隐藏。

scroll：滚动条。

auto：自动。

overflow-xx轴方向溢出内容的显示方式

visible：显示，默认值。

hidden：隐藏。

scroll：滚动条。

auto：自动。

overflow-yy轴方向溢出内容的显示方式

visible：显示，默认值。

hidden：隐藏。

scroll：滚动条。

auto：自动。

auto 和 scroll 的区别：

1. scroll 不论内容是否会溢出，都有滚动条
2. auto 只有内容溢出才会显示滚动条

1.9隐藏元素

1. 设置 visibility:hidden;   元素隐藏但是占据位置
2. 设置 display:none;  元素彻底隐藏，不占据位置 

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        .wrapper {
            padding: 20px;
            width: 600px;
            height: 400px;
            background: #ccc;
        }

        .box {
            width: 300px;
            height: 100px;
        }

        .box01 {
            background: #900;
        }

        .box02 {
            background: #080;

            visibility: hidden;
            /* display: none; */
            /* visibility: visible;
            visibility: hidden;
            display: none; */
        }

        .box03 {
            background: #099;
        }


    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box box01"></div>
        <div class="box box02"></div>
        <div class="box box03"></div>
    </div>



   
</body>
</html>

可以隐藏没有任何内容的div

 2.样式继承和自带样式

2.1哪些样式可以被后代元素继承：

1. 字体样式 font-size、font-weight、font-style font-family、font
2. 文字颜色 color
3. 文本样式 letter-spacing、word-spacing、text-decoration、text-indent、text-align、line-height （vertical-align 不可以被继承）

2.2自带样式（用户代理样式）

标题h1~h6 自带 font-size、font-weight、上下外边距
p 自带 上下外边距
em 自带 font-style
strong 自带 font-weight
a 自带 color、text-decoration、cursor
ul、ol 自带 padding-left、上下外边距

2.3继承的样式、自带的样式、直接设置的样式
直接设置的样式 > 自带的样式 > 继承的样式

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/508611.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Spire.PDF for .NET【文档操作】演示：合并 PDF 文件并添加页码

Spire.PDF for .NET【文档操作】演示：合并 PDF 文件并添加页码

搜索了这么多有关 PDF 合并的信息后&#xff0c;很容易发现&#xff0c;无论您在线合并 PDF 文件还是使用 C#/VB.NET 来实现此任务&#xff0c;您都无法逃避对 PDF 文件安全等一些重要问题的担忧&#xff0c;因此需要花费多少时间或者合并后的文件是否支持打印页码等等。不过&a…
阅读更多...
【机器学习300问】60、图像分类任务中，训练数据不足会带来什么问题？如何缓解图像数据不足带来的问题？

【机器学习300问】60、图像分类任务中，训练数据不足会带来什么问题？如何缓解图像数据不足带来的问题？

在机器学习中&#xff0c;绝大部分模型都需要大量的数据进行训练和学习&#xff08;包括有监督学习和无监督学习&#xff09;&#xff0c;然而在实际应用中经常会遇到训练数据不足的问题。就比如图像分类这样的计算机视觉任务&#xff0c;确实依赖于大规模且多样化的训练数据以…
阅读更多...
Reversing Linked List

Reversing Linked List

Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elements on L. For example, given L being 1→2→3→4→5→6, if K3, then you must output 3→2→1→6→5→4; if K4, you must output 4→3→2→1→5→6. Input Specifi…
阅读更多...
数据可视化高级技术(Echarts)

数据可视化高级技术(Echarts)

目录 &#xff08;一&#xff09;数据可视化概念及Echarts基础知识 数据可视化的好处&#xff1a; 数据可视化的目标 数据可视化的基本流程 &#xff08;二&#xff09;数据图表 类别比较图表&#xff1a; 数据关系图表&#xff1a; 数据分布图表&#xff1a; 时间序列…
阅读更多...
VScode使用Prettier格式化代码

VScode使用Prettier格式化代码

1、安装Prettier插件 2、扩展设置 3、设置.prettierrc.json配置文件路径 4、.prettierrc 配置文件 .prettierrc.json 是 Prettier 格式化工具的配置文件&#xff0c;用于指定代码格式化的规则和风格。下面是一些可能的配置选项&#xff0c;请自行选择&#xff1a; {"prin…
阅读更多...
vim copilot插件安装使用

vim copilot插件安装使用

copilot简介 在使用不熟悉的开发语言或函数库进行开发工作时&#xff0c;虽然可以通过阅读开发文档或示例代码的方式学习开发&#xff0c;但这种方式学习成本较高、效率较低&#xff0c;且后续不一定会用上。 GitHub Copilot是一个由GitHub开发的机器学习工具&#xff0c;可以…
阅读更多...
HarmonyOS 应用开发之通过关系型数据库实现数据持久化

HarmonyOS 应用开发之通过关系型数据库实现数据持久化

场景介绍 关系型数据库基于SQLite组件&#xff0c;适用于存储包含复杂关系数据的场景&#xff0c;比如一个班级的学生信息&#xff0c;需要包括姓名、学号、各科成绩等&#xff0c;又或者公司的雇员信息&#xff0c;需要包括姓名、工号、职位等&#xff0c;由于数据之间有较强…
阅读更多...
xshell7连接ubuntu18.04

xshell7连接ubuntu18.04

&#x1f3a1;导航小助手&#x1f3a1; 1.查看ubuntu IP2.开启openssh-server3.静态IP设置4.Xshell连接 1.查看ubuntu IP 输入下面命令查看IP ifconfig -a可以看到网卡是ens33&#xff0c;IP为192.168.3.180。 2.开启openssh-server 1、执行下句&#xff0c;下载SSH服务 s…
阅读更多...
标定系列——预备知识-OpenCV中相机标定相关函数（十一）

标定系列——预备知识-OpenCV中相机标定相关函数（十一）

标定系列——预备知识-OpenCV中相机标定相关函数&#xff08;十一&#xff09; 说明记录 说明 对相机标定过程中使用的函数进行记录 记录
阅读更多...
vscode 自用的一些配置

vscode 自用的一些配置

目录 1&#xff0c;修改默认配置1&#xff0c;关闭预览模式2&#xff0c;取消自动定位到左侧边栏 2&#xff0c;自定义快捷键1&#xff0c;手动定位到左侧边栏2&#xff0c;关闭其他3&#xff0c;其他常用快捷键 3&#xff0c;插件1&#xff0c;和 git 相关的GitlensGit Histor…
阅读更多...
K8s Pod亲和性、污点、容忍度、生命周期与健康探测详解（下）

K8s Pod亲和性、污点、容忍度、生命周期与健康探测详解（下）

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Kubernetes航线图&#xff1a;从船长到K8s掌舵者》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 五、健康探测 1、健康探测的概念 2、Pod启动探测…
阅读更多...
如何在Portainer中创建Nginx服务并搭建静态站点实现公网访问本地网站

如何在Portainer中创建Nginx服务并搭建静态站点实现公网访问本地网站

文章目录 前言1. 安装Portainer1.1 访问Portainer Web界面 2. 使用Portainer创建Nginx容器3. 将Web静态站点实现公网访问4. 配置Web站点公网访问地址4.1公网访问Web站点 5. 固定Web静态站点公网地址6. 固定公网地址访问Web静态站点 前言 Portainer是一个开源的Docker轻量级可视…
阅读更多...
VTK 简介

VTK 简介

VTK 简介 VTK 简介什么是 VTK&#xff1f;VTK 能做什么&#xff1f;VTK 的基本组成VTK 的框架结构VTK 的数据结构VTK 的可视化流程参考 VTK 简介 什么是 VTK&#xff1f; VTK&#xff0c;全称是Visualization Toolkit&#xff0c;即可视化工具包。是一个开源、跨平台、可自由…
阅读更多...
OpenHarmony实战开发-image、image-animator组件的使用。

OpenHarmony实战开发-image、image-animator组件的使用。

介绍 OpenHarmony提供了常用的图片、图片帧动画播放器组件&#xff0c;开发者可以根据实际场景和开发需求&#xff0c;实现不同的界面交互效果&#xff0c;包括&#xff1a;点击阴影效果、点击切换状态、点击动画效果、点击切换动效。 相关概念 image组件&#xff1a;图片组件…
阅读更多...
物联网实战--入门篇之(七)嵌入式-MQTT

物联网实战--入门篇之(七)嵌入式-MQTT

目录 一、MQTT简介 二、MQTT使用方法 三、MQTT驱动设计 四、代码解析 五、使用过程 六、总结 一、MQTT简介 MQTT因为其轻量、高效和稳定的特点&#xff0c;特别适合作为物联网系统的数据传输协议&#xff0c;已经成为物联网事实上的通信标准了。关于协议的具体内容看看这…
阅读更多...
苹果应用上架成功之道

苹果应用上架成功之道

苹果上架要求是苹果公司对于提交应用程序到苹果商店上架的要求和规定。这些要求主要是为了保证用户体验、应用程序的质量和安全性。以下是苹果上架要求的详细介绍&#xff1a;1. 应用程序的内容和功能必须符合苹果公司的规 苹果上架要求是苹果公司对于提交应用程序到苹果商店上…
阅读更多...
CListCtrl中高亮插入行，条目上移下移

CListCtrl中高亮插入行，条目上移下移

1. 样式修改 2. 关键代码 BOOL CMFCApplication3Dlg::OnInitDialog() {CDialogEx::OnInitDialog();// // 代码省略......//// 设置此对话框的图标。 当应用程序主窗口不是对话框时&#xff0c;框架将自动// 执行此操作SetIcon(m_hIcon, TRUE); // 设置大图标SetIcon(m_hIc…
阅读更多...
ubuntu软件推荐(2)：终端美化 tabby+oh-my-zsh

ubuntu软件推荐(2)：终端美化 tabby+oh-my-zsh

文章目录 一、tabby下载二、tabby安装三、安装Oh-my-zsh1. 安装zsh2. 设置默认终端为zsh3. 下载安装oh-my-zsh3. 根据自己喜好安装字体&#xff08;略&#xff09;4. 在tabby终端修改字体5. 安装oh-my-zsh插件6. 修改主题插件生效 一、tabby下载 https://github.com/Eugeny/ta…
阅读更多...
预处理指令——一些比较少见的概念

预处理指令——一些比较少见的概念

前言&#xff1a;预处理是我们的c语言源代码成为可执行程序的第一个步骤。而宏和预处理指令都是在这个阶段完成。本节内容就是关于宏和预处理指令相关知识点的解析。 目录 宏 预定义符号 #define定义常量 #define定义符号 #define定义宏 带副作用的宏参数 宏的替换规则…
阅读更多...
2024最新GPT4.0使用教程：GPTs，AI绘画，AI换脸，AI绘画，文档分析一站式解决

2024最新GPT4.0使用教程：GPTs，AI绘画，AI换脸，AI绘画，文档分析一站式解决

一、前言 ChatGPT3.5、GPT4.0、相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和用户进行创作交流。 然而&#xff0c;GPT-4对普通用户来说都是需要额外付费才可以…
阅读更多...
最新文章

Copyright @ 2022~2023