DIV盒子介绍

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盒子介绍的更多相关文章
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- DIV横向排列_CSS如何让多个div盒子并排同行显示
如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...
- div盒子垂直水平居中
div盒子,水平垂直居中. <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- div盒子水平居垂直中的几种方法
div盒子水平居垂直中的几种方法<!DOCTYPE html><html> <head> <mete charset="ut ...
- div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...
- html 中 div 盒子并排展示
在项目中,遇到一个前端问题,觉得小问题就别去找前端工程师解决了,还是自己动动手吧. 相信不管小问题,大问题 都应该先自己尝试解决,google .度娘查查资料,这绝对是增加理解和记忆的好机会. ##问 ...
- 让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
- day23—JavaScript实现DIV盒子拖拽(原生方式)
转行学开发,代码100天——2018-04-08 <!doctype html> <html> <head> <meta charset="utf- ...
- div盒子或者图片并排居中
要使div总是找不到原因居中很简单,float和display都可以实现,float就不说了,这里说一下display:line-block,比如四个或者多个div盒子,明明设置好了宽度后,总有一个上 ...
随机推荐
- 常用脚本--生成Agent Job的创建脚本
USE [master] GO /****** Object: StoredProcedure [dbo].[DumpJobsql] Script Date: 02/07/2014 11:38:46 ...
- xshell显示隐藏窗口页签
有时候不知道操作说了什么红框中的页签会消失,可以ctrl+shift+t 控制显示隐藏
- Kafka与.net core(二)zookeeper
1.zookeeper简单介绍 1.1作用 zookeeper的作用是存储kafka的服务器信息,topic信息,和cunsumer信息.如下图: 而zookeeper是个什么东西呢?简单来说就是一个 ...
- 记开发个人图书收藏清单小程序开发(六)Web开发
Web页面开发暂时是没有问题了,现在开始接上Ptager.BL的DB部分. 首先需要初始化用户和书房信息.因为还没有给其他多余的设计,所以暂时只有个人昵称和书房名称. 添加 Init Razor Pa ...
- 201621123023《Java程序设计》第12周学习总结
一.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 二.书面作业 本次PTA作业题集多线程 1. 面向系统综合设计-图书馆管理系统或购物车 使用流与文件改造你的图书 ...
- Javascript对象的几种创建方式
(1) 工厂模式 Function(){ Var child = new object() Child.name = “欲泪成雪” Child.age=”20” Return child; } Var ...
- 【Oracle 12c】CUUG OCP认证071考试原题解析(35)
35.choose the best answer View the Exhibit and examine the description of the EMPLOYEES table. Evalu ...
- [iOS笔试600题]一、语法篇(共有147题)
[A]1. @property 的作用是申明属性及真特性?[判断题] A.正确 B.错误 [A]2. @synthesize的作用是自动笠成属性的访问器(getter/setter)方法?[判断题] ...
- 根据现有PDF模板填充信息(SpringBoot)
根据现有PDF模板填充信息(SpringBoot+maven) 首先得有一个pdf模板,建立pdf模板需要下载工具 红色框为文本框,filename为域名.java需要根据域名赋值 pom 文件配置 ...
- python-------打印与字符串格式化
print python中每次执行print时都会在新的一行上开始.形如:print(’xiao') print('ming') 结果为:>>>xiao >>>mi ...