一.边框    1.边框颜色     border-color 边框颜色(可以设置上边框,如:border-top-color,也可以整体设置,但是要注意顺序)     2.边框粗细     border-width 边框粗细(可以设置上边框,如:border-top-width,也可以整体设置,但是要注意顺序)     2.边框样式     border-style 边框样式(可以设置上边框,如:border-top-style,也可以整体设置,但是要注意顺序)    二.外边距  1.margin   盒子距离浏览器的距离  (可以设置上外边距,如:margin-top,也可以整体设置,但是要注意顺序)    2.居中 margin: 0px auto

三.内边距   1.padding   内容到盒子的距离  (可以设置上内边距,如:padding-top,也可以整体设置,但是要注意顺序)

四.盒子模型的尺寸    尺寸默认:padding+margin+wigth+border    box-sizing 方便计算盒子模型尺寸(默认为content-box,border-box代表随着内容的宽度高度变化而变化)

五.圆角    border-radius 圆角(左上,右上,右下,左下)  /*如果想要一个圆,那么必须满足宽和高一致,圆角取宽度或者高度的二分之一*/  /*如果想要半圆,那么必须满足宽是高的2倍,圆角取宽度的二分之一*/  /*如果想要四分之一圆,那么必须满足宽和高相等,圆角取宽度相等值*/   六.盒子阴影  box-shadow 默认为外阴影,内阴影为inset  box-shadow: 5px -5px 20px black;

HTML盒子模型冷知识!!!的更多相关文章

  1. 关于js盒子模型的知识梳理

    盒子模型 JS盒子模型中的13个常用属性: clientWidth/clientHeight:可视区域的宽高,宽高+PADDING组成 clientTop/clientLeft:上边框和左边框的宽度 ...

  2. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  3. CSS学习篇核心之——盒子模型

    概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...

  4. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

  5. 盒子模型的overflow属性,border属性,padding与margin属性

    今天要写的是CSS布局—盒子模型 首先说一下CSS的整体布局: 它包括容器(container),页眉(header),导航条(navbar),页面主要内容(main),菜单(menu),主要内容(c ...

  6. HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用

    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...

  7. CSS基础知识(颜色、伪类、盒子模型)

    6.设置颜色单位 L    普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L   颜色的八进制方式 ...

  8. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  9. CSS盒子模型与box-sizing

    今天在学习的时候偶然看到一张图片: 我瞬间瞪大了眼睛:width和height竟然不包括padding和border!! 过去所学知识有问题!在我的印象里,width应该是包含padding和bord ...

随机推荐

  1. C# vb .net图像合成-多图片叠加合成

    在.net中,如何简单快捷地实现图像合成呢,比如合成文字,合成艺术字,多张图片叠加合成等等?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码 ...

  2. JavaScript数值类型保留显示小数方法

    <script type="text/javascript"> //保留两位小数 //功能:将浮点数四舍五入,取小数点后2位 function toDecimal(x) ...

  3. Linq实现分组后取最大(小)值

    var beatles = (new[] { new { inst = "张三" , age="50" }, new { inst = "张三&quo ...

  4. 强大的Grafana k8s 插件

    原文参考: https://i4t.com/4152.html 参考:https://blog.csdn.net/mailjoin/article/details/81389700 插件链接:http ...

  5. Mybatis中使用association进行关联的几种方式

    这里以一对一单向关联为例.对使用或不使用association的配置进行举例.  实体类: @Data @ToString @NoArgsConstructor public class IdCard ...

  6. Windows双系统

    基础概念 基础概念 Legacy:传统BIOS传输模式启动顺序:开机→BIOS初始化→BIOS自检→引导操作系统→进入系统.传统硬盘引导记录为MBR格式,MBR无法支持超过2T的硬盘.但拥有最好的兼容 ...

  7. 两种方法实现在HTML页面加载完毕后运行JS

    JS默认方法: <script type=”text/javascript”> window.onload=function (){ /*代码区域*/ } </script> ...

  8. mongos

    官方文档:https://docs.mongodb.com/manual/reference/program/mongos/#bin.mongos mongos是MongoDB shard的缩写,它是 ...

  9. java服务端集成极光消息推送--详细开发步骤

    1.极光推送账号准备 要使用极光消息推送必须先在官方网站上注册账号,并添加应用. 产品介绍:https://docs.jiguang.cn/jpush/guideline/intro/ 注册开发者账号 ...

  10. Java字符串操作工具类

    import java.io.ByteArrayOutputStream; import java.io.UnsupportedEncodingException; import java.lang. ...