HTML盒子模型冷知识!!!
一.边框 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盒子模型冷知识!!!的更多相关文章
- 关于js盒子模型的知识梳理
盒子模型 JS盒子模型中的13个常用属性: clientWidth/clientHeight:可视区域的宽高,宽高+PADDING组成 clientTop/clientLeft:上边框和左边框的宽度 ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- CSS学习篇核心之——盒子模型
概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...
- css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
- 盒子模型的overflow属性,border属性,padding与margin属性
今天要写的是CSS布局—盒子模型 首先说一下CSS的整体布局: 它包括容器(container),页眉(header),导航条(navbar),页面主要内容(main),菜单(menu),主要内容(c ...
- HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...
- CSS基础知识(颜色、伪类、盒子模型)
6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式 ...
- padding标准盒模型和怪异盒子模型
我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...
- CSS盒子模型与box-sizing
今天在学习的时候偶然看到一张图片: 我瞬间瞪大了眼睛:width和height竟然不包括padding和border!! 过去所学知识有问题!在我的印象里,width应该是包含padding和bord ...
随机推荐
- swagger list Could not resolve reference because of: Could not resolve point
swagger list Could not resolve reference because of: Could not resolve point controller的参数要加 @Requ ...
- Centos复制的系统无法获取IP地址
本文主要是解决自己玩虚拟机时遇到的问题,网上查询了很多资料,最好综合多方的资料进行如下总结,如果无法解决您得问题,不要着急慢慢梳理总会解决的,加油~~~ 1.添加一块新的虚拟机的网卡2.删除rm -r ...
- Microsoft Project项目管理工具
下载 网址 安装 要注意以前安装的32位的Office或者Visio时这里会检测到,这里也要装32位的.不能根据系统位数来了.下载前先看清你用的Microsoft的软件是什么版本. 使用 新建空白项目 ...
- 【转载】C#中List集合使用Min()方法查找到最小值
在C#的List集合操作中,有时候需要查找到List集合中的最小值,此时可以使用List集合的扩展方法Min方法,Min方法有2种形式,一种是不带任何参数的形式,适用于一些值类型变量的List集合,另 ...
- CSS样式表及选择器相关内容(一)
CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...
- Android Studio 打包生成apk
打开AndroidStudio,并且打开想要生成apk文件的项目 点击工具栏上面的“Builder” 点击“Builder”之后在下拉菜单里面可以看到“Genarate Singed APK”,点 ...
- 分布式数据库中间件、产品——sharding-jdbc、mycat、drds
一般对于业务记录类随时间会不断增加的数据,当数据量增加到一定量(一般认为整型值为主的表达到千万级,字符串为主的表达到五百万)的时候,性能将遇到瓶颈,同时调整表结构也会变得非常困难.为了避免生产遇到这样 ...
- 【Mybatis异常】Caused by: java.sql.SQLException: Parameter index out of range (1 > number of parameters, which is 0).
一.错误原因分析 从错误提示可以看出:实际传入的参数大于sql中待设置的参数,也就是sql中的?少于参数或?根本没有产生原因: ?号被单引号包围 如: sql += " and artic ...
- 在CentOS 7上修改主机名的方法
这次我们来讲解一下如何在CentOS 7环境上修改主机名 1.从VMware上登录CentOS 7的虚拟机,并以root用户登录. 2.查看未修改前的主机名 1>.我们可以通过文件hostnam ...
- SQL注入原理-手工联合注入查询技术
实验报告记录 得到实验结果