内容简介:层叠样式表(Cascading Style Sheets)盒模型包含四部分:margin、border、padding、content。如果不使用doctype声明,浏览器默认使用自己的模式解析。如IE使用IE盒模型,firefo则使用标准盒子模型等。标准盒子模型
层叠样式表(Cascading Style Sheets)
盒模型包含四部分:margin、border、padding、content。如果不使用doctype声明,浏览器默认使用自己的模式解析。如IE使用IE盒模型,firefo则使用标准盒子模型等。
标准盒子模型
IE盒子模型的区别是,content区域包含border和padding
选择器分类:
- 元素选择器
- 通配符选择器 *
- 类选择器
- 属性选择器
h1[class^=bar] -
- 后代选择器
h1 span h1 > span h1 + .bother h1 ~ .bother
- 伪类选择器(针对元素的状态)
- 使用顺序可以是::link、:visited、:focus、:hover、:active,因为如果
:link
和:visited
放在最后,那所有的元素都会是已访问或者未访问的状态,设置好的:focus
:hover
:active
失效,所以:link
和:visited
最好放置在前面。 - 链接伪类
:link
:visited
- 动态伪类
:focus
:hover
:active
- 元素伪类
:first-child
等
- 使用顺序可以是::link、:visited、:focus、:hover、:active,因为如果
- 伪元素选择器(必须放在出现该伪元素的选择器的后面)
- :first-letter 块级元素的首字母样式
- :first-line 首行样式
- :after 元素之后
- :before 元素之前
伪类与伪元素区分
伪类:用于向某些选择器添加特殊的效果,如::link :active,(在原有的元素上添加类别)伪类的效果可以通过添加一个实际的类来达到
伪元素:用于将特殊的效果添加到某些选择器,如::after :before,(添加新元素后加以标识)伪元素的效果需要通过添加一个实际的元素才能达到
权重等级
- 內联样式 1000
- ID选择器 0100
- 类选择器、属性选择器、伪类选择器 0010
- 元素选择器、伪元素选择器 0001
- 通配符选择器 0000
优先级计算
- !important > 內联样式 > 高权重 > 低权重
- !important > id > class > tag
- 同权重:內联样式 > 嵌入样式表 > 外部样式表
继承均是沿着dom树向下继承,只有一个特殊情况,即body的背景内容会向上传播到html。
不可继承的属性(与盒模型、position�相关�的):
- margin,padding等
- border,border-radius、box-shadow等
- float,width,height等
可继承属性(与基本样式设计有关的):
- 字体相关,字体颜色、字体大小等
- 行高
- 背景颜色等
4、居中
普通元素水平居中(已知宽): margin: 0 auto; 绝对定位absolute元素居中: 1、(已知宽高)借助 left/top 和 margin-left/margin-top 2、使用 top:50%, left:50%, transform: translate(-50%, -50%) translate百分比是相对于自身宽度高度 3、flex布局 4、display:table与display:table-cell table-cell:让标签元素以表格单元格的形式呈现,类似于td标签 <div class="toast-container"> <div class="toast-box"> <div class="box"></div> </div> </div> <style> .toast-container { position: fixed; width: 100%; height: 100%; display: table; } .toast-box { display: table-cell; vertical-align: middle; } .box { margin: auto; width: 100px; height: 100px; background: #dd0000; } </style> 复制代码
5、position各个值的定位原点
absolute:绝对定位,相对第一个值不是static的元素定位 relative:相对定位,相对其正常位置定位 fiexd:固定定位,相对浏览器窗口 static:默认值,无定位 inherit:继承父级position值 复制代码
6、display值介绍
block:块类型,可设置宽高,换行展示 inline:行内类型,不可设置宽高,同行展示 inline-block:默认宽度为元素宽度,可设置宽高,同行展示 none:像行内元素类型一样显示 table:块级表格 list-item:像块类型元素一样显示,并添加样式列表标记 inherit:继承父级 复制代码
7、动画的最小时间间隔最好是多少
多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms 复制代码
8、关于line-height
1)normal 默认值,跟随用户浏览器,与元素字体关联 2)<number> 如line-height:1.5,假设文字大小20像素,实际行高为 20*1.5 3)<length> 如line-height:15px;line-height:1.5em [px/pt/em/rem] 4)<percent>如line-height:150,假设文字大小20像素,实际行高为 20*150% 5)继承 inherit[IE8+] 注意: line-height:1.5,子元素可以继承,根据自己的字体大小进行计算; 而line-height:150或者line-height:1.5rem,子元素继承,但是不会根据自身字体大小进行计算。 复制代码
9、元素被设置为float后,display属性的值会自动变成block。
10、:after和:before
之后添加用after;之前用before; 复制代码
11、BFC 块级格式化上下文[block formatting context]
1、BFC是什么 块级格式化上下文 样式上:与普通容器无异; 功能上:可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素 2、触发BFC的条件(以下任意一个即可) 浮动元素,float 除none以外的值; 绝对定位元素,position(absolute,fixed); display为inline-blocks,table-cells,table-captions,table-caption(css3); overflow为hidden,auto,scroll; 3、BFC的特性 1)可包含浮动元素 内部有浮动元素,父容器设置overflow为hidden,auto,scroll即可清除浮动,只有ie7+支持 清除浮动[兼容IE6]: { .clearfix{zoom:1;} .clearfix:after{content: ‘’ ; display:table; clear: both;} } 只是局部可使用.clearfix{_zoom:1;overflow: hidden;} 注意副作用 2)可阻止元素被浮动元素覆盖等 复制代码
12、浮动元素导致高度塌陷的解决方法
父级设置 overflow:hidden/scroll/auto 父级元素为 BFC 父级元素设置height 复制代码
13、外边距合并
即垂直方向上设置margin会合并,如果margin值不一样则选高度大的那一个。 复制代码
14、浏览器兼容性问题
1、各个浏览器的默认设置不同,可选择初始化CSS样式,重现设置; 2、background-position-x/background-position-x在版本稍低的firefox中不支持,可选择使用background-position 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 如何确定需求的优先级?
- RabbitMQ之优先级消息队列
- [译]HTTP/2的优先级
- Thymeleaf 模板布局和属性优先级
- Spring Boot RabbitMQ - 优先级队列
- Python中栈、队列和优先级队列的实现
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
AJAX HACKS中文版
帕里 / 2007-3 / 55.00元
《AJAX HACKS中文版:创建快速响应Web站点的工具和技巧》完全挖掘出了Ajax技术的优点,以手把手的方式教您如何揭开Ajax的神秘面纱。每个hack代表了完成某个特定任务的精巧方法,从而为您节省了大量的时间。 《AJAX HACKS中文版:创建快速响应Web站点的工具和技巧》搜集了80个有关Ajax技术的技巧,覆盖了该技术的所有亮点。你现在就想构建下一代Web应用吗?《AJAX HA......一起来看看 《AJAX HACKS中文版》 这本书的介绍吧!