css篇-简化版
【CSS篇】简化版
(1) CSS盒模型
CSS盒模型
题目:谈谈你对CSS盒模型的认识
1) 基本概念:标准模型+IE模型
2) 标准模型和IE模型的区别
计算宽度和高度的不同
3) CSS如何设置这两种模型
4) JS如何设置获取盒模型对应的宽和高?
JS怎么写才能拿到盒模型对应的宽和高呢?
5) 实例题(根据盒模型解释边距重叠)
6) BFC(边距重叠解决方案) 或者IFC
详细解读:
1) 基本概念:标准模型+IE模型
2) 标准模型和IE模型的区别
标准模型的宽度指的就是content的宽度,不包含padding 和 border。
IE模型的宽高是计算padding和border的。如果设置宽度为200px,那么对于IE模型来说,它的200px是包含padding和border。
3) CSS如何设置这两种模型?
box-sizing: content-box;
4) JS如何设置获取盒模型对应的宽和高?
dom.style.width/height
dom.currentStyle.width/height(这个属性只有IE支持)
window.getComputedStyle(dom).width/height(这个属性所有浏览器都支持)
dom.getBoundingClientRect().width/height(计算绝对位置)
5) 实例题(根据盒模型解释边距重叠)
6) BFC(边距重叠解决方案) 或者IFC
6-1)BFC的基本概念
块级格式化上下文
6-2)BFC的原理
在BFC的垂直方向的边距会发生重叠
BFC的区域不会与清除浮动的区域发生重叠
计算BFC的高度的时候,浮动元素也会参与计算。
BFC不与float重叠
BFC子元素即使是float也会参与高度计算
6-3)如何创建BFC
overflow: hidden;
float的值不为none
position的值不是 static
display的是table
6-4)BFC的使用场景
* 什么是 BFC
BFC(Block Formatting Context)格式化上下文,是 Web 页面中盒模型布局的 CSS 渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。
* 形成 BFC 的条件
* 浮动元素,float 除 none 以外的值
* 定位元素,position(absolute,fixed)
* display 为以下其中之一的值 inline-block,table-cell,table-caption
* overflow 除了 visible 以外的值(hidden,auto,scroll)
* BFC 的特性
* 内部的 Box 会在垂直方向上一个接一个的放置。
* 垂直方向上的距离由 margin 决定
* bfc 的区域不会与 float 的元素区域重叠。
* 计算 bfc 的高度时,浮动元素也参与计算
* bfc 就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
优先(优先级为): !important > 内联样式 > #id > .class > tag > * > 继承 > 默认 。
当选择器的权重相同时,它将应用于就近原则。
权重的计算方式:
-----------------------------------------------------
来源: MDN web docs
不同种类的CSS选择器:
选择器可以被分为以下类别:
- 简单选择器 (Simple selectors):通过元素类型、class 或 id 匹配一个或多个元素。
- 属性选择器 (Attribute selectors) : 通过 属性 / 属性值 匹配一个或多个元素。
- 伪类 (Pseudo-classes) :匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,
或元素是DOM树中一父节点的第一个子节点。
- 伪元素(Pseudo-elements) : 匹配处于相关的确定位置的一个或多个元素,例如每个段落的第一个字,或者某个元素之前生成的内容。
- 组合器(Combinators) :这里不仅仅是选择器本身,还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。
例如,你可以只选择divs的直系子节点的段落,或者直接跟在headings后面的段落。
- 多重选择器(Multiple selectors) :这些也不是单独的选择器; 这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面,
以将一组声明应用于由这些选择器选择的所有元素。
-----------------------------------------------------
属性选择器:
(1) 存在和值 (Presence and value)属性选择器
这些属性选择器尝试匹配精确的属性值:
- [attr] : 该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
- [attr=val] : 该选择器仅选择 attr 属性被赋值为 val 的所有元素。
- [attr~=val] : 该选择器仅选择具有 attr 属性的元素, 而且要求 val 值 是 attr 值包含的被空格分隔的取值列表里中的一个。
让我们看一个特别的例子,下面是它的HTML代码:
我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
<ul>
<li data-quantity="1kg" data-vegetable>Tomatoes</li>
<li data-quantity="3" data-vegetable>Onions</li>
<li data-quantity="3" data-vegetable>Garlic</li>
<li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
<li data-quantity="2kg" data-meat>Chicken</li>
<li data-quantity="optional 150g" data-meat>Bacon bits</li>
<li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
<li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>
和一个简单的样式表:
/* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */
[data-vegetable] {
color: green;
}
/* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */
[data-vegetable = "liquid"] {
background-color: goldenrod;
}
/* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素,
即使元素的属性中还包含其他属性值, 都会被应用红色的文本颜色 */
[data-vegetable~="spicy"] {
color: red;
}
结果如下:
(2) 子串值 (Substring value) 属性选择器
这种情况的属性选择器也被称为"伪正则选择器",因为它们提供类似 regular expression 的灵活匹配方式(但请注意,这些选择器并不是真正的正则表达式):
- [attr |= val] :选择 attr 属性的值是 val 或值以 val- 开头的元素(注意,这里的 "-" 不是一个错误,这是用来处理语言编码的)。
- [attr ^= val] : 选择 attr 属性的值以 val 开头(包括 val)的元素。
- [attr $= val] : 选择 attr 属性的值以 val 结尾 (包括 val) 的元素。
- [attr *= val] : 选择 attr 属性的值中包含子字符串 val 的元素(一个子字符串就是一个字符串的一部分而已,例如, "cat" 是字符串 "caterpillar" 的子字符串)。
让我们继续我们前面的例子,并添加以下CSS规则:
/* 语言选择的经典用法 */
[lang |= "fr"] {
font-weight: bold;
}
/* 具有"data-vegetable"属性含有值"not spicy"的所有元素,都变回绿色*/
[data-vegetable*="not spicy"] {
color: green;
}
/* 具有"data-quantity"属性其值以"kg"结尾的所有元素 */
[data-quantity$="kg"] {
font-weight: bold;
}
/* 具有属性"data-quantity"其值以"optional"开头的所有元素 */
[data-quantity^="optional"] {
opacity: 0.5;
}
-----------------------------------------------------
伪类(Pseudo-class)
一个CSS伪类(Pseudo-class)是一个以冒号 (:)作为前缀,被添加到一个选择器末尾的关键字,当你希望样式在特定状态下才被呈现到指定的元素时,
你可以往元素的选择器后面加上对应的伪类(pseudo-class)。你可能希望某个元素在处于某种状态下呈现另一种样式,例如当鼠标悬停在元素上面时,
或者当一个复选框被禁用或被勾选时,又或者当一个元素是它在DOM树中父元素的第一个子元素时。
:active :indeterminate :only-of-type
:any :in-range :optional
:checked :invalid :out-of-range
:default :lang() :read-only
:dir() :last-child :read-write
:disabled :last-of-type :required
:empty :left :right
:enabled :link :root
:first :not() :scope
:first-child :nth-child() :target
:first-of-type :nth-last-child() :valid
:fullscreen :nth-last-of-type() :visited
:focus :nth-of-type()
:hover :only-child
一个伪类(Pseudo-class)的例子:
<a href="#" target="_blank">百度一下</a>
一些样式:
/* 这些样式将在任何情况下应用于我们的链接 */
a {
color: blue;
font-weight: bold;
}
/* 我们想让被访问过的链接和未被访问的链接看起来一样 */
a:visited {
color: blue;
}
/* 当光标悬停于链接,键盘激活或锁定链接时,我们让链接呈现高亮 */
a:hover, a:active, a:focus {
color: darkred;
text-decoration: none;
}
-----------------------------------------------------
组合器和选择器组
虽然一次使用一个选择器就很有用,但在某些情形中却可能效率低下。 CSS选择器在你开始组合他们进行细粒度选择的时候变得更具使用价值。基于元素之间的相互关联关系,CSS提供了几种方法来对元素进行选择。下表使用连接符展示了这些关联关系(A和B代表前文所述的任意选择器):
css篇-简化版的更多相关文章
- BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...
- 面试题2:BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇
BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内 ...
- BAT及各大互联网公司前端笔试面试题--Html,Css篇
注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5931347.html )作者:wangwen896 整理分享出来希望更多的前端er共同进步吧,不仅适用 ...
- 高质量代码之HTML、CSS篇
HTML篇 使用语义化标签<strong><fieldset><legend><ul>等等,少用<div><span> 判断网页 ...
- BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇
BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 2014/08/03 · Web前端, 开发 · CSS, HTML, 技术面试 分享到: 188 MongoDB集群之分片技术应用 ...
- (转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...
- web前端面试试题总结---css篇
CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...
- CSS篇(上)
紧接着HTML篇的CSS篇开啦,老铁们快来围观... 1.介绍一下标准的CSS盒子模型?低版本IE的盒子模型有什么不同? 1>有两种:IE盒子模型 W3C盒子模型 2>盒模型:内 ...
- 浏览器兼容性汇总--CSS篇
目录 CSS篇 1. cursor:hand VS cursor:pointer 2. innerText在IE中能正常工作,但在FireFox中却不行 3. ...
随机推荐
- Java并发Lock接口
java.util.concurrent.locks.Lock接口用作线程同步机制,类似于同步块.新的锁定机制更灵活,提供比同步块更多的选项. 锁和同步块之间的主要区别如下: 序列的保证 - 同步块不 ...
- cross-env
cross-env跨平台设置环境变量 安装npm install --save-dev cross-env config文件下新建环境对应文件 新建编译命令 修改build/webpack.prod. ...
- for,while,do while语句区别以及常见死循环格式
1.三种循环语句的区别: do...while循环至少执行一次循环体. 而for,while循环必须先判断条件是否成立,然后决定是否执行循环体语句. for循环和while循环的区别: 如果你想在循环 ...
- DNS 放大
DNS放大攻击是伪造一个DNS查询的报文,源地址改成想要攻击的IP.单个查询的包64字节,如果是ANY类型查询(或者DNSSEC记录),那么回复报文一般会大几十倍.当然,如果攻击者自己制造一个很大的T ...
- RemoteDisconnected: Remote end closed connection without response
- css识别空格回车符
新闻发布系统文字需要换行,后台返回数据包含空格.回车符号需要默认显示出来.在父元素加上css样式 :white-space:pre:即可. 例:<div class="white-sp ...
- 关于UITableViewAutomaticDimension的产生的bug
一.下面这句代码要想有作用 在iOS11之前需要适配,两个代理都需要实现 - (CGFloat)tableView:(UITableView *)tableView heightForHeader ...
- 函数体中return下面的代码不执行,但是需要预解析
//函数体中return下面的代码不执行,但是需要预解析 function fn(){ console.log(num);//undefined return function(){ }; var n ...
- CSS中表示颜色的4种方法
#1:直接用颜色名称 #2:十六进制数 #3:RGB整数设置颜色 0-255 #4:RGB百分数设置颜色0%-100%
- 【记录】docker 安装redis
docker拉取镜像 docker pull redis docker 启动redis docker run -dit -p 6379:6379 --name redis redis:latest - ...