html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)
层叠样式表(Cascading Style Sheets)
盒模型
盒模型包含四部分:margin、border、padding、content。如果不使用doctype声明,浏览器默认使用自己的模式解析。如IE使用IE盒模型,firefo则使用标准盒子模型等。
标准盒子模型
IE盒子模型的区别是,content区域包含border和padding
选择器
选择器分类:
元素选择器
通配符选择器 *
类选择器
属性选择器
[attribute] 匹配带指定属性的元素
[attribute=value] 匹配带指定属性和值的元素
[attribute^=value] 匹配属性值以指定值开头的每个元素,如:h1[class^=bar] 匹配class以bar开头的h1元素
[attribute$=value] 匹配属性值以指定值结尾的每个元素
[attribute*=value] 匹配属性值中包含指定值的每个元素
[attribute~=value] 匹配属性值中包含指定值的元素, 必须匹配整个的单词
[attribute|=value] 匹配属性值以指定值开头的元素,必须匹配整个单词,或者是-前的整个单词
后代选择器
匹配后代元素 如:h1 span,匹配h1后的所有span标签
匹配子元素 如: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等
伪元素选择器(必须放在出现该伪元素的选择器的后面)
:first-letter 块级元素的首字母样式
:first-line 首行样式
:after 元素之后
:before 元素之前
伪类与伪元素区分
伪类:用于向某些选择器添加特殊的效果,如::link :active,(在原有的元素上添加类别)伪类的效果可以通过添加一个实际的类来达到
伪元素:用于将特殊的效果添加到某些选择器,如::after :before,(添加新元素后加以标识)伪元素的效果需要通过添加一个实际的元素才能达到
权重与优先级
权重等级
內联样式 1000
ID选择器 0100
类选择器、属性选择器、伪类选择器 0010
元素选择器、伪元素选择器 0001
通配符选择器 0000
优先级计算
!important > 內联样式 > 高权重 > 低权重
!important > id > class > tag
同权重:內联样式 > 嵌入样式表 > 外部样式表
继承 inherit
继承均是沿着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标签
.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;
}
复制代码
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) 如line-height:1.5,假设文字大小20像素,实际行高为 20*1.5
3) 如line-height:15px;line-height:1.5em [px/pt/em/rem]
4)如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
复制代码
html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)相关推荐
- 20、CSS基础——盒模型的应用
盒模型应用 文章目录 盒模型应用 1. 改变宽高范围(box-sizing) 2. 改变背景覆盖范围(background-clip) 3. 溢出处理(overflow) 4. 断词规则(word-b ...
- html网页改兼容模型,浏览器兼容、CSS hack、normalize.css及盒模型基础知识问答
一.问题(一).如何调试 IE 浏览器 1.对于IE7及以下版本可采用IETester(不能测脚本,模拟出来的IE6平台与真实的IE6还是有差异的,结果不完全可靠).Expression Web Su ...
- 面试总结(CSS 的盒模型?、CSS 中选择器的优先级以及 CSS 权重如何计算?、CSS 中哪些属性可继承,哪些不可以?、CSS 单位中 px、em 和 rem 的区别?、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际 内容这几个部分 第一种是 W3C 标准的盒子 ...
- 详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范 一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
- 利用Div CSS(嵌套 盒模型)布局页面完整实例流程
Div CSS(嵌套 盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
- CSS标准盒模型和怪异盒模型区别
盒模型都是由四个部分组成的,分别是margin.border.padding 和 content.即外边距,边框,内边距,内容. 一:标准盒模型 1. box-sizing: content-box ...
- CSS——弹性盒模型(Flex)
CSS--弹性盒模型 前言 本文大部分参考自阮一峰老师和B站后盾人的Flex布局教程. 原文地址:
- CSS基础(复合选择器-三大特性)
CSS基础(复合选择器-三大特性) Emmet语法 快速生成HTML 如果想快速生成多个标签,直接*n. div*3
最新文章
- 财务大数据比赛有python吗-Python 适合大数据量的处理吗?
- SpringBoot+layUI上传图片功能
- c# datatable.select() 支持group by
- Allocation Aizu - ALDS1_4_D
- 【渝粤教育】国家开放大学2018年春季 8126-21T制药工程 参考试题
- Eclipse中JAVA项目的打包
- Python编程中报过的错
- Vue todos代办事项功能
- PS图片压缩教程,教你快速压缩jpg图片文件的大小而又不失真!
- 2020晓庄学院专转本C语言考试试卷,南京晓庄学院五年一贯制专转本模拟考试c语言...
- excel 计算复合增长率
- 在 Linux 平台及 IPv4 环境中构建 IPv6 测试环境
- Android跑指定包Monkey脚本
- 金融计算器,python实现
- 华为od统一考试B卷【We Are A Team】C++ 实现
- iOS 作为蓝牙外设广播信息
- 远程计算机或设备将不受连接(能联网QQ能上,但浏览器无法上网)
- 亲身经历体会乐歌和爱格升显示器支架,到底谁更胜一筹?
- gifcam使用缩小内存_GifCam使用方法
- ios 通讯录 通过电话号码 查询姓名