专栏首页cwl_Java前端基础-CSS模型

前端基础-CSS模型

盒子模型

我们说div就是一个块,它就是一个盒子。其实我们做网页的过程就是摆放盒子的过程

小米官网:www.mi.com

图示

盒子模型的组成

示意图

盒子模型特性

4个组成部分:宽高、内间距、边框、外间距

1.内边距padding

示意图

注意:

  1. 添加了padding属性的元素,会加大盒子的宽或高,需要减去padding的大小
  2. 如果这个块级盒子没有width属性(从父级继承宽度)的时候,添加padding和border不会撑大盒子(盒子内容部分会自动压缩)

2.外边距margin

示意图

多学一招:margin:0 auto;可以让盒子在其父元素中居中

margin:0 auto;和text-align:center;的区别

margin:0 auto;

text-align:center;

针对的对象

盒子—块元素(标签本身)

标签内部的行元素

居中的范围

在父盒子中居中

自己内部

3.边框属性

边框有3要素:边框类型、边框颜色、边框厚度

a) 边框类型

语法:border-style:值

取值:

​ (1)solid实线

​ (2)dashed虚线

​ (3)dotted点线

​ (4)double双线

示意图

b) 边框颜色

语法:border-color:颜色值

示意图

c) 边框厚度

语法:border-width:尺寸值

示意图

d) 一次性写好

语法:border:类型 颜色 宽度

示意图

e) 单独方向的边框设置

语法:

​ (1)上边框:border-top:三要素

​ (2)左边框:border-left:三要素

​ (3)下边框:border-bottom:三要素

​ (4)有边框:border-right:三要素

示意图

多学一招:可以设置none

示意图

f) 边框圆角

语法:border-radius:值

取值:可以是像素,也可以是百分比

示意图

多学一招:当盒子是正方形,圆角的值是边的一半或者百分比是50%的时候,是圆(ie8以下不支持),圆角和边框没关系

总结:元素加边框后,元素会变大

4.盒子模型的bug:

a) 盒子上下摆放,上盒子有下外边距,下盒子有上外边距,两个边距会重合,以大的边距为准

bug1图示

bug1效果图

解决:避免或将这个间距都给到一个元素上面

b) 两个盒子嵌套关系,两个盒子对于上外边距会重合,以大的边距为准

bug2图示

bug2效果图

解决:

​ a) 给外部盒子加上边框或者上padding-top

​ b) 给外部盒子添加oveflow:hidden

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 速读原著-TCP/IP(TCP 服务器的设计)

    我们在1 . 8节说过大多数的T C P服务器进程是并发的。当一个新的连接请求到达服务器时,服务器接受这个请求,并调用一个新进程来处理这个新的客户请求。不同的操...

    cwl_java
  • C++多线程-无队列锁

    对于编写多线程的朋友来说,队列具有天生的互斥性。在队列里面,一个负责添加数据,一个负责处理数据。谁也不妨碍谁,谁也离不开谁。所以,队列具有天生的并行性。

    cwl_java
  • Java工具集-二维码工具类

    cwl_java
  • 国内智能电视战场:国外玩家输给本地货

    导读:Apple TV虎视眈眈,Chromcast已开始国际化进程,iTV呼之欲出,索尼等日韩厂商也准备大干一场,智能电视市场,国外玩家有戏吗?没戏!且看解读。...

    罗超频道
  • celery学习笔记1

    在实际的软件开发过程中,经常会碰到如下场景:某个模块负责产生数据,这些数据由另一个模块来负责处理(此处的模块是广义的,可以是类、函数、线程、进程等)。产生数据的...

    周小董
  • 一图看清nova中创建虚拟机的流程

    用户的入口是nova_client或者是horizon,他们是RestAPI的http客户端。

    虚拟化云计算
  • Markov-Chain

    马尔可夫链(Markov Chain),又称为离散时间马尔可夫链,可以定义为一个随机过程Y,在某时间t上的任何一个点的值仅仅依赖于在时间t-1上的值。这就表示了...

    AngelNH
  • React中JSX的理解

    JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同...

    WindrunnerMax
  • 十一假期余额不足,脑科学揭秘:为什么快乐时光如此短暂

    这个问题很难回答,但我们的时间感却是主观的。不仅如此,时间感还可能是不稳定的,就像拉手风琴一样,扩张又收缩。

    新智元
  • 关于makefile 快速掌握模板教程

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    多凡

扫码关注云+社区

领取腾讯云代金券