尚硅谷html5+css3(3)布局

1.文档流normal flow

-网页是一个多层结构

-通过CSS可以分别为每一层设置样式

-用户只能看到最顶层

-最底层:文档流(我们所创建的元素默认都是从文档流中进行排列)

<head>
    <style>
        .box1 {
            background-color: blue;
        }
        /*它的父元素为body*/
        .box2 {
            width: 100px;
            background-color: red;
        }
        span {
            background-color: aqua;
        }
    </style>
</head>
<!--
    元素有两个状态:在文档流中/不在文档流(现在只考虑前者)
    -元素在文档流(基岩)中有什么特点:(元素也可以脱离文档流,不再区分块和行内)
        -块元素 div
            --块元素会在页面中独占一行
            --默认宽度时父元素的全部(即浏览器设置宽度为多少,背景就宽多少)
            --默认高度是子元素的总和
        -行内元素 span
            --行内元素不会只占一行,只占自身大小
            --在页面中自左向右排列(若一行容纳不了,则会换行)
            --默认高度和宽度跟里面的元素有关
    -->

<body>
    <!--两个块元素-->
    <div class="box1">
        我是div1
    </div>
    <div class="box2">
        我是div2
    </div>
    <span>我是span1</span>
    <span>我是span2</span>
</body>

2.盒子模型

<!--盒子模型(对元素进行布局)
    -CSS将页面中的所有元素都设置了一个矩形的盒子
    -将元素设置为矩形的盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置
    -每一个盒子都有一下几个部分组成:
        --内容区(content)
        --内边距(padding)
        --边框(border)
        --外边距(margin),决定盒子位置
-->

<head>
    <style>
        .box1 {
            /*内容区content,元素中的所有子元素和文本都在内容去中
            大小由width和height来设置*/
            width: 100px;
            height: 100px;
            background-color: aqua;
            /*边框border,边框属于盒子边缘
            设置边框:
                宽度 border-width
                颜色 border-color
                样式 border-style
            边框的大小会影响到盒子大小(盒子内容一直不变)
            */
            border-width: 20px;
            border-color: red;
            border-style: solid;
        }
    </style>
</head>

<body>
    <div class="box1">
        1234
    </div>

</body>

 

1.盒子模型-边框
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: rgb(6, 106, 139);
            /*边框,下面三个元素缺一不可(border-width有默认值,一般3px)*/
            /*border-xxx-width,xxx可以为top right bottom left来指定某一个边的宽度*/
            border-width: 10px 20px 30px 40px;
            /*边框上右下左(顺时针)宽度*/

            /*指定边框颜色,同样可以分别制定四个边框的颜色,也可以用border-xxx-color指定颜色*/
            border-color: orange red yellow green;

            /*指定边框样式,与上面类似。默认值为none(无边框)
                solid 实线
                dotted 点状虚线
                dashed 虚线
                double 双线*/
            border-style: solid dotted dashed double;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: rgb(6, 106, 139);
            /*border简写属性,没有顺序要求
            border-xxx xxx可以为top right bottom left单独设置一边的样式*/
            border: solid 10px orange;
            /*单独去掉一边*/
            border-bottom: none;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

2.盒子模型-内边距
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: rgb(6, 106, 139);
            border: solid 10px orange;
            /*内边距padding
                -内容区和边框之间的距离
                -四个方向:padding-top/right/bottom/left

                内边距的设置会影响到盒子大小,颜色默认为内容颜色
                盒子可见框的大小由内容区+内边距+边框共同决定*/
            padding-top: 50px;
            padding-bottom: 50px;
            padding-left: 50px;
            padding-right: 50px;
            /*padding的简写,上右下左,跟前面的border一样*/
            padding: 10px 20px 30px 40px;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="inner">

        </div>
    </div>

</body>

3.盒子模型-外边距
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 10px red solid;
            /*外边距margin
                不影响盒子可见框的大小
                影响盒子的位置
                共有四个方向的外边距:
                margin-top/right/bottom/left
          */
            margin-top: 100px; /*盒子向下移动*/
            margin-left: 100px; /*盒子向右移动*/
            /*margin简写,跟border一样*/
            margin: 100px,100px; 
        }
    </style>
</head>

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

4.盒子模型-水平方向的布局
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            /*width默认为auto*/
            width: 800px;
            height: 200px;
            border: 10px red solid;
        }

        /*元素水平方向的布局:
        元素在其父元素中水平方向的位置有以下几个属性共同决定
            margin-left
            border-left
            padding-left
            width
            padding-right
            border-right
            margin-right(一般不用,浏览器会自动调整确保下面的等式成立)
        要满足以下等式:
            上面的加起来=父元素内容区的宽度
        若不成立,则称为过度约束,等式会自动调整(一般调整margin-right)

        水平居中:width:xxxpx;margin:0 auto;
        */
        .inner {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin-left: 100px;
            margin-right: auto;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

5.盒子模型-垂直方向的布局 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*元素垂直方向的布局*/
        .outer {
            width: 250px;
            height: 400px;
            background-color: #bfa;
            /*默认情况下父元素的高度被子元素撑开
            若设置具体值,则按具体值来                                                                                      */
        }

        /*子元素实在父元素的内容区中排列的
        若子元素大于父元素,则溢出
         用overflow处理溢出的子元素
            overflow:visible:默认显示
                     hidden:隐藏溢出部分
                     scroll:生成两个滚动条,通过滚动条查看完整内容
                     auto 根据需要生成滚动条*/
        .inner {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 100px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner">111111111111111111111111111111111111111111111
            111111111111111111111111111111111111111111111111111111111
        </div>
    </div>
</body>

6.盒子模型-外边距的折叠

(1)兄弟元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*外边距的重叠
            "相邻"的"垂直方向"的外边距会出现重叠现象
            兄弟元素
                相邻垂直外边距取两者的较大值
                特殊情况:
                    如果外边距一正一负,则取两者的和
                    如果外边距都为负,则取绝对值大的*/
        .box1,
        .box2 {
            width: 50px;
            height: 50px;
            font-size: 50px;
        }

        /*box1的下外边距和box2的上外边距重叠了
        尽管两个加起来是200px,但实际上是100px*/
        .box1 {
            background-color: aqua;
            /*设置下外边距*/
            margin-bottom: 50px;
        }

        .box2 {
            background-color: orange;
            /*设置上外边距*/
            margin-top: 50px;
        }
    </style>
</head>

(2)父子元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*外边距的重叠
            "相邻"的"垂直方向"的外边距会出现重叠现象
            父子元素:
                相邻外边距,子元素会传递给父元素
                会影响页面的布局,因此必须要处理
                */
        /*将子元素box4下移,不移动父元素box3*/
        .box3 {
            width: 200px;
            height: 100px;
            background-color: aqua;
            padding-top: 100px;
        }
        .box4 {
            width: 100px;
            height: 100px;
            background-color: orange;

        }
    </style>
</head>
<body>
    <div class="box3">
        <div class="box4"></div>
    </div>
</body>

7.行内元素的盒子模型                
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .s1 {
            background-color: yellow;
            /*行内元素的盒子模型
                行内元素不支持设置宽度和高度
                行内元素可以设置padding,垂直方向的padding不会影响页面布局
                行内元素可以设置border,垂直方向的border不会影响页面布局
                行内元素可以设置margin,垂直方向的margin不会影响页面布局*/

            /*width和height无效*/
            width: 100px;
            height: 100px;
            padding: 100px;
            border: 50px solid red;
            margin: 20px;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
</head>

<body>
    <span class="s1">
        我是span
    </span>
    <div class="box1">我是box1</div>
</body>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .s1 {
            background-color: yellow;
            margin: 100px;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        a {
            /*对于超链接的放大
                width和height没有用

                使用display设置元素显示的类型,这样可以使用width和height
                    可选值 (若隐藏,则不占位置)
                        inline:将元素设为行内元素
                        block:将元素设为块元素
                        inline-block:行内块元素,既可以设置宽高,又不会独占一行
                        table:将元素设为表格
                        none:隐藏(可以设置为鼠标点击而显示)*/

            /*visibility设置元素的显示状态
                可选值(若隐藏,则依然占位置)
                    visible:默认值,正常显示
                    hidden:隐藏,但是依然占据页面位置*/

            display: inline-block;/*缺点:兼具行内元素和块元素的优缺点,两者之间有间隔*/
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <a href="javascript:;">超链接</a>
    <a href="javascript:;">超链接</a>
    <span class="s1">我是span</span>
    <div class="box1">我是box1</div>
</body>

未完待续。。 

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

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

相关文章

精益管理培训在哪些行业比较适用?

在当今瞬息万变的市场环境中&#xff0c;企业竞争日趋激烈&#xff0c;如何提升内部管理水平、降低成本、提高效率&#xff0c;成为企业持续发展的关键。精益管理作为一种先进的管理理念和方法&#xff0c;正逐渐被越来越多的行业所采纳和应用。本文&#xff08;深圳天行健精益…

MSO7104A安捷伦MSO7104A示波器

181/2461/8938产品概述&#xff1a; 带宽:1 GHz通道:4个模拟通道和16个数字通道采样速率:4 GSa/s记录长度:标准8 Mpts MegaZoom III深内存垂直分辨率:8位自动量程和峰值检测有洞察力的应用软件分段存储器使用FFT的波形数学模拟高清电视/EDTV触发器 总线模式显示和简单的软件升…

代码随想录day42|背包问题、416. 分割等和子集

背包问题&#xff1a; 01 背包 二维数组dp[i][j]解法 纯01背包&#xff1a;有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 dp[i][j]:从…

React面试

React渲染流程(重点) jsx描述界面 jsx babel render function>vdom vdom fiber 在进行渲染 vdom 转换fiber reconcile 转换过程创建dom commit 到domvdom React Element 对象, 只记录了子节点, 没有记录兄弟节点, 因为渲染不可中断 fiber fiberNode 对象, 是一个链表 父节…

算法:完全背包问题dp

文章目录 一、完全背包问题的特征二、定义状态三、状态转移四、降维优化五、参考例题5.1、Acwing&#xff1a;3.完全背包问题5.2、Acwing&#xff1a;900. 整数划分 一、完全背包问题的特征 完全背包问题是动态规划中的一种经典问题&#xff0c;它的主要特征可以总结如下&…

政安晨:【深度学习神经网络基础】(四)—— 自组织映射

目录 自组织映射和邻域函数 理解邻域函数 墨西哥帽邻域函数 计算SOM误差 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: 政安晨的机器学习笔记 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

APx500音频分析仪硬件简介

两通道模拟输出&#xff0c;两通道或以上的模拟输入接口 线性编码数字音频接口&#xff08;AES/EBU,TOSLINK,SPDIF&#xff09;Linear PCM 脉冲密度调制码流&#xff08;需要APx-PDM选件支持&#xff09; Bluetooth蓝牙音频码流&#xff08;需APx-BT选件支持&#xff09; 最…

打印月历 Open Judge

题面链接: http://noi.openjudge.cn/ch0113/24/ 题目描述: 评析: 大模拟题&#xff0c;考察的是你的耐心和毅力&#xff01;很不错的模拟题练习题&#xff0c;小白(like me)可以练一练 思路: 先一个月一个月的模拟&#xff0c;求出来题目问的这个一年的这一个月的第一天是星期…

C#互联网区域医学检验中心云LIS系统源码

云LIS联通四级&#xff08;市、县、乡、村&#xff09;检验服务网构建互联网检验服务新体系落地检验资源区域共享建设。云LIS系统是一种基于云计算技术的区域实验室信息管理系统&#xff0c;它的主要功能是管理实验室中的各种信息数据&#xff0c;包括样品数据、检测结果、仪器…

多视觉传感器协同弱小目标检测

源自&#xff1a;指挥与控制学院 作者&#xff1a;王田&#xff0c; 程嘉翔&#xff0c; 刘克新&#xff0c;王薇&#xff0c; 吕金虎 “人工智能技术与咨询” 发布 摘 要 多视觉传感器协同对空实现全区域覆盖的弱小目标检测&#xff0c;在近距离防空领域中具有重要意义。…

酷开科技不断深耕智能电视领域,用酷开系统带给消费者更多可能性

在这个网络快速发展的时代&#xff0c;电视行业也发生了巨大变革。与以往单纯的“看”电视不同&#xff0c;人们不再满足于现有的状态&#xff0c;消费者对电视娱乐的追求更加丰富&#xff0c;这也就带给智能电视产业无限的发展可能。酷开科技瞄准这一产业趋势&#xff0c;不断…

Golang | Leetcode Golang题解之第18题四数之和

题目&#xff1a; 题解&#xff1a; func fourSum(nums []int, target int) (quadruplets [][]int) {sort.Ints(nums)n : len(nums)for i : 0; i < n-3 && nums[i]nums[i1]nums[i2]nums[i3] < target; i {if i > 0 && nums[i] nums[i-1] || nums[i]…

VLAN间的通信

目录 原理概述 实验目的 实验内容 实验拓扑 1.基本配置 2.使用VLANIF接口实现VLAN间的通信 3.使用VLAN聚合实现VLAN间的通信。 原理概述 通常情况下&#xff0c;如果不采用一些特殊的方法&#xff08;如采用Hybrid端口的方法&#xff09;&#xff0c;不同的VLAN之间是不…

力扣--动态规划完全背包/深度优先08.11.零币

如果暴力的深度优先&#xff1a; class Solution {// 定义硬币的面值数组int fangx[4] {25, 10, 5, 1};// 计数变量&#xff0c;用于记录配合得到 n 的方法数long long count 0;// 定义深度优先搜索函数// now: 当前总值// n: 目标总值// notbig: 上一次选择的硬币面值索引…

PCB学习记录-----入门基础知识

一、搭建环境 1.下载嘉立创EDA 软件下载 - 嘉立创EDA (lceda.cn) 选专业版 在线编辑&#xff1a;嘉立创EDA(专业版) - V2.1.45 (lceda.cn) 官方教程&#xff1a;立创EDA专业版-使用教程 (lceda.cn) 2.新建工程 文件-新建-项目&#xff0c;右键Board1可以重命名&#xff…

Debian 12.0安装NVM管理器

cd到一个自己创建的目录 要在Debian 12.0上安装 Node Version Manager&#xff08;NVM&#xff09;来管理 Node.js 版本&#xff0c;您可以按照以下步骤进行操作&#xff1a; 首先&#xff0c;您需要使用 cURL 下载 NVM 安装脚本。在终端中运行以下命令&#xff1a; curl -o…

读博做FPGA上的AI加速能不能搞啊?

从企业的角度来看&#xff0c;选择在FPGA上进行AI加速仍然有其一定的优势和适用场景&#xff0c;但也有一些挑战需要考虑。我这里有一套嵌入式入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习嵌入式&#xff0c;不妨点个关注&#xff0c;给…

使用Datax自定义采集组件Reader/Writer实现国产数据库支持以及_Datax数据清洗/过滤规则功能自定义---大数据之DataX工作笔记007

我们基于datax来做的自己的数据采集系统,现在基本的数据采集已经实现了,也就是调用datax的数据采集能力,实现在已支持的数据库之间同步数据.我们是基于datax-web实现的,里面都有开源的代码了,可以分析以后拿过来用,这个过程并不复杂,而且,结合xxljob的web那个开源项目,也可以让…

S19文件解析

目录 一、概述 二、S19文件解析 三、举例 一、概述&#xff1a; Motorola S-record是一种文件格式&#xff0c;由摩托罗拉在20世纪70年代中期为Motorola 6800处理器创建&#xff0c;以ASCII文本形式传达二进制信息的十六进制值&#xff0c;其文件格式也可能为SRECORD&#xf…

如何使用宝塔面板搭建MySQL数据库并实现无公网IP远程访问

文章目录 前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道 4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置,下面简单几步,通过宝塔面板cp…