（1）选择器权重
important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
- important的权重为1,0,0,0
- ID的权重为0,1,0,0
- 类的权重为0,0,1,0
- 标签的权重为0,0,1,0
- 伪类的权重为0,0,1,0
- 属性的权重为0,0,1,0
- 伪对象的权重为0,0,0,1
- 通配符的权重为0,0,0,0
内容引用自此链接
以text-、font-、line- 开头的属性子元素都是可以继承父元素的
margin百分比值相对于父元素宽度计算
（2）移动端viewport
- width=device-width
（3）BFC（块级格式化上下文）
定义:生成条件
- position为absolute或者fixed
- overflow不为visible
- float不为none
- display为inline-block, table-cell
- 根元素，HTML
元素BFC后会成为页面上的一个独立容器，容器内部与外元素不会相互影响
BFC的作用
- 消除子元素浮动带来的父元素高度塌陷的问题
（4）IE常见兼容性问题
- 在IE10-浏览器下被<a>标签包含的<img>元素会产生边框
（5）常见块级元素与行内元素及其特点
块级元素可以设置宽高，独占一行，默认情况下与父元素等宽
- div ol ul table h1~h6 hr p form
行内元素不能设置宽高，可以在一行显示，竖直方向上margin,padding不起作用
- span a strong em textarea
input 与 img 属于 inline-block
<a>标签不会继承父元素的color,解决方法可以color:inherit
（6）border:0与border:none的区别
1. 细微的性能差异
- border:none 浏览器解析时不会渲染，不耗内存
- border:0 border设为“0”像素效果等于border-width:0，浏览器依然对border-width、border-color进行了渲染
2. 兼容性差异
IE6、IE7中，border为“none”时，标签button、input边框依然存在，border:0则不会出现边框
（7）:active伪类辨析
<style>
a:link{color: yellow;}
a:visited{color:pink;}
a:hover{color: green}
a:active{color: red;}
</style>
</head>
<body>
<a href="http://www.baidu.com">四种伪类的表现</a>
<p>:active 定义连接被点击时的样式</p>
<p>:link 定义连接未被访问时的样式</p>
<p>:visited 定义被访问过的链接样式</p>
<p>:hover 定义鼠标悬停链接时的样式</p>
<p>从文件打开进行链接跳转网站，需要加上协议！！！</p>
<p>:active需要放在:hover后定义</p>
<p>对所有元素IE8以及新版本浏览器均支持:active选择器。:active选择器对于IE7只支持链接</p>
image.png
（8）margin重叠
解决办法,使元素BFC化
#container{
background-color: #eee;
/*1. overflow: hidden;
2. display: inline-block;
3. position: absolute;*/
float: left;
width: 100%;
/*4. float,absolute后的内联元素成为块元素*/
}
#son{
background-color: green;
height: 100px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="son"></div>
</div>
（9）js获取div盒子宽高的方法分析
- window.getComputedStyle(dom).width
- dom.getBoundingClientRect().width
- dom.style.width
dom.style.width 可以进行样式的修改，但是只能获取内嵌在html中的样式信息
<style>
#box{
width: 300px;
height: 200px;
background-color: red;
margin:100px auto;
}
</style>
<link rel="stylesheet" href="./outbox.css">
</head>
<body>
<div id="box" style="width:400px"></div>
<div id="boxout"></div>
<script>
let box = document.getElementById('box');
console.log(window.getComputedStyle(box).height);
console.log(box.getBoundingClientRect().height);
let boxout = document.querySelector("#boxout");
console.log(box.style.width); 400px
</script>
（9）元素嵌套
- 块级元素可以嵌套内联元素
- 内联元素一般不可以嵌套块级元素
（10）如何设置文本的超出省略
image.png
image.png
网友评论