第五节 盒子模型

1. 盒子模型的五个属性

 盒模型主要涉及的属性有:width(宽度)、height(高度)、padding(内边距)、 border(边框)、margin(外边距)。

2. 盒子模型的两种模式

  模式一:width=盒子自身的width  (正常情况)

  模式二:width=盒子自身的width+左padding+右padding+左border+右border  (仅在IE5和IE6+怪异模式中出现)

  

    当然也可以通过box-sizing属性,来控制标准模式(box-sizing:content-box)还是怪异模式(box-sizing:border-box)。

    实例1:

       

  实例2:

      

        

3. padding属性

 指内边距,padding的区域有背景颜色,css2.1前提下,并且背景颜色一定和内容区域的相同。也就是说,background-color将填充所有border以内的区域。

 padding属性分两种写法:综合属性和小属性。

   (1). 综合属性

  padding:10px 20px 30px 40px,(顺序为:上右下左)

  padding:10px 20px 30px, (上下分别为10px和30px,右左均为20px)

  padding:10px 20px, (上下为10px,右左为20px)

  padding:10px, (上右下左均为10px)

   (2). 小属性 

  padding-top: 30px;

  padding-right: 20px;

  padding-bottom: 40px;

  padding-left: 100px;

   特别用法:可以用小属性来层叠综合属性,但不要反过来用。

 padding: 20px;

   padding-left: 30px;

4. border属性

 指边框,border有三个要素:粗细、样式、颜色。如果颜色不写,默认为黑色,其它两个属性不能不写。

   首先介绍一下border的所有线性:

   

  border可以分两种写法:综合属性和小熟悉

   (1). 综合属性 

    border:10px solid red,(上右下左四个边框均为10px的实线颜色为红色)

   (2). 小属性 

    A: 按照三要素来分

  border-width: 10px 20px,(符合上右下左的规律,可以写1、2、3、4个属性)

  border-style: solid, (符合上右下左的规律,可以写1、2、3、4个属性)

  border-color: red blue green pink, (符合上右下左的规律,可以写1、2、3、4个属性)

   B: 按照方向来分

  border-top:10px solid red;

  border-right:10px solid red;

  border-bottom:10px solid red;

  border-left:10px solid red;

   C: 按照方向-三要素来分

  border-top-width:10px;

  border-top-style:solid;

  border-top-color:red;

  border-right-width:10px;

  border-right-style:solid;

  border-right-color:red;

  border-bottom-width:10px;

  border-bottom-style:solid;

  border-bottom-color:red;

  border-left-width:10px;

  border-left-style:solid;

  border-left-color:red;

 特别用法:可以用小属性来层叠综合属性,但不要反过来用。

5. margin属性

 指外边距,border以为的区域,通常两个盒子之间的距离。

   (1). 塌陷现象

   在标准文档流中,margin竖直方向存在塌陷现象,竖直方向取margin的最大值。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .p1 {

                width: 200px;

                height: 300px;

                background-color: pink;

                margin-bottom: 30px;

            }  

            .p2 {

                width: 200px;

                height: 300px;

                background-color: yellow;

                margin-top: 50px;

            }

        </style>

    </head>

    <body>

        <!--在标准文档流中margin塌陷 竖直方向默认为最大的-->

        <p class="p1"></p>

        <p class="p2"></p>

    </body>

</html>

  在非标准文档流中,margin竖直方向不塌陷。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            .p1 {

                width: 200px;

                height: 300px;

                background-color: pink;

                margin-bottom: 30px;

                float: left;

            }          

            .p2 {

                width: 200px;

                height: 300px;

                background-color: yellow;

                margin-top: 50px;

                float: left;

            }

            div{

                width: 200px;

                border: 2px dashed black;

                overflow: hidden;

            }

        </style>

    </head>

    <body>

        <div>

            <p class="p1"></p>

            <p class="p2"></p>

        </div>

    </body>

</html>

  (2). 利用 “margin:0 auto” 属性使盒子水平居中

  使用条件:

   A:盒子要有明确的width。

   B:只有在标准文档流中的盒子中才会生效,浮动了或定位了均无效。

      C:该特性作用的是盒子,使盒子水平方向居中。

   D:若要使盒子中的内容水平居中:text-align:center;竖直居中:line-height=height。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .box1{

                width: 300px;

                height: 300px;

                background-color: palevioletred;

                /*盒子水平居中*/

                margin: 0 auto;  

                /*文字水平居中*/

                text-align: center;

                /*盒子竖直居中*/

                line-height: 300px;

            }

        </style

    </head>

    <body>

        <div class="box1">

            我要居中了

        </div>   

    </body>

</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html的表单图形验证码怎么做,django中简单图形验证码实现

要实现django图形验证码&#xff0c;可以使用简单的captcha一、安装captcha在Pycharm的terminal中&#xff0c;使用pip安装第三方库&#xff1a;执行命令&#xff1a;pip install django-simple-captcha二、注册captcha在settings中&#xff0c;将‘captcha’注册到app列表里&a…

用计算机弹百战成诗,百战成诗(80P纯女热血翻唱)

[00:00.00]《百战成诗》[00:02.08]【韩信绯歌】山河万里 执枪肆意笑纳[00:06.67]【张良阿令】俗尘偌大 言灵纵法[00:10.86]【刘邦九蔓】宏图双面 名利皆入麾下[00:15.21]【项羽星汉】与我为伍[00:17.44]【虞姬孤狐】彼此**[00:22.16]【鲁班**LeMon】造物的复杂 无穷无极无垠无瑕…

第六节 标准文档流

一.标准文档流 标准文档流包括&#xff1a;块级元素和行内元素。 (1). 块级元素 特点&#xff1a; 一个元素单独一行&#xff0c;不与其他元素并行&#xff0c;可以设置其宽度和高度&#xff0c;如果不设置宽度&#xff0c;宽度默认为其父元素的100%。 (2). 行内元素 特点&…

第七节 浮动

一. 浮动的性质 1. 脱标&#xff08;脱离标准文档流&#xff09; 无论是块级元素还是行内元素&#xff0c;一旦浮动了&#xff0c;就脱离标准文档流&#xff08;脱标&#xff09;了&#xff0c;就可以设置宽和高了。 下面事例是两个div&#xff0c;其中第一个div浮动了。 1 &l…

html5测试 iphone6sp,5款旧iPhone测试iOS运行速度:只有6S速度明显提升

苹果在周三凌晨推送了iOS13.3.1更新&#xff0c;这款最新系统修复了许多Bug&#xff0c;而且还新增了功能。那么升级后的流畅度表现如何呢&#xff1f;外媒就在第一时间将iPhoneSE、iPhone6S、iPhone7、iPhone8、iPhoneXR这5款旧iPhone进行了一次速度测试&#xff0c;与iOS13.3…

第八节 定位

一. 定位介绍 谈到定位&#xff0c;顾名思义&#xff0c;就确定元素的位置&#xff0c;定位分为三种&#xff1a;相对定位、绝对定位、固定定位&#xff1b;分别用 position&#xff1a;relative、position&#xff1a;absolute、position&#xff1a;fixed来表示&#xff0c;它…

html将字符串按逗号分隔,js如何截取以逗号隔开的字符串

使用string对象的split()方法能够处理。正则表达式定义&#xff1a; split() 方法用于把一个字符串分割成字符串数组。数组使用方法以下&#xff1a;cdnstringObject.split(separator,howmany)对象参数描述&#xff1a;blogseparator 必需。字符串或正则表达式&#xff0c;从该…

CSS块级元素与行内元素的区别和联系

块元素(block element)一般是其他元素的容器元素&#xff0c;能容纳其他块元素或内联元素。块元素就好比一个四方块&#xff0c;可以放其他的四方块&#xff0c;并可以呈现在页面上任何地方。 默认情况下块元素&#xff0c;是独占一行的常见的块元素&#xff1a;div、p、h1-h6…

联想台式计算机驱动程序,联想键盘驱动程序

联想键盘驱动程序官方版联想键盘驱动程序官方版是款适合联想键盘的用户打造的驱动程序。联想键盘驱动程序主要作用就是可以帮助用户解决键盘输入过程中的各种问题&#xff0c;包括联想键无法正常使用与无法被电脑识别的问题。联想键盘驱动程序还可以让用户的键盘与主机完美的兼…

CSS块级元素、内联元素概念

CSS文档流与块级元素&#xff08;block&#xff09;、内联元素&#xff08;inline&#xff09;&#xff0c;之前翻阅不少书籍&#xff0c;看过不少文章&#xff0c; 看到所多的是零碎的CSS布局基本知识&#xff0c;比较表面。看过OReilly的《CSS权威指南》&#xff0c;发现里面…

带字母的计算机在线使用,ASCII,进位制在线转换工具

APP说明ASCII(American Standard Code for Information Interchange&#xff0c;美国标准信息交换代码)是基于拉丁字母的一套电脑编码系统&#xff0c;主要用于显示现代英语和其他西欧语言。它是现今最通用的单字节编码系统&#xff0c;并等同于国际标准ISO/IEC 646。十进制&am…

JS入门

一. 总体介绍 结合近半年来前端的项目的经验&#xff0c;这里梳理一下JS常用知识&#xff0c;方便自己日后温习查找&#xff0c;同时给广大JS入门者提供一些帮助&#xff0c;文章中如有错误&#xff0c;欢迎指出。这里从JS基础、Dom操作、JS进阶、四大家族、动画、面向对象入门…

在微型计算机中 存储容量为1kb 指的是,2016年计算机一级考试模板

​​红色标题的是正确答案18)下说法中&#xff0c;正确的是A)软盘片的容量远远小于硬盘的容量B)硬盘的存取速度比软盘的存取速度慢C)软盘是由多张盘片组成的磁盘组D)软盘驱动器是唯一的外部存储设备19)1KB 存储容量能存储的汉字内码的个数是A)128 B)256C)…

第一节 从面向对象的角度重新认识JS世界

一. 背景 距离上一篇JS文章已经20天&#xff0c;经重新总结发现&#xff0c;上一篇概况的有点浅显&#xff0c;适合初学js的入门了解&#xff0c;但对于已经学习js一段时间的人&#xff0c;或者是想系统的了解JS体系&#xff0c;接下来的文章可能会更有帮助。 该系列博客的书写…

联想记忆计算机网络,什么是双向联想记忆神经网络

联想记忆神经网络是模拟人脑, 把一些样本模式存储在神经网络的权值中, 通过大规模的并行计算, 使不完整的、受到噪声“污染”的畸变模式在网络中恢复到原有的模式本身。大脑是人体最为复杂的信息处理系统。联想记忆(AssociativeMemory, AM) 是人脑的重要认知功能之一。例如, 听…

第二节 DOM-Document对象

一. 整体介绍 这里介绍DOM对象中的Document对象。 何为Document对象&#xff1f;每个载入浏览器的HTML文档都会成为Document对象&#xff0c;Document对象可以帮助我们对所有的HTML文档进行访问。 任何一个对象都会有属性和方法&#xff0c;当然Document对象也不例外&#xff0…

计算机专业的情书,【实用】大学各专业表白情书,你能看懂几个

原标题&#xff1a;【实用】大学各专业表白情书&#xff0c;你能看懂几个大学各专业表白情书的正确打开方式每每看到朋友圈秀恩爱时就会用知识摆脱烦恼刷刷微博浏览网页学学专业技能......但是&#xff01;居然连专业都不放过表白还那么高调来感受感受吧……音乐专业每次看着你…

第三节 DOM-Element对象

一. 整体介绍 这里介绍DOM对象中Element对象。 那么何为Element对象呢&#xff1f;Element对象就是HTML元素&#xff0c;Element对象包括&#xff1a;元素节点、文本节点、属性节点。 下面利用一张图来总体概括一下Element对象包含的知识点。 二. 知识梳理 一张图胜似千言万语…

计算机维修案例分析题,14-15年春季高考信息技术题(组装维修部分)

2014年山东省春季高考信息技术类组装维修试题一、选择题(每小题2分)36.计算机硬件系统的核心部件是A&#xff0e;主板B&#xff0e;CPU C&#xff0e;内存D&#xff0e;硬盘37.北桥芯片的功能不包括A&#xff0e;对CPU类型和主频的支持B&#xff0e;对ECC纠错的支持C&#xff0…

第四节Dom-Attribute对象

Dom-Attribute对象 Dom-Event对象