【静态页面架构】CSS之盒子模型

最新推荐文章于 2022-02-20 16:09:13 发布
最新推荐文章于 2022-02-20 16:09:13 发布
阅读量154 收藏
点赞数
原文链接：https://segmentfault.com/a/1190000016184465
版权

CSS架构

盒子模型；

以内容区(显示文本和图像)

内边距(内容区至边距的距离)

边距(内容区的边界)

外边距(元素的边框之间的距离)

1.边距；

border属性；

简写属性用来设置边距的上(top)右(right)下(bottom)左(left)。宽度，颜色和样式

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            border-right: 5px double darkgray;
            border-bottom: 10px dashed red;
            border-left: 15px dotted lime;
        }
    </style>
</head>
<body>
<div></div>
</body>

盒子的阴影；

以box-shadow属性设置盒子阴影效果

offset-x表示阴影的水平方向偏移量；
负值为左偏移正值为右偏移

offset-y表示阴影的垂直方向偏移量；
负值为左偏移正值为右偏移

 <style>
        div{
            width:200px;
            height: 200px;
            background-color: blue;
            box-shadow: 3px 3px 3px black;
            /*设置盒子阴影*/
        }
    </style>
</head>
<body>
<div></div>
</body>

边框圆角；

以border-radius定义来设置边距的圆角；直角，圆角还是椭圆角

<style>
        div {
            width: 100px;
            height: 100px;
        }
        #qq {
            background-color:  red;
            border-radius: 25px;
        }
        #ww {
            background-color:  blue;
            border-radius: 50px;
        }
        #ee {
            background-color: lime;
            border-radius: 50px 25px;
        }
        img {
            border-radius: 50px;
        }
    </style>
</head>
<body>
<div id="qq"></div>
<div id="ww"></div>
<div id="ee"></div>
<img src="imgs/26.jpg" width="100px">
</body>

边框图像；

以border-image定义来设置在元素的边框上的图像

 <style>
        div {
            width: 100px;
            height: 100px;
            /*background-color: lightcoral;*/
            border: 30px solid transparent;
            /*
                边框的图像 - 类似于背景图像的设置
                * border-image-source - 设置边框图像的路径
                * border-image-width - 设置边框图像的宽度
                * border-image-repeat - 设置边框图像的平铺方式
             */
            border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
        }

    </style>
</head>
<body>
<div>爱新觉罗</div>
</body

2.内边距；

paddying属性；

也属于简写属性用来设置盒子的内边距上，右，下，左

<style>
            #qq{
                width: 200px;
                height: 200px;
                background-color: blue;


                padding-top: 50px;
                <!---->
                padding-right: 100px;

                padding-bottom: 150px;

                padding-left: 200px;
            }
            #hh{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
</head>
<body>
<div id="qq">
    <div id="hh"></div>
</div>
</body>

3.外边距；

上外边距和左外边距；
以margin-left设置元素的水平方向的位置
值为正数，当前元素向右移动
值为负数，当前元素向左移动
margin-top设置元素垂直方向的位置
值为正数，当前元素向下移动
值为负数，当前元素向上移动

上外边距和右外边距

以margin-bottom设置下一个元素的位置
值为正数，下一个兄弟元素向下移动
值为负数，下一个兄弟元素向上移动
margin-right设置下一个元素的位置
值为正数，下一个兄弟元素向右移动
值为负数，下一个兄弟元素向左移动

<style>
        div {
            display: inline-block;
        }
        #d1 {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            /*
                margin-bottom 下外边距控制块级元素的下一个兄弟元素的位置
                * 如果值为正数的话，下一个兄弟元素向下移动
                * 如果值为负数的话，下一个兄弟元素向上移动
             */
            /*margin-bottom: -100px;*/
            /*
                margin-right 右外边距控制内联元素或行内块级元素的下一个兄弟元素的位置
                * 如果值为正数的话，下一个兄弟元素向右移动
                * 如果值为负数的话，下一个兄弟元素向左移动
             */
            /*margin-right: -5px;*/
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;

            margin-left: -5px;
        }

    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

外边距重叠；

以设置两个相邻的元素的外边距，第一个设置下外边距第二个设置上外边距

   <style>
        #qq{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-bottom: 100px;
            /*id为ww的div元素向下移动100px*/
        }
        #ww{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 200px;
            /*id为ww的div元素向下移动200px*/
        }
    </style>
</head>
<body>
<div id="qq"></div>
<!--<p>爱新觉罗</p>-->
<div id="ww"></div>
</body>

外边距传递；

以设置两个元素师父子元素，当子元素设置上外边距，该上边距会在父级元素内出现

<style>
        #qq{
            width: 200px;
            height: 100px;
            background-color: blue;
            /*设置背景颜色*/
            padding-top: 100px;
            /*为子级元素设置上边距*/
        }
        #ww{
            width:100px;
            height: 100px;
            background-color: red;
            /*设置背景颜色*/
        }
    </style>
</head>
<body>
<div id="qq">
    <!--必须是父级与子级关系的元素-->
    <div id="ww"></div>
</div>
</body>

内容水平居中；

以margin: 0 auto；父级div设置在元素的水平居中

<style>
        p {
            /*该属性只对文本内容水平对齐*/
            text-align: center;
            /*文本水平方向居中*/
        }
        div{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<p>星际战甲</p>
</body>

4.盒子模型；

块级元素盒子模型；

可设置宽高，设置高度为其中内容的高度

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            border: 1px solid black;
            /*设置边框的样式*/
            padding: 50px;
            /*设置内边距*/
            margin: 50px;
            /*设置外边距*/
        }
    </style>

</head>
<body>
<div></div>
</body>

内块级元素盒子模型；

是不可设置宽和高，元素的大小事其中内容撑起

<style>
        span{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid black;
            padding: 30px;
            /*水平方向内边距是有效；设置文本内容的水平方向位置*/
            /*垂直方向内边距是有效；文本内容位置没有变，而内边距会向上或向下扩展*/
            margin: 30px;
            /*垂直方向上或下的外边距是无效的
              而水平方向的外边距是有效的*/
        }
    </style>
</head>
<body>
<span>星际战甲</span>
</body>

行内块级元素盒子模型；

不自动换行，可设置宽高；

<style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            padding: 30px;
            /*设置内边距*/
            margin: 30px;
             /*设置外边距*/
        }
        #qq{
            background-color: red;
        }
        #hh{
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="qq"></div>
<div id="hh"></div>
</body>

box-sizing属性；

以box-sizing属性设置盒子模型；
content-box；为默认值为标准盒子模型
设置为内容区；内边距；边框；外边框
border-box；为怪异盒子模型
设置盒子的大小；外边距

        #qq {
            width: 200px;
            height: 200px;
            /*
                默认值，标准盒子模型
                * 实际的宽度 = width + padding-left + padding-right + border-left + border-right
                * 实际的高度 = height + padding-top + padding-bottom + border-top + border-bottom
             */
            box-sizing: content-box;

            border: 10px solid black;
            <!--设置边框-->
            padding: 50px;
            /*设置内边距*/
            margin: 50px;
            /*设置外边距*/
            background-color: lightcoral;
        }
        #hh {
            width: 200px;
            height: 200px;
            /*
                怪异盒子模型
                * 实际宽度 = width
                * 实际高度 = height
             */
            box-sizing: border-box;

            border: 10px solid black;
            <!--设置边框-->
            padding: 50px;
            /*设置内边距*/
            margin: 50px;
            /*设置外边距*/
            background-color: green;
        }
    </style>
</head>
<body>
<div id="qq"></div>
<div id="hh"></div>
weixin_33985507
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML静态页面之（盒子模型）
lin123_00的博客
06-26 725
盒子模型 描述 每一个元素都可以叫做是盒子模型 盒子模型的组成 内容区 - 元素中内容（文本、图片、等等） 内边距 - 内容区到边框的距离 边距 - 内容区的边界 外边距 - 盒子与盒子之间的距离 border属性 表示设置元素的边框 border属性是简写属性,可以分为 border-width - 表示边框的宽度 border-style - 表示边框的样式 border-color - 表示边框的颜色 简写顺序: 边框宽度 边框样式 边框颜色
HTML+CSS基础入门-第十七天（CSS-盒模型）
bree的博客
04-11 326
div和spanDIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式，div和span的区别span是内联元素 div是块级元素代码<!DOCTYPE html> <head> <title>CSS 盒模型</title> <meta charset="utf-8"> <style type="text/css"> .div{
构建静态页面 之 [ 盒子模型 ]
weixin_33937913的博客
08-28 238
盒子模型 描述 每一个元素都可以叫做是盒子模型 盒子模型的组成 内容区 - 元素中内容（文本、图片、等等） 内边距 - 内容区到边框的距离 边距 - 内容区的边界 外边距 - 盒子与盒子之间的距离 border属性 表示设置元素的边框 border属性是简写属性,可以分为 border-width - 表示边框的宽度 b...
2017_7_14 float、盒子、第一次做静态网页心得
Hyperyou的博客
07-15 623
浮动、盒模型 1浮动 1.标准流中，默认从左往右，从上到下布局； 2.float:left/right/none;(不浮动) 3.浮动的元素将脱离标准流； 4.浮动后的元素相当于行内块级元素 5.浮动的元素虽然脱离了标准流，但没有脱离文本流。所以在布局中，我们可以将文本环绕图片，这是因为text与img都是文本流，虽然两者的盒子重叠，但是文本流不重叠。   多个盒模型浮动时，盒子的
盒子模型中定位总结
m0_59734316的博客
07-31 2085
1.盒子模型中共有五种定位，分别为：静态定位（static)、粘性定位（sticky）、相对定位（relative）、绝对定位（obsoulte）、固定定位（fixed）。前两种应用较少，着重记住后三种定位。 定位模式 是否脱标 移动位置 是否常用 相对定位 relative 否（占有位置） 相对于自身位置移动 常用 绝对定位 obsoulte 是（不占有位置） 带有定位的父级移动 ..
static-pages:小型静态页面
03-27
在构建小型静态页面时，CSS（层叠样式表）是至关重要的组成部分，它负责定义网页的布局、颜色、字体等视觉样式。以下是一些关于CSS和静态页面开发的知识点： 1. **盒模型**：理解CSS盒模型是布局设计的基础。它包括...
div+css布局大全
03-22
在B/S（Browser/Server，浏览器/服务器）架构的项目中，表现层的设计与实现是用户体验的关键因素之一。"div+css布局大全"的主题聚焦于Web前端开发中的基础但至关重要的部分，即如何利用HTML的div元素和CSS来构建灵活...
架构脑图.pdf
06-18
- **CSS盒子模型**：CSS中用于描述元素布局的模型。 - **精灵图的使用**：CSS中的精灵图技术。 - **CSS3新增属性**：CSS3引入的新属性。 - **JavaScript概述与特点**：JavaScript的特点和用途。 - **JavaScript和...
css学习自己在网上找的总结
07-26
理解并掌握这些基础知识后，你就可以进一步探索CSS的高级特性，如阴影、渐变、透明度、3D变换等，以及如何构建高效且可复用的CSS架构，如BEM（Block Element Modifier）命名规范或模块化CSS。随着学习的深入，你会...
Div+CSS 布局大全(很实用的一本教程)
11-06
2. **盒模型**：详述CSS盒模型，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，以及如何调整盒子大小和位置。 3. **定位机制**：讲解静态定位、相对定位、绝对定位和固定定位的区别和应用场景...
【前端】浮动和定位
weixin_30633949的博客
08-17 540
浮动和定位 浮动 什么是浮动？ ​ 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。它可以让任何盒子可以在一行排列，用浮动来布局。 ​ 在css中，通过float属性来定义浮动，其基本语法格式如下： 选择器{float:属性值;} 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值）...
HTML网页设计基础笔记 • 【第7章 盒子模型】
热门推荐
杨明金的博客
03-25 2万+
全部章节 >>>> 本章目录 7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流概述 7.2.2 display 属性 7.2.3 visibility 属性 7.3 盒子浮动 7.3.1 float 属性 7.3.2 清除浮动 7.4 盒子定位 7....
CSS-设计网站(DIV盒子模型)
穿心莲
01-01 796
.盒子模型以及定位的不错文章出处忘记感谢作者： www.blueidea.com 网页设计 http://down.chinavisual.com/ 网页素材 http://down.chinavisual.com/stuff/c1/?ref=stuff_list_sidebar 视觉中国下吧  http://www.52design.com/...
WEB入门.六 盒子模型
张晨光老师的播客
02-16 1万+
学习内容ØCSS盒子模型Ø盒子之间的关系Ø页面元素定位能力目标Ø理解盒子模型Ø理解内容与表现分离的优点Ø理解并掌握盒子之间的关系Ø理解并掌握绝对定位与相对定位的用法本章简介上一章节中已经讲解了页面布局的基础知识，了解了设计一个标准的 XHTML页面需要遵循的规范，例如：标签需要关闭、使用
静态网页心得 一
xu_zihao的博客
06-27 923
静态网页 定义：是指没有后台数据库，不含程序不可交互的网页。你写什么它就显示什么，不会有更改。 在模仿页面制作中遇到的问题 结构 布局 细节 结构上 <html> <head> <!--里面包括样式 --> </head> <body> <!--之间的文本是可见的页面内容--> </body> </ht...
CSS中盒子模型详解
每天进步一点点
07-08 3253
CSS中块状结构类似于盒子模型，如下图： 从左至又分别是外边距，边框，内边距，内容，下面我们来分别测试这几个属性。 我先做一个没有任何修饰的盒子模型： 代码如下： .text { width: 400px; height: 400px; display: block; border: solid 2px blue; } 盒子模型
彻底弄懂CSS盒子模式
killerover84的专栏-----天下
04-29 1250
前言 如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子
html静态页面的结构布局
lanheit的博客
02-20 1102
关于一个静态网页的静态布局，对于一个前端初学者来说，pink老师的网页布局准则就是先设置盒子大小，然后排放盒子的位置，最后设置盒子的样式。 其实一个网站的结构页面从技术角度出发就是若干个大大小小的盒子组成的，我们只要吧盒子大小和位置摆放正确，一个简单的html页面就可以轻松完成。从考虑搜索引擎SEO规则出发，就要考虑结构简单化，精准化，使用那些标签可以让搜索引擎更精准的定位到该网站。 另外如果考虑到网站的长远性发展就需要考虑到方方面面，比如就拿最基本的电商网站来说，我们需要考虑到广告和商品的更换及时性等
HTML、CSS与盒子模型：结构与布局详解
定位模型则是CSS布局的另一个重要方面，它允许开发者控制元素在页面上的精确位置，通过设置`position`属性来实现绝对定位、相对定位或静态定位。 表格解析在早期的网页设计中常被使用，但现代Web设计倾向于使用CSS ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值