CSS3盒模型温故

CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的。每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline、inline-block、block、table、absolute position、float。
浏览器把每个元素看做一个盒模型,每个盒模型是由以下几个属性组合所决定的:display、position、float、width、height、margin、paddinghe border等,不同类型的盒模型会产生不同的布局

什么是盒模型?
页面中的每一个元素都是一个盒模型,包括HTML和body。如下图,每一个盒模型都是由多种属性组成的

重置盒模型解析模式
在W3C的传统CSS2.1盒模型中,通过声明width和height值来控制内容区域的宽度和高度,然后附加上内边距和边框等,称为内容盒模型
在CSS中盒模型被分为两种,第一种是W3C的标准模型,另一种是IE的传统模型,它们相同之处都是对元素计算尺寸的模型,具体说就是对元素的width、height、padding和border以及元素实际尺寸的计算关系,不同之处是两者的计算方法不一致
1)W3C的标准盒模型
外盒尺寸计算(元素空间尺寸)
element空间高度 = 内容高度 内距 边框 外距
element空间宽度 = 内容宽度 内距 边框 外距
内盒尺寸计算(元素大小)
element高度 = 内容高度 内距 边框(height为内容高度)
element宽度 = 内容宽度 内距 边框(width为内容宽度)
2)IE传统下盒模型(IE6以下,不包含IE6版本或QuirksMode下IE5.5 )
外盒尺寸计算(元素空间尺寸)
element空间高度 = 内容高度 外距(height包含了元素内容宽度、边框、内距)
element空间宽度 = 内容宽度 外距(包含了元素内容宽度、边框、内距)
内盒尺寸计算(元素大小)
element高度 = 内容高度(height包含了元素内容宽度、边距、内距)
element宽度 = 内容宽度(width包含了元素的内容宽度、边距、内距)
做个小总结:我个人的理解就是,IE下的盒模型,直接设置了box-sizing:border-box;

1.CSS3盒模型属性
语法及参数:box-sizing:content-box | border-box | inherit
三个属性值说明:
content-box:默认值,让元素维持W3C的标准盒模型。元素的宽度和高度(width/height)= 元素边框宽度(border) 元素内距(padding) 元素内容宽度和高度(content width/height),也就是element width/height=border padding content width/height
border-box:此值会重新定义CSS2.1中盒模型组成的模式,让元素维持IE传统的盒模型(IE6以下版本和6 ~ 7怪异模式)。元素的宽度或高度 = 元素内容的宽度或高度。从盒模型介绍可知,这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度(此处的内容宽度或高度 = 盒子的宽度或高度-边框-内距)
inherit:此值是元素继承父元素的盒模型模式

box-sizing属性主要用来控制元素的盒模型的解析模式,其主要目的是控制元素的总宽度。box-sizing:border-box;这种设置使页面布局更加方便,只要对元素就行width设置,总宽度就固定不变
注:在Firefox浏览器中,box-sizing还可以设置一个padding-box属性值,用来指定元素的宽度或高度包括内容的宽度或高度和内距,但不包括边框宽度

浏览器兼容性

2.CSS3内容溢出属性
盒模型,也就是一个容器,容器就有空间有大小,当某些内容在盒子中容不下时,就会超出盒子,此时就可以使用overflow(CSS2.1)属性来指定如何显示盒中容纳不下的内容。在CSS3中增加了overflow-x和overflow-y属性
语法及参数:
overflow-x:visible | hidden | scroll | auto | no-display | no-content
overflow-y:visible | hidden | scroll | auto | no-display | no-content
和overflow属性参数一样,overflow-x和overflow-y属性值去不同的值所起的作用不一样
visible:默认值,表示不剪切容器中的任何内容、不添加滚动条,元素将被剪切为包含对象的窗口大小,而且是clip属性设置将失效
hidden:内容溢出容器时,所有内容都将隐藏,而且不显示滚动条
scroll:不管内容有没有溢出容器,overflow-x都会显示横向的滚动条,而overflow-y会显示纵向的滚动条
auto:在需要时剪切内容并添加滚动条。也就是说当内容超过容器的宽度或者高度时,溢出的内容将会隐藏在容器中,并且会添加滚动条,用户可以拖动滚动条查看隐藏在容器中的内容
no-display:当内容溢出容器时不显示元素,此时类似于元素添加了display:none声明一样
no-content:当内容溢出容器时不显示内容,此时类似于添加了visibility:hidden声明一样

浏览器兼容性

3.CSS3自由缩放属性
为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,也是一个非常实用的属性,它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。
语法及参数:
resize:none | both | horizontal | vertical | inherit
属性值说明:
none:用户不能拖动元素修改尺寸大小
both:用户可以拖动元素,同时修改元素的宽度和高度
horizontal:用户可以拖动元素,仅可以修改元素的宽度,但不能修改元素的高度
vertical:用户可以拖动元素,仅可以修改元素的高度,但不能修改元素的宽度
inherit:继承父元素的resize属性值

浏览器兼容性

4.CSS3外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现
语法及参数:
outline:[outline-color] | [outline-style] | [outline-width] | [outline-offset] | inherit
属性值说明:
outline-color:定义了轮廓线的颜色,默认为黑色
outline-style:定义了轮廓线的样式,默认为none
outline-width:定义轮廓线的宽度,属性值可以为一个宽度值,默认值为medium,表示绘制中等宽度的轮廓线
outline-offset:定义轮廓边框的便宜位置的数值,此值可以是负值。为正值时,表示轮廓边框向外偏移多少个像素;当为负值是,表示轮廓边框向内偏移多少个像素
inherit:元素继承父元素的outline效果

浏览器兼容性

outline和border的对比
1)border是盒模型的一部分直接影响其大小,outline不影响文档流,也不破坏网页布局
2)border可以单边设置,outline始终闭合;没有outline-top或outline-left之类
3)outline创建的外轮廓线可能是非矩形的,我的理解是当元素在文档边上的时候,轮廓被隐藏了;而border不会被隐藏掉
4)border只能向外扩展;而outline内外都可以

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361219.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SSL与WildFly 8和Undertow

我一直在研究WildFly 8的一些安全性主题,偶然发现了一些配置文档,这些文档没有很好地记录。 其中之一是新Web子系统Undertow的TLS / SSL配置。 有许多关于较旧的Web子系统的文档,并且确实仍然可以使用,但是这里是使用新方法进行配…

伸展树

伸展树结合了二叉搜索树BST及二叉平衡树AVL的旋转特点,在每一次访问到某节点时都通过旋转将该节点往上推一位,由于没有保存高度信息因为空间复杂度稍优于二叉平衡树。伸展树的插入,删除,搜索的平均时间复杂度均为o(logn)&#xff…

CSS属性选择器温故-4

1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总结:CSS选择器和jQuery的选择器非常相似&#xff…

如何封装Spring bean

据我所知,Spring Framework除了具有单独的上下文之外,没有提供任何封装Spring bean的机制。 因此,当您在Spring的Inversion of Control容器中注册了公共类时,可以通过相同的上下文配置将其自动连接到任何Spring bean中。 这非常强…

分享下自己的EmpireofCode进攻策略 https://empireofcode.com/ https://empireofcode.com/game/#

# 没什么用,该游戏的模块调用不友好,取数据难import queue from battle import commander # import mathunit_client commander.Client() doing_last_order True towerid [] towerrg [] towerfr [] towerps [] tower_id 0 towers [] safe_posi[4…

Python多篇新闻自动采集

昨天用python写了一个天气预报采集,今天趁着兴头写个新闻采集的。 目标是,将腾讯新闻主页上所有新闻爬取下来,获得每一篇新闻的名称、时间、来源以及正文。 接下来分解目标,一步一步地做。 步骤1:将主页上所有链接爬取…

使用ADF BC管理保存点

在使用ADF BC时,我们通常依赖于在数据库中执行DML操作的框架。 在DBTransaction提交周期内,该框架正确地在数据库中进行了所有必要的更新。 很酷的事情是,在这种情况下,数据库事务将被自动管理。 因此,如果出现问题&am…

sql优化(转)

(转)SQL 优化原则一、问题的提出 在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的的编写等体会不出SQL语句各种写法的性能优劣,但是如果将应用 系统提交实际应用后,随着数据库中数据的增加&a…

2017-12-04HTML table布局

<!DOCTYPE html> <html> <head lang"en"> <meta charset"UTF-8"> <title>table布局</title> </head> <body marginwidth"0px" marginheight"0px"> <table width"…

Java EE 8发生了什么? (第2部分)

Java EE 8的工作仍处于初期阶段&#xff0c;预计在来年会紧跟潮流&#xff0c;我们将看到专家组的形成完成&#xff0c;围绕用例/功能的更多讨论&#xff0c;许多JIRA&#xff0c;以及各种规范的草案版本&#xff08;本会很有趣&#xff01;&#xff09;。 在第1部分中 &#…

foreach语句的的解析

我这个虾米&#xff0c;今天才知道foreach语句是这样解析的&#xff0c;惭愧啊&#xff01;幸好我最新在原生态的学习这门编程语言。 //程序中我们这样写foreachforeach (Person item in Persons){Console.WriteLine(item);} //其实如果要使用foreach,需要实现IEnumerator接口&…

滚动条位置判断

//获取滚动条距离顶部位置function getScrollTop() { var scrollTop 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop document.documentElement.scrollTop; } else if (document.body) { scrollTop d…

如何处理Java注释

Java 8的很酷的新功能之一就是对lambda表达式的支持。 Lambda表达式在很大程度上依赖于FunctionalInterface 注释 。 在本文中&#xff0c;我们将介绍注释以及如何处理它们&#xff0c;以便您可以实现自己的出色功能。 注解 Java 5中添加了注释 。Java语言附带了一些预定义的…

(转)MFC技巧学习五

51. 如何获得其他程序的图标,并显示在View中 [问题提出] 有的时候,如:类资源管理器会遇到获得程序图标并显示的操作,如何实现呢? [解决方法] SDK函数SHGetFileInfo来获得有关文件的很多信息:如大小图标,属性,类型等.  [程序实现] 建立名为My的SDI工程.在OnPaint()函数中…

使用navicat premium将数据库从Oracle迁移到SQL Server,或从Oracle迁移到MySQL

有时候我们有迁移数据库的需求&#xff0c;例如从Oracle迁移到SQL Server&#xff0c;或者从MySQL迁移到Oracle。 很多江湖好汉一时不知如何手工操作&#xff0c;所幸的是Navicat提供了迁移的自动化操作界面。 当然&#xff0c;Navicat的数据库迁移无法做到完美&#xff0c;一些…

书评:Mockito Essentials

Sujoy Acharya的Mockito Essentials副标题&#xff08; Packt Publishing &#xff0c;2014年10月&#xff09;是&#xff1a;“实用指南&#xff0c;可帮助您使用Mockito进行单元测试并开始运行。” Mockito Essentials中的前言和七章涵盖大约190个实质性页面。 前言 在序言中…

Oracle ORA-07445 [evaopn3()+384] 错误 分析

1.OS 和 DB 版本Oracle Version&#xff1a; 11.2.0.2Operation System&#xff1a;HP-UXItanium 11.312.Alert log中信息Tue Oct 16 22:27:31 2012Exception [type: SIGSEGV,Address not mapped to object] [ADDR:0xC00000000] [PC:0x400000000631B880,evaopn3()384] [flags: …

http网站转换成https网站

https&#xff0c;https的本地测试环境搭建,asp.net结合https的代码实现,http网站转换成https网站之后遇到的问题 一&#xff1a;什么是https SSL&#xff08;Security Socket Layer&#xff09;全称是加密套接字协议层&#xff0c;它位于HTTP协议层和TCP协议层之间&#x…

EAGER的获取是代码的味道

介绍 休眠获取策略确实可以使几乎没有爬网的应用程序和响应速度很快的应用程序有所不同。 在这篇文章中&#xff0c;我将解释为什么您应该选择基于查询的获取而不是全局获取计划。 取得101 Hibernate定义了四种关联检索策略 &#xff1a; 提取策略 描述 加入 原始SELECT语…

基于S2SH的电子商务网站系统性能优化

对于经常逛网页的人来说最受不了的事情就是访问的网页加载太慢&#xff0c;除去网络的原因网站的系统性能对加载的快慢非常重要&#xff0c; 网上有个统计&#xff1a; 每慢500ms Google访问量降低20% 每慢400ms Yahoo 访问量降低5-9% 每慢100ms Amazon销售额降低1% 对于商务网…