一.边框    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. $(...).wordExport is not a function

     参考网址:https://laod.cn/code-audit/jquery-is-not-a-function.html 问题描述: 1.view页面引用的是jquery-1.10.2.min.j ...

  2. 局域网电脑禁止ping通的解决方法

    方法1:命令行模式进入服务器后 点击 开始——运行 输入命令:netsh firewall set icmpsetting 8这样就可以在外部ping到服务器了 非常简单实用!同样道理,如果想禁止Pi ...

  3. 单IP、网络、别名管道限速的设置

    单IP.网络.别名管道限速的设置 在设备上,控制网络限速最常用的是流量×××中的“限制器”,你可以把它理解为一个管道,20Mit/s的下载管道,那么下载的最大流量就不会超过20Mit/s.流量限制器结 ...

  4. 2-python元组和列表

    目录 元组 列表 1.元组 - 元素有序排列 - 一个元组中的元素不需要具有相同的类型 - 元素不可增添.修改和删除 1.1.创建元组 # 创建元组 tup1 = (1,2,3,4) tup2 = t ...

  5. Python基础知识(三)

    Python基础知识(三) 一丶整型 #二进制转成十进制的方法 # 128 64 32 16 8 4 2 1 1 1 1 1 1 1 例如数字5 : 101 #十进制转成二进制的方法 递归除取余数,从 ...

  6. 嵌入式应用开发第四阶段-基于rk3399的视频监控系统

    一.需求分析 伴随着嵌入式技术.图像处理技术和无线网络传输技术的发展,传统模拟视频监控系统和基于PC的远程视频监控系统由于自身的不足,已经无法满足现代社会应用中不断涌现出来的新需求,于是基于嵌入式技术 ...

  7. js 数组 深拷贝 复制 (汇总)

    https://www.cnblogs.com/zhoupengyi/p/6048955.html https://www.cnblogs.com/racyily/p/3532176.html htt ...

  8. 修改mysql数据存储位置

    停止mysql服务. 在mysql安装目录下找到mysql配置文件my.ini. 在my.ini中找到mysql数据存储位置配置datadir选项,比如我电脑上的配置如下: # Path to the ...

  9. Linux标准IO和管道

    Linux标准IO和管道 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.标准输入和输出 程序:指令+数据 读入数据:Input 输出数据:Output 打开的文件都有一个fd: ...

  10. Linux之RHEL7root密码破解(一)

    很多时候我们都会有这样的经历,各种密码,各种复杂,忘记了怎么办???Windows的有关密码忘记了是可以通过相关的邮箱啊手机号等等是可以 找回的,那么Linux的root密码忘记了,该怎么办呢?那么接 ...