1、盒子模型和box-sizing
盒子模型是由margin外边距、padding内边距、border边框、content组成的。它包括两种类型:
W3C盒子模型和IE盒子模型。二者是由box-sizing这个属性来区分的。
border-box:这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
content-box:为元素设定的宽度和高度决定了元素的边框盒。就是说为元素指定的任何内边距和边框
都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到
内容的宽度和高度。
2、垂直居中方法
(1)Flex
(2)position+transform,inner宽高未知
(3)position+负margin,inner宽高已知
(4)设置各个方向的距离都是0,再将margin设为auto(前提是inner宽高已知)
3、CSS权重计算方式
CSS基本选择器包含ID选择器、类选择器、标签选择器、通配符选择器。
!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器
各选择器权值:
(1)内联样式,权值为1000
(2)ID选择器,权值为0100
(3)类,伪类和属性选择器,权值为0010
(4)标签选择器和伪元素选择器,权值为0001
(5)通配符、子选择器、相邻选择器等,权值为0000
(6)继承的样式没有权值
4、BFC
BFC全称为Block formatting context,直译为"块级格式化上下文"。它是一个独立的渲染区域,
只有 Block-level box 参与, 它规定了内部的 Block-level Box 如何布局,并且与这个
区域外部毫不相干。
布局规则:
(1)内部的 Box 会在垂直方向,一个接一个地放置。
(2)Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会
发生重叠。
(3)每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往右
的格式化,否则相反)。即使存在浮动也是如此。
(4)BFC 的区域不会与 float box 重叠。
(5)BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
(6)计算 BFC 的高度时,浮动元素也参与计算。
以下方式都会创建BFC:
(1)根元素(html)
(2)浮动元素(元素的 float 不是 none)
(3)绝对定位元素(元素的 position 为 absolute 或 fixed)
(4)行内块元素(元素的 display 为 inline-block)
(5)表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
(6)表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
(7)匿名表格单元格元素(元素的 display为 table、table-row、table-row-group、table-header-group、
table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
(8)overflow 值不为 visible 的块元素
(9)display 值为 flow-root 的元素
(10)contain 值为 layout、content或 paint 的元素
(11)弹性元素(display为 flex 或 inline-flex元素的直接子元素)
(12)网格元素(display为 grid 或 inline-grid 元素的直接子元素)
(13)多列容器(元素的column-count或column-width不为 auto,包括 column-count 为 1)
(14)column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中
(标准变更,Chrome bug)。
5、清除浮动
清除浮动主要是为了防止父元素塌陷,清除浮动常用的方法是clearfix伪类
(1)父级 div 定义 height
原理:父级 div 手动定义 height,就解决了父级 div 无法自动获取到高度的问题。 简单、代码少、
容易掌握 ,但只适合高度固定的布局.
(2)结尾处加空 div 标签 clear:both
原理:在浮动元素的后面添加一个空 div 兄弟元素,利用 css 提高的 clear:both 清除浮
动,让父级 div 能自动获取到高度 ,如果页面浮动布局多,就要增加很多空 div,让人感
觉很不好 ,不推荐使用
(3)父级 div 定义 overflow:hidden,但是超出盒子部分会被隐藏,不推荐使用
(4)使用after伪元素清除浮动,符合闭合浮动思想,结构语义化正确,但是ie6-7不支持伪元素:after,
使用zoom:1触发hasLayout
(5)使用before和after双伪元素清除浮动,代码更简洁,但是用zoom:1触发hasLayout
6、position属性
(1)absolute 绝对定位,相对于 static 定位以外的第一个父元素进行定位。
(2)relative 相对定位,相对于其自身正常位置进行定位。
(3)fixed 固定定位,相对于浏览器窗口进行定位。
(4)static 默认值。没有定位,元素出现在正常的流中。
(5)inherit 规定应该从父元素继承 position 属性的值。
7、display:none、visibility:hidden、opacity:0的区别
(1)结构:display:none隐藏后不占据额外空间
visibility:hidden元素被隐藏,但是不会消失,依然占据空间
opacity:0透明度为100%,无法隐藏,,依然占据空间
(2)继承:display:none不会被子元素继承
Visibil ity:hidden会被子元素继承,子元素设置visibility:visible可以将子元素显示出来
opacity:0也会被子元素继承,但是不能通过opacity:0使其重新显示
(3)重绘回流:display:none会产生重绘回流
visibility:hidden只产生重绘
opacity:0不产生回流,不一定产生重塑
(4)js事件:display:none无法占用空间元素,因此无法点击事件
visibility:hidden元素绑定的js无效,不可以接受js效果
opacity:0元素不可显示,但其事件有效
8、display常用的值及其含义
(1)none:元素不显示,也不会占用空间
(2)inline:display的默认属性。将元素显示为内联元素,元素前后没有换行符
(3)block:将元素显示为块级元素,元素前后带有换行符
(4)inline-block:行内块元素,既是内联元素,又可以设置width和height
(5)inherit:规定应该从父元素继承display属性的值
9、px,em,rem的区别
(1)概念
px:绝对单位,页面按精确像素展示。
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体
是16px),整个页面内1em不是一个固定的值。
rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,
chrome/firefox/IE9+支持。
(2)特点
PX特点:
. IE无法调整那些使用px作为单位的字体大小;
. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。
EM特点 :
. em的值并不是固定的;
. em会继承父级元素的字体大小。
rem特点:
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。区别在于使用rem
为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整
所有字体大小,又可以避免字体大小逐层复合的连锁反应。
目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,
就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小