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. 何时使用[self release]

    这样的语句   [self release]; 乍看上去让人很困惑. 从release方法本身的作用上来说,就是给self的引用技术减一,就像release对其他对象所做的一样. 一般来说,唯一用到, ...

  2. 服务器如何打开ping命令

    服务器禁止ping后忘记是用什么方法禁止的了.只知道不是使用ip策略现在需要再开启ping...请问该怎么弄? 是不是windows防火墙开启了啊,到控制面板里的windows防火墙中看看,把防火墙关 ...

  3. (广搜)可口可乐 -- hdu -- 1495

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1495 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  4. 企业搜索引擎开发之连接器connector(十九)

    连接器是基于http协议通过推模式(push)向数据接收服务端推送数据,即xmlfeed格式数据(xml格式),其发送数据接口命名为Pusher Pusher接口定义了与发送数据相关的方法 publi ...

  5. 18-11-1 Scrum Meeting 4

    1.会议照片 2.每人的工作 昨天完成的工作 完成测验页面,完善表单验证 完成制定计划,修改计划 关联单词数据,英语单词数据准备 今日计划工作 英文单词的图片准备 完善测验功能 3.项目燃尽图 前端页 ...

  6. Zero Clipboard js+swf实现的复制功能使用方法

    开发中经常会用到复制的功能,在 IE 下实现比较简单.但要想做到跨浏览器比较困难了.本文将介绍一个跨浏览器的库类 Zero Clipboard .它利用 Flash 进行复制,所以只要浏览器装有 Fl ...

  7. Ocelot 新手上路

    新手上路,老司机请多多包含!Ocelot 在博园里文章特别多,但是按照其中一篇文章教程,如果经验很少或者小白,是没法将程序跑向博主的结果. 因此总结下     参考多篇文章,终于达到预期效果. Oce ...

  8. JavaSe 之三目运算符应用

    刚学习Java基本知识,对于三目运算符的应用,尝试了做出求某年份中月份的天数. /*自己随意定义一个年份和月份,使用三目运算符 取得当前月份具体天数.并且输出在控制台. 注意哦:大月31天,小月30天 ...

  9. OpenResty 最佳实践 (1)

    此文已由作者汤晓静授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. OpenResty 发展起源 OpenResty(也称为 ngx_openresty)是一个全功能的 Web ...

  10. iOS 优秀开源项目

    1. 界面 iCarousel: 用来做图片旋转显示效果(相册). MZTimerLabel:用来制作一个计时并显示时间的 label. MSDynamicsDrawerViewController, ...