关于CSS重要知识点(1)
1. 盒子模型
CSS处理网页内容时,会把每一个元素"放在"一个盒子里,也就是所谓的盒子模型。
盒子模型包括4部分:内容,内边距(padding),边框(border)和外边距(margin)
上图展示了整个盒子模型的内容,怎么样?简单吧。如果你认为简单,那就大错特错了!!
盒子模型里边有一个坑,就是取元素的height和width时,可以多种方式来指定这个高和宽属性。换句话说在某些情况下,一个元素的height和width是不一样的。那么究竟是哪些情况下呢?答案就是box-sizing属性。这个属性设值不一样,元素的height和width就不一样。
1) box-sizing:content-box. 也就是默认值。
在上图中,height和width就是最内侧矩形(内容区域)的高和宽。
2)box-sizing:padding-box
在上图中,height和width就是最内侧矩形(内容区域)的高和宽加上各自的padding。
3) box-sizing:border-box
在上图中,height和width就是最内侧矩形(内容区域)的高和宽加上各自的padding,在加上border宽度。
怎么样,有点坑吧,不过这个坑还没有完全填好。这个丫的box-sizing属性还TM跟浏览器相关,不同浏览器属性名称前缀还不一样,这一点容易看出来,在IDE里边敲属性名称时候自然就提示出来了。
一般浏览器:box-sizing
Firefox用的是:-moz-box-sizing
移动设备安卓/IOS:-webkit-box-sizing
怎么样,这个CSS知识点掌握了吧。
关于CSS重要知识点(1)的更多相关文章
- HTML和CSS的知识点
HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件 文档声明:在HTML的文档中必不可少,且必须在文档的第一行 文档声明的编码格式<!- ...
- Web前端-CSS必备知识点
Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- css入门知识点整理
css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...
- HTML&&CSS基础知识点整理
HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...
- CSS基本知识点——带你走进CSS的新世界
CSS基本知识点 我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解: (如果没有学习HTML,请参考之前文章:HTML知识点概括--一篇文章带你完全掌握HTML& ...
- [总结]WEB前端开发常用的CSS/CSS3知识点
css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度 ...
- css相关知识点
一.CSS的引入方式 1.1 css的介绍 HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
- css布局知识点汇总
昨天早上看到了一篇很棒的文章,这篇文章将布局的一些知识点整理的很不错.我也想整理一下,这样在以后的项目中可以活学活用,避免只用一种方式. 参考文章:https://segmentfault.com/a ...
随机推荐
- MVC Filter中加入验证并跳转
public class BuildingFilter : ActionFilterAttribute { /// <summary> /// 验证 Building Cookie add ...
- iOS 模拟不同的字体大小
 真的是神器!! 参考 Creating Self-Sizing Table View Cells
- selenium IDE的基本命令
waitForText.verifyText和asserText命令 waitForText语句在测试执行时用来判断某些文本是否存在界面中.若界面上显示了指定文本,测试程序会继续执行:若等待一段时间后 ...
- ajax--底层代码
ajax:Asynchronous JavaScript And XML,异步的js与XML.ajax并不是一种新的编程语言,而是一种使用现有标准的新方法.ajax能够在不重载整个网页的情况下与服务器 ...
- 为了用python计算一个汉字的中心点,差点没绞尽脑汁活活累死
为了用python计算一个汉字的中心点,差点没绞尽脑汁活活累死
- Java执行Shell脚本“No such file or directory” (win->Linux)异常的可能原因
转自:http://blog.csdn.net/zlpdaisy/article/details/6134314 用Runtime.getRuntime().exec()方法执行Linux的一个She ...
- (转)Linux 文件目录特殊权限设定(SUID,SGID,SBIT)
原文:https://blog.csdn.net/leshami/article/details/77184029 Linux文件及目录的权限设定,除了我们孰知的读写执行(rwx)之外,还有一些特殊的 ...
- Dubbo-使用Maven构建Dubbo服务的可执行jar包
一.为什么要构建Dubbo服务的可执行jar包? 1.1 Dubbo服务运行方式比较 ✎使用Servlet容器运行(Tomcat.Jetty等) ---不可取 --缺点:增加复杂性(多了容器的端口) ...
- 开源视频会议bigbluebutton
这是另一个开源视频会议项目,简称bbb 官方网站:http://bigbluebutton.org/ 代码地址:https://code.google.com/p/bigbluebutton/ dem ...
- OpenGL10-骨骼动画原理篇(3)-Shader版本代码已经上传
视频教程请关注 http://edu.csdn.net/lecturer/lecturer_detail?lecturer_id=440 接上一个例程OpenGL10-骨骼动画原理篇(2),对骨骼动画 ...