二.3 页面化妆师CSS之盒子模型

最新推荐文章于 2024-08-02 22:44:35 发布
最新推荐文章于 2024-08-02 22:44:35 发布
阅读量492 收藏
点赞数
分类专栏： 五、前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44891948/article/details/104278467
版权

 

目录

1.盒子模型的概念

2.盒子模型属性

宽度属性

高度属性

那些HTML元素可设置高和宽属性

边框属性

内边距属性

外边距属性

盒子模型计算

2.代码示例

2.1高度宽度和边框

2.2内外边距数学、盒子模型计算、display属性

  • 盒子模型概念
  • 高和宽设置
  • 边框设置
  • 内边距设置
  • 外边距设置
  • 盒子的计算
  • 元素显示方式

生活中的盒子

1.盒子模型的概念

  • 盒子模型用来“放”网页中的各种元素。
  • 网页设计中内容，如文字、图片等元素，都可是盒子（DIV嵌套）
  • 网页中盒子模型 

2.盒子模型属性

  • 宽度属性

    • 宽度 width：长度值 | 百分比 | auto
    • 最大宽度 max-width：长度值 | 百分比 | auto
    • 最小宽度 min-width：长度值 | 百分比 | auto

  • 高度属性

    • 高度 height：长度值 | 百分比 | auto
    • 最大高度 max-height：长度值 | 百分比 | auto
    • 最小高度 min-height：长度值 | 百分比 | auto
    • 说明：设置块级元素和替换元素的内容高度

  • 那些HTML元素可设置高和宽属性

    • 块级元素： 
    • 替换元素 ：
    • 非替换元素：

  • 边框属性

    • 边框宽度（border-width）
      • 设置元素边框宽度
      • border-width：thin | medium | thick | 长度值
    • 边框颜色（border-color）
      • 设置元素边框颜色
      • border-width：颜色 | transparent
    • 边框样式（border-style）  4个方向来表示（上、下、左、右）
      • 设置元素边框样式
      • border-style：值 | none | hidden 
      • 不同方向表示：
        • border-[left | right | top | bottom]-width
        • border-[left | right | top | bottom]-color
        • border-[left | right | top | bottom]-style
      • 边框缩写：border：[宽度] | [样式] | [颜色]
      • 不同方向：
        • border-top：[宽度] | [样式] | [颜色]
        • border-left：[宽度] | [样式] | [颜色]
        • border-right：[宽度] | [样式] | [颜色]
        • border-bottom：[宽度] | [样式] | [颜色]

    • 内边距属性

      • 设置元素的内容与边距之间的距离（内边距或填充），分4个方向（上右下左）
        • - padding-top：长度值 | 百分比
        • - padding-right：长度值 | 百分比
        • - padding-bottom：长度值 | 百分比
        • - padding-left：长度值 | 百分比
        • 说明：值不能为负值
      • 内边距属性缩写
        • padding：值1；  // 4个方向都为值1
        • padding：值1 值2；  // 上下=值1 ，左右=值2
        • padding：值1 值2 值3；// 上=值1 ，左右=值2，下=值3
        • padding：值1 值2 值3 值4；// 上=值1 ，右=值2，下=值3，左=值4

    • 外边距属性

      • 设置元素与元素之间的距离（外边距），4个方向（上右下左）
        • - margin-top：长度值 | 百分比
        • - margin-right：长度值 | 百分比
        • - margin-bottom：长度值 | 百分比
        • - margin-left：长度值 | 百分比
        • 说明：值可为负值
      • 外边距属性缩写
        • margin：值1；  // 4个方向都为值1
        • margin：值1 值2；  // 上下=值1 ，左右=值2
        • margin：值1 值2 值3；// 上=值1 ，左右=值2，下=值3
        • margin：值1 值2 值3 值4；// 上=值1 ，右=值2，下=值3，左=值4
      • 默认情况下，相应HTML块级元素存在外边距  body、h1~h6 、p.....
      • 声明margin属性，覆盖默认样式 
      • margin值为auto，实现水平方向居中显示效果
      • 由浏览器计算外边距
      • 垂直方向，两个相邻元素都设置外边距，外边距会发生合并
      • 合并后外边距高度=两个发生合并外边距的高度中最大值

    • 盒子模型计算

      • 标准盒子模型 
      • 盒子模型计算
        • 在CSS中，width 和 height 指的是内容区域的宽度和高度
        • 增加内边距、边框和外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸。
        • IE盒子模型：
    • display属性
      • inline：元素将显示为内联元素，元素前后没有换行符
      • block：元素将显示为块级元素，元素前后会带有换行符
      • inline-block：行内块元素，元素呈现为inline，但具有block相应特性
      • none：此元素不会被显示

2.代码示例

2.1高度宽度和边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    &lt;!&ndash;    宽度&ndash;&gt;-->
<!--    <style type="text/css">-->
<!--        p{width: 400px;background: #78b917}-->
<!--        .one{max-width: 500px;}-->
<!--        .two{min-width: 500px;}-->
<!--        .three{min-width:200px;max-width: 300px;}-->
<!--    </style>-->

<!--    &lt;!&ndash;    高度&ndash;&gt;-->
<!--    <style type="text/css">-->
<!--        p{height: 200px;background-color: #78b917;float: left;}-->
<!--        .one{max-height: 300px;}-->
<!--        .two{min-height: 300px;}-->
<!--        .three{min-height: 300px;max-height: 500px;}-->
<!--    </style>-->

<!--    &lt;!&ndash;    那些元素可以设置高和宽属性&ndash;&gt;-->
<!--    <style type="text/css">-->
<!--        p{background-color: #ececec;height:auto;width:200px;}-->
<!--		span{ background-color: #acacac;width:200px;height:100px; }-->
<!--		img{width:200px;height: 100px;}-->
<!--    </style>-->

    <!-- border属性 -->
    <style type="text/css">
        /*p{width: 150px;height:100px;background-color: #ececec;line-height: 100px;*/
		/*  border-width:thick;border-color: #0099ee;border-style:dotted;}*/
        /* border属性不同方向设置 */
        p{width: 150px;height:100px;background-color: #ececec;line-height: 100px;}
        .one{border:10px #0099ee solid;}  /* 全部样式一样 */
        .two{border-top:5px red solid;
            border-left:10px green double;
            border-right:10px #0099ee double;
            border-bottom:5px pink dotted;}
    </style>
</head>
<body>
<!--    <p>盒子模型宽度width:400px;</p>-->
<!--	<p class="one">盒子模型最大宽度max-width:500px;</p>-->
<!--	<p class="two">盒子模型最小宽度min-width:500px;</p>-->
<!--	<p class="three">盒子模型最大小宽度min-width和max-width;</p>-->

<!--    <p>盒子模型高度height:200px;</p>-->
<!--	<p class="one">盒子模型最大高度max-height:100px;</p>-->
<!--	<p class="two">盒子模型最小高度min-height:100px;</p>-->
<!--	<p class="three">盒子模型最小高度min-height:100px和最大高度max-height:500px;</p>-->

<!--        <p>盒子模型高度height:自适应；宽度width:200</p>-->
<!--  	    <span>盒子模型高度height：100px；宽度width：100px;</span>  &lt;!&ndash;非替换元素不支持&ndash;&gt;-->
<!--        &lt;!&ndash; 高宽属性适用块元素和替换元素 &ndash;&gt;-->
<!--        <img src="img/html.jpg" width="200px"/><img src="img/css.jpg" height="100px"/>-->

        <!-- border属性 -->
<!--        <p>边框属性border</p>  &lt;!&ndash; 边框宽度、样式、颜色 &ndash;&gt;-->
<!--        <p class="three">边框属性border</p>-->
        <!-- border属性不同方向设置 -->
	    <p class="one">边框属性border</p>
	    <p class="two">边框属性border</p>

</body>
</html>

2.2内外边距数学、盒子模型计算、display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*内边距*/
        /*.one{width:300px;height:300px;background-color: #acacac;*/
        /*    padding-top:20px;padding-left:30px;padding-bottom:50px;padding-right: 40px;}*/
        /*.one{width:300px;height:300px;background-color: #acacac;*/
        /*     padding:20px 10px 5px 8px;}*/
        /*.content{width:100%;height:100%;background-color: #ececec;}*/

        /*外边距*/
        /*body,p{margin:0;}  !*声明margin属性，覆盖默认样式*!*/
        /*.one{width:300px;height:300px;background-color: #acacac;*/
        /*     margin:10px 5px 8px 20px;}*/
        /* .one{width:300px;height:300px;background-color: #acacac;*/
        /*     margin:auto;}   !*margin值为auto，实现水平方向居中显示效果*!*/

         /*垂直方向，两个相邻元素都设置外边距，外边距会发生合并，
            合并后外边距高度=两个发生合并外边距的高度中最大值*/
         /*.content{width:100px;height:100px;background-color: #ececec;margin:auto;}*/
         /*.one{width:300px;height:300px;background-color: #acacac;margin-bottom: 20px;}*/
         /*.two{width:300px;height:300px;background-color: #acacac;margin-top:30px;}*/
    </style>

    <style type="text/css">
        /*盒子计算*/
        div{margin:10px;
            padding:5px;
            border:1px red solid;
            width:68px;
            height:48px;}
    </style>

    <style type="text/css">
		div,span{background-color: #00aaee;
				 border:1px #666 solid;}
		.one{font-size: 0px;}
		div{display:inline-block;
		    font-size:16px;
		    width:100px;
		    height:30px;
		    padding:5px;
		    margin:10px;}
		/*span{display:block;
		     width:100px;
		     height:30px;
		     padding:5px;
		     margin:10px;}*/
		span{display:none;}
		a:hover span{display:inline;}
	</style>

</head>
<body>
<!--    <div class="one"><div class="content">padding属性</div></div>-->
<!--	<div class="one"><div class="content">margin属性</div></div>-->
<!--	<div class="two"><div class="content">margin属性</div></div>-->
	<!-- <p>123</p> -->

<!--        &lt;!&ndash;        盒子计算&ndash;&gt;-->
<!--        &lt;!&ndash; 页面总占宽100px,高80px,其中margin:10px\padding:5px\border:1px &ndash;&gt;-->
<!--        <div>盒子模型计算</div>-->

        <!--块级元素-->
        <!-- <div class="one"> -->
        <div>display属性-div</div>
        <div>display属性-div</div>
        <div>display属性-div</div>
        <div>display属性-div</div>
        <div>display属性-div</div>
        <div>display属性-div</div>
        <!-- </div>	 -->
        <hr/>
        <!--内联元素-->
            <span>display属性-sapn</span><span>display属性-sapn</span><span>display属性-sapn</span>
        <hr/>
            <a href="#">指我...<span>和你捉迷藏</span></a>
</body>
</html>

 

测试小弟
关注
专栏目录
CSS盒子模型
weixin_45709134的博客
12-22 198
目录CSS盒子模型1.简介2.设置边框和内容(Border,Content)3.内边距（padding）4.外边距(margin)4.1垂直外边距的重叠5.内联元素(inline)的盒子6.盒子的显示(display)7.盒子溢出(overflow)8.文档流（Normal Flow）8.1文档流定义8.2元素在文档流中的特点:8.3脱离文档流9.浮动(float)9.1浮动定义9.2浮动特点 CSS盒子模型 1.简介 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和
CSS知识点总结【一】——个人笔记（仅供参考~v~）
m0_50785976的博客
04-14 658
CSS知识点CSS引入样式、清空默认样式reset、css中的基本单位、块元素和行内元素、盒子模型、文字的相关样式
请你学习：前端布局1 - CSS盒模型（Box Model）是CSS布局的核心概念之一
最新发布
一个搬砖工人
08-02 844
CSS盒模型（Box Model）是CSS布局的核心概念之一，它描述了如何对文档中的元素进行布局和尺寸计算。每个元素都会生成一个矩形的盒子，这个盒子由几个部分组成，包括。了解这些部分如何相互作用对于创建有效的网页布局至关重要。
CSS盒子
人生苦短，我用python
12-24 468
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) -...
CSS中的盒子模型
小何代码咖啡馆
04-19 1763
在网页布局时，主要关注的就是如何利用CSS摆放盒子先准备好相关的网页元素，网页元素基本都是盒子利用 CSS 设置好盒子样式，然后摆放到相应位置往盒子里面装内容。
CSS_弹性盒子模型
qq_55961861的博客
08-09 451
CSS_弹性盒子模型！
简洁H5大气响应式化妆品网站html模板源码.zip
10-05
3. CSS3：层叠样式表第三版，提供了更多的样式选择器、动画效果和盒模型改进，是实现响应式设计的关键技术。例如，Flexbox（弹性盒子布局）和Grid（网格布局）可以帮助设计师创建更灵活和复杂的布局。 4. 模板设计...
走进HTML和CSS
01-03
**CSS：网页的化妆师** 1. **选择器**：CSS通过选择器来定位HTML元素，如类型选择器（如`p`），类选择器（如`.myClass`），ID选择器（如`#myID`）以及属性选择器等。 2. **属性与值**：CSS规则由选择器和声明组成，...
简单易学的Html+css教程
08-26
二、CSS：网页的化妆师 1. 选择器与声明：CSS通过选择器（如元素选择器、类选择器、ID选择器等）来定位元素，并通过声明（属性：值）来设定样式。例如，`.myClass {color: red;}`将改变具有.myClass类的元素的颜色...
京东商城导航logo---用css
oHayHay的博客
07-13 2580
<!-- 纯css实现导航样式 --> <!DOCTYPE html> <html> <head> <title>京东css</title> <meta charset="utf-8"> <style type="text/css"> body{ padding:0; font-size:10pt; behavior：u
CSS 盒子模型（box model）
小楼一夜听春雨，深巷明朝卖杏花
03-01 2698
盒子虽然变大了但是内容在往中间挤，中间的内容还是在盒子的左上角，剩下的是内边距帮你填充的。如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离。上下是一个值，左右是一个值。，它包括：外边距(margin)，边框(border)，内边距(padding)，和实际内容(content)。蓝色的是一个盒子，这是一个元素，这个元素包含内边距padding，边框和外边距。内容文字图片是实物，然后内边距，边框，外边距。
CSS 盒子模型
冷月醉雪的博客
05-18 347
   所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。    CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。    盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。    下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) - 清除边框外的区...
CSS3盒子模型：边框、内边距与阴影解析
“第六章 盒子模型”是关于HTML5和CSS3网页设计的一个章节，主要探讨了如何利用CSS3来实现网页元素的盒子模型布局、样式调整以及相关的视觉效果。 在网页设计中，盒子模型（Box Model）是理解元素布局的基础。它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值