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. MySQL性能调优与架构设计——第11章 常用存储引擎优化

    第11章 常用存储引擎优化 前言: MySQL 提供的非常丰富的存储引擎种类供大家选择,有多种选择固然是好事,但是需要我们理解掌握的知识也会增加很多.每一种存储引擎都有各自的特长,也都存在一定的短处. ...

  2. (深搜)Oil Deposits -- hdu -- 1241

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

  3. openGL中的原理理解1---一个视图需要支持OGL需要配置,GLenbalView的理解

    OpenGL的绘图机制是 OpenGL的绘图方式与Windows一般的绘图方式是不同的,主要区别如下: (1)Windows采用的是GDI(Graphy Device Interface 图形设备接口 ...

  4. 18个扩展让你的Firefox成为渗透测试工具

    Firefox是一个出自Mozilla组织的流行的web浏览器.Firefox的流行并不仅仅是因为它是一个好的浏览器,而是因为它能够支持插件进而加强它自身的功能.Mozilla有一个插件站点,在那里面 ...

  5. SSO单点登录三种情况的实现方式详解(转载)

    单点登录(SSO——Single Sign On)对于我们来说已经不陌生了.对于大型系统来说使用单点登录可以减少用户很多的麻烦.就拿百度来说吧,百度下面有很多的子系统——百度经验.百度知道.百度文库等 ...

  6. Object对象方法 cheet sheet

    defineProperty create Object.create(prototype [, propertiesObject ]) prototype:没什么可说的,指定对象的原型 proper ...

  7. solr特点三: boost(改变默认打分排序)

    有时候默认的字段打分不能满足我们的需要,如我们想把关键词出现在标题中的优先显示. 测试于:Solr 4.5.1, Jdk 1.6.0_45, Tomcat 6.0.37 | CentOS 5.7 实现 ...

  8. cron和crontab

    crontab -l 列出目前的计划任务(时程表) crontab -e 编辑计划任务   计划任务的格式如下: f1 f2 f3 f4 f5 program 其中 f1 是表示分钟,f2 表示小时, ...

  9. Django_Restframwork_序列号组件

     第一种序列化方式. 第二种方法通过Model_to_dict方法进行创建 第三种方式序列号组件Serializers: 第四种方法序列化 五.ModelSerializer组件. POST校验 PU ...

  10. 激活xmind的方法

    https://blog.csdn.net/qq_38238041/article/details/81107127 这里以windows为例来演示,其它操作系统需根据情况修改相应步骤. 下载安装包 ...