CSS学习（十七）-盒模型

最新推荐文章于 2023-06-06 17:11:12 发布
最新推荐文章于 2023-06-06 17:11:12 发布
阅读量1.4k 收藏
点赞数
分类专栏： css css学习 文章标签： css3 css 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bwshqh/article/details/50919671
版权
一、理论：
1.CSS盒模型
a.外盒尺寸计算--高度
element空间高度=内容高度+内距+边框+边距
b.外盒尺寸计算--宽度 element空间宽度=内容宽度+内距+边框+外距
c.内盒尺寸计算--高度
element高度=内容高度+内距+边框
d.内盒尺寸计算--宽度
element宽度=内容宽度+内距+边框
2.box-sizing
a.content-box 默认值
b.border-box 元素维持IE传统的盒模型
c.inherit 使元素继承父元素的盒模型模式 
d.此值主要目的是控制元素的总宽度

二、实践：

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width: 960px;
            margin-left: auto;
            margin-right: auto;
            color:#6bb2ff;
            font-size: 30px;
            text-align: center;
        }
        #header{
            height: 100px;
            background: #228833;
            margin-bottom: 10px;
        }
        .sidebar{
            float:left;
            width: 220px;
            margin-right: 20px;
            margin-bottom: 10px;
            height: 300px;
            background: #ebf3fc;
        }
        .content{
            float:left;
            width: 720px;
            height: 300px;
            background: #ffcc99;
            margin-bottom: 10px;
        }
        #footer{
            background: #a6f821;
            height: 100px;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="header">hedaer</div>
        <div class="sidebar">left</div>
        <div class="content">main</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>
2. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width: 960px;
            margin-left: auto;
            margin-right: auto;
            color:#6bb2ff;
            font-size: 30px;
            text-align: center;
            background: #ffcc99;
        }
        #header{
            height: 100px;
            background: #228833;
            margin-bottom: 10px;
            padding: 10px;
            width: 100%;
        }
        .sidebar{
            float:left;
            width: 220px;
            margin-right: 20px;
            margin-bottom: 10px;
            height: 300px;
            background: #ebf3fc;
            padding: 10px;
        }
        .content{
            float:left;
            width: 720px;
            height: 300px;
            background: #ffcc99;
            margin-bottom: 10px;
            padding: 10px;
        }
        #footer{
            background: #a6f821;
            height: 100px;
            clear: both;
            padding: 10px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="header">hedaer</div>
        <div class="sidebar">left</div>
        <div class="content">main</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>
3. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width: 960px;
            margin-left: auto;
            margin-right: auto;
            color:#6bb2ff;
            font-size: 30px;
            text-align: center;
            background: #ffcc99;
        }
        #header{
            height: 100px;
            background: #228833;
            margin-bottom: 10px;
            padding: 10px;
            width: 100%;
            border: 10px solid darkgray;
        }
        .sidebar{
            float:left;
            width: 220px;
            margin-right: 20px;
            margin-bottom: 10px;
            height: 300px;
            background: #ebf3fc;
            padding: 10px;
            border: 10px solid red;
        }
        .content{
            float:left;
            width: 720px;
            height: 300px;
            background: #ffcc99;
            margin-bottom: 10px;
            padding: 10px;
            border: 10px solid chartreuse;
        }
        #footer{
            background: #a6f821;
            height: 100px;
            clear: both;
            padding: 10px;
            width: 100%;
            border: 10px solid #202189;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="header">hedaer</div>
        <div class="sidebar">left</div>
        <div class="content">main</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>
4. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width: 960px;
            margin-left: auto;
            margin-right: auto;
            color:#6bb2ff;
            font-size: 30px;
            text-align: center;
            background: #ffcc99;
        }
        #header{
            height: 100px;
            background: #228833;
            margin-bottom: 10px;
            padding: 10px;
            width: 100%;
            border: 10px solid darkgray;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing:border-box;
            -ma-box-sizing:border-box;
            box-sizing: border-box;
        }
        .sidebar{
            float:left;
            width: 220px;
            margin-right: 20px;
            margin-bottom: 10px;
            height: 300px;
            background: #ebf3fc;
            padding: 10px;
            border: 10px solid red;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing:border-box;
            -ma-box-sizing:border-box;
            box-sizing: border-box;
        }
        .content{
            float:left;
            width: 720px;
            height: 300px;
            background: #ffcc99;
            margin-bottom: 10px;
            padding: 10px;
            border: 10px solid chartreuse;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing:border-box;
            -ma-box-sizing:border-box;
            box-sizing: border-box;
        }
        #footer{
            background: #a6f821;
            height: 100px;
            clear: both;
            padding: 10px;
            width: 100%;
            border: 10px solid #202189;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing:border-box;
            -ma-box-sizing:border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="header">hedaer</div>
        <div class="sidebar">left</div>
        <div class="content">main</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>


bwshqh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页设计学习教程 CSS盒模型
09-25
Margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容，因此 margin 是盒模型的一个重要的组成部分。
CSS学习摘要-盒子模型
夏虫不可语冰
06-01 2127
注：全文摘要自网络开发者网站，当然间隔也会整理一些思路和格式排版添加进去。 CSS框模型（译者注：也被称为“盒模型”）是网页布局的基础 ——每个元素被表示为一个矩形的方框，框的内容、内边距、边界和外边距像洋葱的膜那样，一层包着一层构建起来。浏览器渲染网页布局时，它会算出每个框的内容要用什么样式，周围的洋葱层有多大，以及框相对于其它框放在哪里。在理解如何创建 CSS 布局之前，你需要理解框模型。 ...
20220501CSS学习笔记--------盒子模型
qq_42847719的博客
05-01 556
盒子模型 盒子模型用来控制元素的显示效果包括: 元素内容content+外边距margin+边框border+内边距padding 元素内容content:控制元素的显示尺寸 外边距margin:控制元素的显示位置 边框border:控制边框效果 内边距padding:控制元素内容的位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti...
html&CSS-----盒模型
m0_73633088的博客
06-06 1656
详细介绍html&CSS中的盒模型的相关用法包括标准盒模型和怪异盒模型，大家进来看看吧！！！
CSS学习 --盒子模型
Details Inside Spring
07-17 1055
CSS中,每个元素(element)产生一个矩形盒子(rectangular box),该叫做元素盒子 element box。 每个元素盒子 element box 由外到内由以下部分组成 : 边缘区域 margin area （可有可无） 总是透明 (从而允许父元素背景可见) 可以使用负值表示长度 边框区域 border area （可有可无） 填充区域 padding area （可...
（vscode）CSS学习记录四-盒子模型
weixin_42277692的博客
10-29 908
CSS学习记录-盒子模型
CSS 盒模型（Box Model）的学习和理解
09-25
CSS盒模型（Box Model）的学习和理解一直是学习DivCSS网页布局的基础内容。但有很多CSS初学者依然不够熟悉，虽然我们提供了很多相关的教程。大家可以多学习与思考。今天发布一篇一位CSS初学者对CSS盒模型（Box Model...
CSS盒子模型是什么
09-24
什么是CSS盒子模型？CSS盒子模型是为了让我们充分理解div+css模型的定位功能，盒子模型在学习div+css布局方式中必须要学习的一个模型
CSS3弹性盒模型开发笔记（三）
12-03
本文介绍了CSS3弹性盒模型，供大家参考，大家亦可以结合CSS3弹性盒模型开发笔记（一）、CSS3弹性盒模型开发笔记（二）进行学习，具体内容如下 box-pack和box-align属性 当弹性元素和非弹性元素混合排版时，有可能会...
CSS学习（十二）-文本换行符
bwshqh的博客
03-12 5041
一、理论： 1.word-wrap: a.normal 在半角空格或连字符的地方进行换行 b.break-word 不截断英文单词换行 2.word-break: a.normal 中文到边界上的汉字换行，英文从整个单词换行 b.break-all 强行截断英文单词换行 c.keep-all 不允许字断开 3.while-space: a.normal 默认值 b.pre 文本
CSS学习（六）-css圆角边框高级效果、边框阴影效果（上）
bwshqh的博客
03-04 4647
一、理论： 1.border-radius: a.表格应用圆角:表格必须使用border-collapse属性为separate，表格圆角才能正常显示 b.圆形:元素的宽度和高度相同，圆角的半径值50%(或高度的一半) c.半圆:元素的宽度与圆角方位配合一致，以不同的高度比例等项即可制作半圆 d.扇形:元素的宽度、高度、半径值相同，根据圆角位置不同可制作不同的扇形 e.椭圆:需要设置圆
CSS学习（十九）-CSS伸缩布局盒
bwshqh的博客
03-20 3186
一、理论： 1.flexbox模型基础知识 a.flexbox布局方向不可预知 b.屏幕和浏览器窗口大小发生改变可以灵活调整布局 c.指定伸缩项目可以按主轴或者侧轴按比例分配额外空间 d.指定伸缩项目沿主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间 e.指定如何将垂直元素布局轴的额外空间分布到该元素周围 f.控制元素在页面上的布局方向 g.按照不同于DOM所指定的方式
CSS学习（十五）-CSS颜色模式、CSS颜色透明度
bwshqh的博客
03-16 3176
一、理论： 1.CSS3颜色模式 a.RGBA颜色模式，在RGB基础上加了控制alpha透明度的参数 b.HSL颜色模式：色调 饱和度 亮度 c.HSLA颜色模式：A值取于0-1之间，值越大，透明度越低 2.RGBA/HSLA滤镜格式 a.需要用转换工具才能在ie8及以下版本中使用RGBA/HSLA颜色模式相同的透明度，需要将RGBA/HSLA中的透明值乘以255，然后将其转换成十六进
CSS学习（十八）-滚动条、拖动元素、轮廓线
bwshqh的博客
03-19 3063
一、理论： 1.overflow-x/overflow-y a.visible 默认值,不添加滚动条 b.auto 添加滚动条 c.hidden 内容溢出容器时，所有内容都将隐藏，不显示滚动条 d.scroll 不论有无溢出，都显示滚动条 e.no-display 当内容溢出容器时不显示元素 f.no-content 当内容溢出容器时不显示内容 2.resize a.none 用
CSS学习（十三）-文本换行符技巧
bwshqh的博客
03-12 2260
一、理论： 1.word-wrap 用来断词而不是断字符 2.word-break: a.break-all 可以允许非中文断开 b.keep-all 在中文里不允许字断开 2.white-space: a.nowrap 文本强制不换行 b.pre 显示预定义文本格式 3.浏览器适应： a.在ie下使用word-wrap:break-word声明可以确保所有文本正常显示 b.在
CSS学习（十六）-HSLA颜色模式
bwshqh的博客
03-16 1864
一、理论： 1.HSLA颜色模式 a.HSLA在HSL基础上增加了不透明度，值越大透明度越低 b.HSLA颜色模式的浏览器兼容性和HSL一样，只有较新版本的主流浏览器才支持 2.RGBA和HSLA颜色模式二者可以完全相互替换 3.RGBA/HSLA的IE兼容方案 a.在IE8以下版本，一般在前面设置一个非透明色，在其后紧跟一个RGBA/HSLA颜色模式 b.将透明的PNG图片平铺做为
CSS学习（十一）-CSS文本溢出
bwshqh的博客
03-11 1686
一、理论： 1.text-overflow  a.clip 不显示省略标记 b.ellipsis 显示省略标记 二、实践： 1. Title .text-overflow-clip1{ width: 80px; padding: 10px; border: 1px
CSS学习（十）-CSS字体、CSS字体阴影
bwshqh的博客
03-09 1660
一、理论： 1.css字体类型 a.font-family 字体类型 b.font-style 字体样式 c.font-weight 粗细，可设置数字 d.font-size-adjust 是否强制对文本使用同一尺寸 e.font-stretch 横向拉伸变形字体 f.foont-variant 字体大小写 2.css文本类型 a.word-spacing 词间距 b.lett
CSS学习（二）-结构伪类选择器、属性选择器
bwshqh的博客
02-28 1519
一、理论： 1.结构伪类选择器： a.E:first-child:选择第一个子元素 b.E:last-child:选择最后一个子元素 c.E:root:选择匹配元素E所在文档的根元素 d.E F:nth-child(n):选择E的第n个子元素 e.E F:nth-last-child(n)：选择元素E的倒数第n个子元素 f.E:nth-of-type(n)：选择父元素内具有指定类型的
css盒子模型的常用属性
最新发布
08-25
- *1* *2* *3* [css---学习之路（盒子模型的基本常用属性）](https://blog.csdn.net/qq_57480977/article/details/125425428)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值