1.盒子模型=网页布局的基石,由四部分组成:

  边框(border)、外边距(margin)、内边距(padding)、盒子中的内容(content)

2.设置顺序是顺时针:上、右、下、左。

  三个值(上、左右、下)

  两个值(上下、左右)

  一个值(上下左右)

3.盒子的层次模型(由上到下)

  边框(border)、盒子中的内容(content)+内边距(padding)、背景图像(background-image)、背景颜色(background-color)、外边距(margin)

  盒子模型的尺寸=边框(border)+外边距(margin)+内边距(padding)+盒子中的内容(content)

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow:水平偏移量   horizontal

v-shadow:垂直偏移量   vertical

blur:虚化程度

border-radius: 1-4 length|% / 1-4 length|%;

1个参数:4个角
2个参数:左上 右下 // 左下 右上
3个参数:左上// 左下右上 // 右下
4个参数: 各个圆角

DIV盒子介绍的更多相关文章

  1. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  2. DIV横向排列_CSS如何让多个div盒子并排同行显示

    如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...

  3. div盒子垂直水平居中

    div盒子,水平垂直居中. <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...

  4. div盒子水平居垂直中的几种方法

      div盒子水平居垂直中的几种方法<!DOCTYPE html><html>    <head>        <mete charset="ut ...

  5. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  6. html 中 div 盒子并排展示

    在项目中,遇到一个前端问题,觉得小问题就别去找前端工程师解决了,还是自己动动手吧. 相信不管小问题,大问题 都应该先自己尝试解决,google .度娘查查资料,这绝对是增加理解和记忆的好机会. ##问 ...

  7. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  8. day23—JavaScript实现DIV盒子拖拽(原生方式)

    转行学开发,代码100天——2018-04-08 <!doctype html> <html> <head> <meta charset="utf- ...

  9. div盒子或者图片并排居中

    要使div总是找不到原因居中很简单,float和display都可以实现,float就不说了,这里说一下display:line-block,比如四个或者多个div盒子,明明设置好了宽度后,总有一个上 ...

随机推荐

  1. Swoole2.0协程客户端连接池的实现

    Swoole2.0官方默认的实例是短连接的,在请求处理完毕后就会切断redis或mysql的连接.实际项目可以使用连接池实现复用. 实现原理也很简单,使用SplQueue,在请求到来时判断资源队列中是 ...

  2. 复杂HTML页面解析

    1.层叠样式表CSS可以让html元素呈现出差异化,网络爬虫可以通过class属性的值,轻松分出不同标签 findAll函数通过标签的名称和属性来查找标签 from urllib.request im ...

  3. redis 设置认证

    server 使用帮助 [root@VM_7_88_centos src]# ./redis-server -h Usage: ./redis-server [/path/to/redis.conf] ...

  4. 超详细JSON解析步骤

    JSON简介 JAVAScript Object Notation是一种轻量级的数据交换格式 具有良好的可读和便于快速编写的特性. 业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了 ...

  5. VC 调试技术与异常(错误)处理 VC 调试技术与异常(错误)处理

    调试技术与异常(错误)处理 (1)   转载自 52PK游戏论坛 跟踪与中间过程输出 也许一个开发人员一半以上的时间都是在面对错误,所以好的调试/查错方法(工具)会减轻我们工作的负担,也可以让枯燥的D ...

  6. idea jvm 优化

    修改对应配置文件 64位的是idea64.exe.vmoptions -Xms2048m -Xmx2048m -Xmn1024m -XX:PermSize=512m -XX:MaxPermSize=5 ...

  7. Linux文件扩展思考随笔

    Linux文件时间 ============================================================ ls -l 文件名 仅看到的是最后被修改的时间 Linux ...

  8. 浅议Github的注册和使用

    Self-introduction:编者本人叫司明周,现就读于南通大学计算机学院网络工程142班.爱好数学和音乐,喜欢数学中的逻辑性和天马行空的思维 编程能力:可以跳过略过得过且过吗..好吧,面对现实 ...

  9. 深入了解java虚拟机(JVM) 第十章 字节码指令

    一.字节码指令的含义 Java字节码指令由一个字节长度的,代表某种特定操作含义的数字(操作码)以及其后的零至多个代表此操作所需参数(操作数).此外字节码指令是面向操作数栈的,这里操作数栈在功能上对应实 ...

  10. html中文字溢出处理(text-overflow)

    文字溢出处理有两种方式: 一.css overflow:hidden;            white-space: nowrap;            text-overflow: ellips ...