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 ...
随机推荐
- $(...).wordExport is not a function
参考网址:https://laod.cn/code-audit/jquery-is-not-a-function.html 问题描述: 1.view页面引用的是jquery-1.10.2.min.j ...
- 局域网电脑禁止ping通的解决方法
方法1:命令行模式进入服务器后 点击 开始——运行 输入命令:netsh firewall set icmpsetting 8这样就可以在外部ping到服务器了 非常简单实用!同样道理,如果想禁止Pi ...
- 单IP、网络、别名管道限速的设置
单IP.网络.别名管道限速的设置 在设备上,控制网络限速最常用的是流量×××中的“限制器”,你可以把它理解为一个管道,20Mit/s的下载管道,那么下载的最大流量就不会超过20Mit/s.流量限制器结 ...
- 2-python元组和列表
目录 元组 列表 1.元组 - 元素有序排列 - 一个元组中的元素不需要具有相同的类型 - 元素不可增添.修改和删除 1.1.创建元组 # 创建元组 tup1 = (1,2,3,4) tup2 = t ...
- Python基础知识(三)
Python基础知识(三) 一丶整型 #二进制转成十进制的方法 # 128 64 32 16 8 4 2 1 1 1 1 1 1 1 例如数字5 : 101 #十进制转成二进制的方法 递归除取余数,从 ...
- 嵌入式应用开发第四阶段-基于rk3399的视频监控系统
一.需求分析 伴随着嵌入式技术.图像处理技术和无线网络传输技术的发展,传统模拟视频监控系统和基于PC的远程视频监控系统由于自身的不足,已经无法满足现代社会应用中不断涌现出来的新需求,于是基于嵌入式技术 ...
- js 数组 深拷贝 复制 (汇总)
https://www.cnblogs.com/zhoupengyi/p/6048955.html https://www.cnblogs.com/racyily/p/3532176.html htt ...
- 修改mysql数据存储位置
停止mysql服务. 在mysql安装目录下找到mysql配置文件my.ini. 在my.ini中找到mysql数据存储位置配置datadir选项,比如我电脑上的配置如下: # Path to the ...
- Linux标准IO和管道
Linux标准IO和管道 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.标准输入和输出 程序:指令+数据 读入数据:Input 输出数据:Output 打开的文件都有一个fd: ...
- Linux之RHEL7root密码破解(一)
很多时候我们都会有这样的经历,各种密码,各种复杂,忘记了怎么办???Windows的有关密码忘记了是可以通过相关的邮箱啊手机号等等是可以 找回的,那么Linux的root密码忘记了,该怎么办呢?那么接 ...