尚硅谷html5+css3(3)布局

简介: 尚硅谷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>


5a13ee37fbec4141886e0ae373bd4ada.jpg

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>


afa7b91b591047eda747d538b8e1f51d.jpg

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>


712089dff2714703a2adb09e53671ebc.jpg

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>


05b5b926890649f3b603461da62c7cd1.jpg

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>


6f390a16994042a6958a4bd023af73ca.jpg

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>


903c54cb32ba40f180676b7ed334cfd5.jpg

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>


ff1efcc1e41648e1b52434ef9aeafbe9.jpg

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>


5929254c14d441289cd83b6f7823cc63.jpg

(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>


db3fed95f7cc4e038d9c370421e0d047.jpg

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>


d985c5dc1c974d94b7541ec3e68a403f.jpg

<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>

5b9e921a22c14bba8ea571825e1713bf.jpg

8.浏览器的默认样式
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*浏览器的默认样式:浏览器为元素设置一些默认样式
        会影响页面布局,一般要去除浏览器的默认样式*/
        body {
            /*去除外边距*/
            margin: 0;
        }
 
        p {
            margin: 0;
        }
 
        ul {
            margin: 0;
            padding: 0;
            margin-left: 20px;
            /*去除项目符号*/
            list-style: none;
        }
 
        /*所有元素去除默认样式:*/
        * {
            margin: 0;
            padding: 0;
        }
 
        /*一般不自己写,引用别人的文件来去除浏览器的默认样式
        下面这条放到<style>上面
        <link rel="stylesheet" href="./css/reset/css">*/
 
        .box1 {
            width: 100px;
            height: 100px;
            border: 1px solid black;
 
 
        }
    </style>
</head>
 
<body>
    <!--标签之间自动有间隔(浏览器自动设置了外边距)-->
    <div class="box1">我是box1</div>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
</body>


a05b1500f4b645b5ae2c5c737ccdd501.jpg

9.盒子的尺寸
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            padding: 10px;
            border: 10px solid red;
            /*默认情况下,盒子可见框的大小由内容区、内边距和边框共同决定
            box-sizing,设置盒子尺寸的计算方式(即width和height)
                可选值
                    content-box:默认值,宽度和高度用来设置内容区的大小(140px*140px)
                    border-box:宽度和高度设置整个盒子的大小(100px*100px)
            */
            box-sizing: content-box;
        }
 
        .box2 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            padding: 10px;
            border: 10px solid red;
            box-sizing: border-box;
        }
    </style>
</head>


23d65ead86be4673b549784632609433.jpg

10.轮廓和圆角

(1)轮廓

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /*outline用来设置元素的轮廓线,用法和border一样
            但轮廓不会影响可见框的大小*/
            outline: 10px solid red;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border: 10px solid red;
        }
    </style>
</head>
 
<body>
    <div class="box1"></div>
    <span>outline</span>
    <div class="box2"></div>
    <span>border</span>
</body>


efba23f215dc4f64ba00f0dd0f99a7d4.jpg

(2)阴影

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /*box-shadow:设置元素的阴影效果,不影响页面布局
            阴影默认在元素正下方,所以需要偏移量
                第1个值:水平偏移:正右负左
                第2个值:垂直偏移:正下负上
                第3个值:阴影模糊半径
                第4个值:阴影颜色
                */
            box-shadow: 10px 10px 20px rgb(0, 0, 0, .5);
        }
    </style>
</head>
 
<body>
    <div class="box1"></div>
</body>


71ce08cf55c74174902637f6fac97386.jpg

(3)圆角

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /*圆角:border-radius同时设置四个角
            也可以分别设置:
                border-top-left-radius
                border-top-right-radius
                border-bottom-left-radius
                border-bottom-right-radius
            */
            /*设置圆的半径*/
            border-top-left-radius: 50px;/*正圆*/
            border-top-right-radius: 50px 100px;/*椭圆*/
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /*设置为圆形*/
            border-radius: 50%;
        }
    </style>
</head>
 
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>


dadc0bb76e58466888d9954249046b18.jpg

d2d93db17af9422598a6c16e45a4619d.jpg

相关文章
|
2天前
|
前端开发 开发者 容器
CSS进阶-Grid布局高级应用
【6月更文挑战第16天】**CSS Grid布局是CSS3的强大力量,用于复杂二维布局。然而,隐式网格、未命名Grid线和缺少响应式设计是常见问题。解决方法包括显式定义网格结构、命名Grid线和结合媒体查询实现响应式。高级技巧涉及自适应列宽、复杂区域布局和元素层叠对齐。代码示例展示了响应式Grid的用法。掌握这些能提升布局效率和设计灵活性。**
|
2天前
|
前端开发 开发者 容器
CSS进阶-Flexbox高级布局技巧
【6月更文挑战第16天】Flexbox是CSS3的布局模块,简化响应式设计和复杂多列布局。文章探讨了Flex容器与项目属性的区分、垂直居中、防止元素溢出等常见问题及解决方案。此外,还分享了等宽不同高列、圣杯布局和自适应间距等高级技巧。通过示例展示了如何创建垂直居中布局,强调实践和理解核心概念是掌握Flexbox的关键。
|
4天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
4天前
|
前端开发 JavaScript 容器
css实现瀑布流布局
css实现瀑布流布局
|
4天前
|
前端开发 开发者
CSS进阶-CSS3多列布局
【6月更文挑战第14天】CSS3的多列布局简化了复杂布局,提供杂志样式排版。通过`column-*`属性如`column-count`和`column-gap`实现内容分割和列间距控制。常见问题包括内容溢出、列间距不当和兼容性问题。解决方法包括使用`word-break`和`hyphens`处理长单词,灵活设置列宽和列数,以及为旧浏览器提供回退方案。代码示例展示了一个自动平衡列高的两列布局。理解并解决这些问题将帮助开发者更好地利用CSS3多列布局。尽管有兼容性挑战,但它是现代网页设计的重要工具。
|
4天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
10 1
|
4天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
18 2
|
6天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
16 0
|
6天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
14 0
|
1月前
|
容器
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?