css盒模型

学习要点:
1.元素尺寸
2.元素内边距
3.元素外边距
4.处理溢出

本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局。

一.元素尺寸
CSS盒模型中最基础的就是设置一个元素的尺寸大小。有三组样式来配置一个元素的尺寸大小,样式表如下:

属性                       值                                             说明                                CSS版本

width            auto、长度值或百分比            设置元素的宽度                   1

height             auto、长度值或百分比            设置元素的高度                  1

min-width         auto、长度值或百分比                设置元素最小宽度                2

min-height         auto、长度值或百分比         设置元素最小高度                2

max-width        auto、长度值或百分比             设置元素最大宽度               2

max-height        auto、长度值或百分比             设置元素最大高度               2

width,height设置元素尺寸,元素的宽度和高度

                值                    说明

               auto      自适应

     像素px     设置元素尺寸

     百分比      设置元素百分比尺寸,相对于父元素来衡定的

div{background-color: #ff1c19;width: 400px;height: 200px;
}<div><p>你好</p>
</div>

min-width,min-height设置元素最小宽度和最小高度

                值                    说明

               auto      自适应

     像素px     设置元素尺寸

     百分比      设置元素百分比尺寸,相对于父元素来衡定的

div{background-color: #ff1c19;min-width: 400px;min-height: 200px;width: 200px;height: 100px;
}<div><p>你好</p>
</div>

max-width,max-height设置元素最大宽度和最大高度

                值                    说明

               auto      自适应

     像素px     设置元素尺寸

     百分比      设置元素百分比尺寸,相对于父元素来衡定的

div{background-color: #ff1c19;max-width: 200px;max-height: 100px;width: 400px;height: 200px;
}<div><p>你好</p>
</div>

二.元素内边距 

CSS盒模型中可以设置元素内部边缘填充空白的大小,我们成为内边距。样式表如下:

          属性                         值                        说明               CSS版本

       padding-top              长度值或百分比                 设置顶部内边距                   1

     padding-bottom            长度值或百分比                 设置底部内边距                 1

      padding-left               长度值或百分比                 设置左边内边距                   1

      padding-right             长度值或百分比               设置右边内边距                 1

         padding              1~ 4个长度值或百分比      简写属性                           1

div{background-color: #ff1c19;width: 400px;height: 200px;
}
div > p{background-color: #36ff1d;padding-top: 20px;padding-bottom: 40px;padding-left: 60px;
}<div><p>你好</p>
</div>

内边距简写格式,上右下左

div{background-color: #ff1c19;width: 400px;height: 200px;
}
div > p{background-color: #36ff1d;padding: 10px 20px 10px 20px;
}<div><p>你好</p>
</div>

三.元素外边距

CSS盒模型中可以设置元素外部边缘填充空白的大小,我们成为外边距。样式表如下:

           属性                       值                       说明                 SS版本

       margin-top                  长度值或百分比              设置顶部内边距               1

      margin-bottom             长度值或百分比                  设置底部内边距               1

       margin-left                  长度值或百分比              设置左边内边距               1

      margin-right             长度值或百分比              设置右边内边距               1

          margin             1 ~ 4长度值或百分比          简写属性                        1

div{background-color: #ff1c19;width: 400px;height: 200px;
}
div > p{background-color: #36ff1d;width: 200px;height: 100px;margin-top: 30px;margin-bottom: 30px;margin-left: 30px;
}<div><p>你好</p>
</div>

外边距简写格式,上右下左

div{background-color: #ff1c19;width: 400px;height: 200px;
}
div > p{background-color: #36ff1d;width: 200px;height: 100px;margin: 10px 20px 30px 40px;
}<div><p>你好</p>
</div>

四.处理溢出 

当设置了元素固定尺寸且内容过大时,就会出现溢出的问题。溢出主要朝两个方向:右侧和底部。我们可以通过overflow系列样式来控制它。

        属性               值                    说明                       CSS版本

      overflow-x        溢出值            设置水平方向的溢出                 3

      overflow-y        溢出值            设置垂直方向的溢出                 3

       overflow          溢出值            简写属性                              2

以上溢出处理主要有四种处理值:

值             说明

auto            浏览器自行处理溢出内容。如果有溢出内容,就显示滚动条,否则就不显示滚动条。

hidden          如果有溢出的内容,直接剪掉。

scroll            不管是否溢出,都会出现滚动条。但不同平台和浏览器显示方式不同。

visible           默认值,不管是否溢出,都显示内容。

div{background-color: #ff1c19;width: 400px;height: 200px;
}
div > p{background-color: #36ff1d;width: 200px;height: 100px;overflow-y: hidden;
}<div><p>简介:当梁宇方决意不出席铂尔曼酒店十五周年庆酒会的时候,他的父亲,也是酒店董事长的梁泽,以及总经理梁宇青,正殷殷期盼着能够在这个酒会上正式将他介绍出来。无心接班的宇方竟然藏身在马场和分别六年的爱马Sky驰骋草原。宇青的突然现身马场令他无所遁行,就这样被压回了酒店准备亮相。但宇方仍不甘示弱,仍伺机逃跑… 小歌星杜允儿来到酒店接周年庆的暖场演唱,向天微义不容辞同行来帮忙,两人仓皇找着</p>
</div>

元素可见性

使用visibility属性可以实现元素的可见性,这种样式一般可以配合JavaScript 来实现效果。样式表如下:

属性       值          说明                               CSS版本

visibility    visible        默认值,元素在页面上可见。                        2

         hidden       元素不可见,但会占据空间。                       2

        collapse        元素不可见,隐藏表格的行与列,如果不是表格,则和hidden一样。         2

table .a{visibility: collapse;
}<div><table border="1"><tr class="a"><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></table>
</div>

元素盒类型
CSS盒模型中的display属性,可以更改元素本身盒类型。那么元素有哪些盒类型呢? 主要有:1.块级元素(区块);2行内元素(内联);3行内 块级元素(内联块);4.隐 藏元素。

1.块级元素 (区块)
所谓块级元素,就是能够设置元素尺寸、隔离其他元素功能的元素。比如:<div>、<p>等文档元素。

2.行内元素 (内联)
所谓行内元素,不能够设置元素尺寸,它只能自适应内容、无法隔离其他元素,其它元素会紧跟其后。比如:<span>、<b>等文本元素。

3.行内-块元素 (内联块)
所谓行内 块元素,可以设置元素尺寸,但无法隔离其他元素的元素。比如<img>。

         属性                值                    说明                   CSS版本

        display         block              盒子为块级元素             1

                            inline            盒子为行内元素             1

                        inline-block        盒子为行内 块元素         2

                            none                  盒子不可见,不占位       1

将内联转换成区块

span{background-color: #ff1d30;display: block;
}<span>这是内联</span>

将区块转换成内联

p {background-color: #ff1d30;display: inline;
}<p>这是区块</p>

将块级元素转化成行内块元素(内联块

p{background-color: #ff1d30;display: inline-block;
}<p>这是区块</p>

将盒子元素隐藏,不占位

p{background-color: #ff1d30;display: none;
}<p>这是区块</p>文本

display属性还有非常多的值,有些后面部分讲解,而有些支持度不好或者尚不支持,从而省略。有兴趣的,可以参考CSS3手册。

元素的浮动
CSS盒模型有一种叫浮动盒,就是通过float属性建立盒子的浮动方向,样式表如下:

       属性               值                     说明                  CSS版本

         float             left                浮动元素靠左                1

                right                 浮动元素靠右                1

                            none                  禁用浮动                      1

div {width: 200px;height: 200px;
}
.a{background-color: #ff1d30;float: right;
}
.b{background-color: #ffcf2c;float: right;
}
.c{background-color: #3eff51;float: left;
}<div class="a">我是1</div>
<div class="b">我是2</div>
<div class="c">我是3</div>

清除浮动

刚才的浮动有一个问题:当一个元素盒子被浮动后,下面的元素会自动堆叠处理,导致元素不可见或部分不可见。我们可以使用clear属性来处理。

 属性               值                    说明                        CSS版本

        clear            none              允许两边均可浮动                       1

                           left                 左边界不得浮动                              1

                           right                右边界不得浮动                             1

                           both                两边都不得浮动 【推荐】                1

div {width: 200px;height: 200px;
}
.a{background-color: #ff1d30;float: left;
}
.b{background-color: #ffcf2c;clear: left;
}
.c{background-color: #3eff51;
}<div class="a">我是1</div>
<div class="b">我是2</div>
<div class="c">我是3</div>

 position定位CSS中定位的使用

属性名称              属性值                 说明

position              relative              设置区块基准点为左上角(相对定位)

                              absolute              设置网页的为基准点左上角(绝对定位)

          static                     无设置

              

 left                     auto                  以基准点定位在左边

                               像素/百分比          定位在左边

top                    auto                      以基准点定位在上边

                               像素/百分比            定位在上边

 right                       auto                      以基准点定位在右边

                               像素/百分比            定位在右边 

bottom                    auto                      以基准点定位在下边

                               像素/百分比            定位在下边 

 z-index                   auto                     自动调整高度

                                数字                      数字越大越往上层

 

 使用技巧,有时候会把父亲级元素设置为相对定位,只设置一个相对定位不设置定位值,然后将子级元素设置绝对定位

vertical-align内联元素垂直位置设置

解释:负值往下,正值往上。如果默认基线在上面,用负数。如果默认基线在下面,用正值。

              值                           说明                                CSS版本

            长度值               设置上下的偏移量,可以是负值                       1

            百分比               同上                                                           1

@charset "utf-8";
div{width: 132px;height: 42px;background-color: #4af5ff;
}
samp{background-color: #ff4e37;vertical-align: -10px;
}<div><samp>加入购物车</samp>
</div>

转载于:https://www.cnblogs.com/adc8868/p/5972645.html

第七十三节,css盒模型相关推荐

  1. 简要介绍css的盒模型,CSS盒模型的介绍

    CSS盒模型的概念与分类 CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和IE模型: ...

  2. 从零开始学前端 - 7. CSS盒模型 margin和padding详解

    作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...

  3. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  4. css盒模型和元素绘制

    转自:http://www.mysjtu.com/page/M0/S438/438952.html 一.什么是css盒模型? W3C组织就建议把所有网页上的对象都放在一个盒(box)中,设计师可以通过 ...

  5. 深入理解CSS盒模型 - 程序猿的程 - 博客园

    深入理解CSS盒模型 本文是学习中传思客在慕课网开的课程<前端跳槽面试必备技巧>的学习笔记.课程地址:https://coding.imooc.com/class/evaluation/1 ...

  6. CSS 盒模型与box-sizing

    一.盒模型 一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...

  7. css盒模型中margin很牛逼

    css盒子模型,说简单也简单,用的时候也有不简单的. 其中margin的值可以为负值,并且为了实现margin,忽略父级的padding.border.甚至定位.这在布局上很有用,要注意. ----- ...

  8. 【HTML/CSS】CSS盒模型及其理解

    1 盒模型 概念:CSS盒模型本质是一个盒子,包括:外边距margin.边框border.内边距padding.内容content 分类:标准盒模型(W3C)和怪异盒模型(IE) 标准盒模型:widt ...

  9. 【Day06】请画出 Css 盒模型,基于盒模型的原理,说明相对定位、绝对定位、浮动实现样式是如何实现的?

    一.Css 盒模型 页面上任何一个元素,我们都可以看成是一个盒子,盒子会占用一定的空间和位置,他们之间相互制约,就形成了网页的布局. w3c 的盒模型的构成:content border paddin ...

  10. html盒子模型子元素怎么水平占满父元素_前端面试常考问题之css盒模型

    一.题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型. ...

最新文章

  1. hadoop 2.7.3
  2. visio交换机图标_分享 | 华为交换机开局配置一本通,弱电新人学习!
  3. java 学习思路_Java的学习思路
  4. java前言_Java Web前言
  5. 简述python的特性_Python的特性概要
  6. [BZOJ]3926 诸神眷顾的幻想乡(ZJOI2015)
  7. win10家庭版无法安装mysql_Win10安装MySQL
  8. python快速排序算法没看懂_python中的快速排序算法的理解
  9. 联想K31笔记本完全拆解,装不回去了。想做个电视机或者显示器
  10. Leetcode惊现马化腾每天刷题?为啥大佬都这么努力!
  11. c语言中 x20是什么意思,转义字符的问题,\ x00- \ x20是什么意思
  12. Chrome游览器下载
  13. 华三imc服务器型号,华三imcportal服务器常见错误分析报告.doc
  14. 解决——U盘格式化为NTFs之后,显示不了U盘
  15. 解决WIN10播放AVI等格式视频黑屏只有声音的问题
  16. 安卓开发——android8.0应用崩溃,报错: Only fullscreen opaque activities can request orientation
  17. vue3使用flv.js播放推流视频,完整版组件
  18. CVPR 2020 开幕!最佳论文奖等揭晓!
  19. 【笔记】播放器 - mpv - 使用、配置
  20. SEO优化人员分析IIS日志方法详解

热门文章

  1. IDEA java 显示build目录
  2. FISCO BCOS rpc端口、channel端口、p2p端口 怎么用是什么
  3. 区块链 以太坊 智能合约 运行原理和开发实例
  4. 有关计算机的未来想象作文,电脑的想象作文
  5. 基于SSM的健身俱乐部管理系统
  6. php编写 密码检查,php-检查旧密码和新密码的规则
  7. mybatisplus自动填充时间出现的问题
  8. mysql手写data.sql ,使用语句创建数据库(创建数据库/表 , 设置时间(date)的默认值(default),设置字符集)
  9. 数字字符减去数字字符0就是数字
  10. jenkins根据已打包的镜像,自动生成正式镜像