- 标准盒模型中 width 指的是内容区域 content 的宽度
- height 指的是内容区域 content 的高度
- 标准盒模型下盒子的大小 = content + border + padding + margin
IE 标准的盒子模型(怪异盒模型) box-sizing: border-box;
- 怪异盒模型中的
- width 指的是内容、边框、内边距总的宽度(content + border + padding);
- height 指的是内容、边框、内边距总的高度
- 怪异盒模型下盒子的大小=width(content + border + padding) + margin
我们还可以通过属性 box-sizing 来设置盒子模型的解析模式可以为 box-sizing 赋两个值:
- content-box:默认值,border 和 padding 不算到 width 范围内,可以理解为是 W3c 的标准模型(default)。总宽=width+padding+border+margin
-
border-box:IE盒模型border 和 padding 划归到 width 范围内,可以理解为是 IE 的怪异盒 模型,总宽=width+margin
CSS 中选择器的优先级以及 CSS 权重如何计算?
!Important>行内样式>ID 选择器>类选择器>标签>通配符>继承>浏览器默认属性
权重
CSS 权重是由四个数值决定,看一张图比较好解释:
图里是英文的,翻译过来分别介绍一下,4 个等级的定义如下:
- 第一等:内联样式,如:style="color:red;",权值为 1000.(该方法会造成 css 难以管理, 所以不推荐使用)
- 第二等:ID 选择器,如:#header,权值为 0100
- 第三等:类、伪类、属性选择器如:.bar, 权值为 0010
- 第四等:标签、伪元素选择器,如:div ::first-line 权值为 0001
- 最后把这些值加起来,再就是当前元素的权重了
其他:
- 无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样
- 式。(ie6 支持上有些 bug)
- 通配符,子选择器,相邻选择器等。如*,>,+, 权值为 0000.
- 继承的样式没有权值
CSS 权重计算方式
- 计算选择符中的 ID 选择器的数量(=a)
- 计算选择符中类、属性和伪类选择器的数量(=b)
- 计算选择符中标签和伪元素选择器的数量(=c)
- 忽略全局选择器
在分别计算 a、b、c 的值后,按顺序连接 abc 三个数字组成一个新的数字,改值即为所计算的
选择符的权重。如果两个选择符的计算权重值相同,则采取“就近原则”。
栗子
div#app.child[name="appName"] /a=1,b=2,c=1 —>权重 = 1 + 100 + 10 +10 = 121/
- button :定义可点击的按钮(大多与 JavaScript 使用来启动脚本)
- checkbox :定义复选框。
- color :定义拾色器。
- date :定义日期字段(带有 calendar 控件)
- month :定义日期字段的月(带有 calendar 控件)
- time :定义日期字段的时、分、秒(带有 time 控件)
- email :定义用于 e-mail 地址的文本字段
- file :定义输入字段和 "浏览..." 按钮,供文件上传
- hidden :定义隐藏输入字段
- image :定义图像作为提交按钮
- number :定义带有 spinner 控件的数字字段
- password :定义密码字段。字段中的字符会被遮蔽。
- radio :定义单选按钮。
- search :定义用于搜索的文本字段。
- submit :定义提交按钮。提交按钮向服务器发送数据。
- text :默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个 字符。
- url :定义用于 URL 的文本字段。
CSS 中哪些属性可继承,哪些不可以?
能继承的属性
1. 字体系列属性:font、font-family、font-weight、font-size、font-style;
2. 文本系列属性:
内联元素:color、line-height、word-spacing、letter-spacing, text-transform;
块级元素:text-indent、text-align;
3. 元素可见性:visibility
4. 表格布局属性:caption-side、border-collapse、border-spacing、empty-cells,table-layout;
5. 列表布局属性:list-style
不能继承的属性
1. display:规定元素应该生成的框的类型;
2. 文本属性:vertical-align、text-decoration;
3. 盒子模型的属性:width、height、margin 、border、padding;
4. 背景属性:background、background-color、background-image;
5. 定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip;
CSS 单位中 px、em 和 rem 的区别?
- 1、px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的,是一 个虚拟长度单位,是计算机系统的数字化图像长度单位
- 2、em 是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字 体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大 小,因此并不是一个固定的值
- 3、rem 是 CSS3 新增的一个相对单位(root em,根em),使用 rem 为元素设定字 体大小时,仍然是相对大小,但相对的只是 HTML 根元素
区别:
IE 无法调整那些使用 px 作为单位的字体大小,而 em 和 rem 可以缩放,rem,相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通 过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐 层复合的连锁反应。目前,除了 IE8 及更早版本外,所有浏览器均已支持 rem
rem 适配方法如何计算 HTML 跟字号及适配方案?
通用方案
- 1、设置根 font-size:625%(或其它自定的值,但换算规则 1rem 不能小于 12px)
- 2、通过媒体查询分别设置每个屏幕的根 font-size
- 3、CSS 直接除以 2 再除以 100 即可换算为 rem
优:有一定适用性,换算也较为简单
劣:有兼容性的坑,对不同手机适配不是非常精准;需要设置多个媒体查询来适应不同手机,单某款手机尺寸不在设置范围之内,会导致无法
网易方案
1、拿到设计稿除以 100,得到宽度 rem 值
2、通过给 html 的 style 设置 font-size,把 1 里面得到的宽度 rem 值代入 x document.documentElement.style.fontSize = document.documentElement.clientWidth / x + ‘px‘;
3、设计稿 px/100 即可换算为 rem
优:通过动态根 font-size 来做适配,基本无兼容性问题,适配较为精准,换算简便
劣:无 viewport 缩放,且针对 iPhone 的 Retina 屏没有做适配,导致对一些手机的适 配不是很到位
手淘方案
- 1. 拿到设计稿除以 10,得到 font-size 基准值
- 2、引入 flexible
- 3、不要设置 meta 的 viewport 缩放值
- 4、设计稿 px/ font-size 基准值,即可换算为 rem
优:通过动态根 font-size、viewpor、dpr 来做适配,无兼容性问题,适配精准。
劣:需要根据设计稿进行基准值换算,在不使用 sublime text 编辑器插件开发时,单位计算复杂
Display:none 与 visibility:hidden 的区别?
最常用的为 display:none 和 visibility:hidden
dispaly:none 设置该属性后,该元素下的元素都会隐藏,占据的空间消失
visibility:hidden 设置该元素后,元素虽然不可见了,但是依然占据空间的位置
区别
- 1.visibility 具有继承性,其子元素也会继承此属性,若设置 visibility:visible,则子元素会显示
- 2.visibility 不会影响计数器的计算,虽然隐藏掉了,但是计数器依然继续运行着。
- 3.在 CSS3 的 transition 中支持 visibility 属性,但是不支持 display,因为 transition 可以延迟执行,因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用 户 体验
- 4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘
Position 的值有哪些,分别有哪些作用?
static:默认值 不脱离文档流,top,right,bottom,left 等属性不生效
绝对定位:absolute 绝对定位的关键是找对参照物,要成为绝对定位元素的参照物必须满足以下两个条件:
- 1.参照物和绝对定位元素必须是包含与被包含关系;
- 2.该参照物必须具有定位属性;
- 如果找不到满足以上两个条件的父包含块,那么相对于浏览器窗口进行定位
注意:设置了 position:absolute;属性后,元素会脱离正常文档流,不在占据空间;左右 margin为 auto 将会失效;我们通过 left、top、bottom、right 来决定元素位置
相对定位:relative 参照物:元素偏移前位置
注意:设置了相对定位,左右 margin 为 auto 仍然有效、并且不会脱离文档流。
固定定位:fixed 参照物:浏览器窗口;
注意:固定定位会脱离文档流; 当绝对定位和固定定位参照物都是浏览器窗口时的区别: 当出现滚动条时,固定定位的元 素不会跟随滚动条滚动,绝对定位会跟随滚动条滚动
为什么会出现浮动?浮动元素会引起什么问题?如何清除浮动?
浮动定位将元素排除在普通流之外,即元素讲脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留
为什么需要清除浮动
1、父元素的高度无法被撑开,影响与父元素同级的元素;
2、与浮动元素同级的非浮动元素(内联元素)会跟随其后;
3、若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构解决方法
清除浮动的方式
1、使用 CSS 中的 clear:both;(放一个空的 div,并设置上述 css),属性来清除元素的浮动
可解决 2、3 问题
2、对于问题 1,添加如下样式,给父元素添加 clearfix 样 式:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.cl earfix {
display: inline-block;
}
/* for IE/Mac */
3、给父级元素设置双伪元素;
.clearfix:after {
content: "";
/*设置内容为空*/
height: 0;
/*高度为 0*/
line-height: 0;
/*行高为 0*/
display: block;
/*将文本转为块级元素*/
visibility: hidden;
/*将元素隐藏*/
clear: both;
/*清除浮动*/
}
.clearfix {
zoom: 1;
/*为了兼容 IE*/
}
<div class="container clearfix">
<div class="wrap">aaa</div>
</div>
4、给父级元素设置 overflow:hidden;或 overflow:auto;本质是构建一个 BFC
简述弹性盒子 flex 布局及 rem 布局?
rem 是 CSS3 新增的一个相对单位,相对于根节点(html)字体大小的值,r 就是 root html{font-size:10px} 则 2rem=20px
通过它就可以做到只修改根元素的大小,就能成比例地调整所有的字体大小,只依赖 html 字体的大小
适配方案步骤:
1、首先动态计算 html 的 font-size
2、将所有的 px 换算成 rem(计算过程请看下面代码和注释)
注意:rem 的换算是根 据设计图稿的像素计算的,下面的计算只是动态计算 html 的 font-size 大小, 请看下面的注意事项
<meta name="viewport" content="width=device-width,user-scalable=no" />
<style>
body {
margin: 0;
}
div {
/*width: 80px;*/
height: 100px;
width: 4rem;
height: 4rem;
/*1rem=20; nrem=80; n=80/rem; n=80/20; n=4*/
background: green;
float: left;
}
</style>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
<script>
(function () {
var html = document.documentElement;
var width = html.getBoundingClientRect().width;//获取屏幕宽度(设备独立像素), 如 iPhone6 为 414
html.style.fontSize = width / 16 + 'px'; //html font-size = 20px
//iphone5 下 1rem=20 这里之所以除以 16,是因为要把宽度分成 16 份,这个数并 没有固定,一般选 15,16,以 ipone5 为准是 16,因为一除可以得到整数 20,好计算。
})();
</script>
注意:
1、必需动态的去设置 html 的大小,才能适配
2、根据页面的宽度除以一个系数,把算出的这个值赋给 html 的 font-size 属性,rem 换 算值是根据 psd 设计图的宽度/系数的 rem 系数 以 640px 设计稿和 750px 的视觉稿,
网易这样处理的:
var width = document.documentElement.clientWidth; // 屏幕的布局视口宽度
var rem = width / 7.5; // 750px 设计稿将布局视口分为 7.5 份
var rem = width / 6.4; // 640px 设计稿将布局视口分为 6.4 份
这样不管是 750px 设计稿还是 640px 设计稿,1rem 等于设计稿上的 100px。故 px 转换 rem 时:1rem = 1px * 0.01;
在 750px 设计稿上
设计稿上 75px 对应 0.75rem, 距离占设计稿的 10%;
在 ipone6 上:
width = document.documentElement.clientWidth = 375px;
1rem = 375px / 7.5 = 50px;
0.75rem = 37.5px;
(37.5/375=10%;占屏幕 10%)
在 ipone5 上:
width = document.documentElement.clientWidth = 320px;
rem = 320px / 7.5 = 42.667px;
0.75rem = 32px; (32/320=10%;占屏幕 10%)
故对于设计稿上任何一个尺寸换成 rem 后,在任何屏下对应的尺寸占屏幕宽度的百分比相 同。故这种布局可以百分比还原设计图
为什么要除一个数字,
- 原因是:一个页面里,不可能全都是整屏的元素,肯定有一行中放多个元素。所以就把一行分成 n 份 不除一个数字的话,那 1 个 rem 就是屏幕的宽度,这个值太大,如果一个元素 的宽度比它小的话,就不方便计算 这个系数,自己定。多少都可以,但是建议给一个能整除的值(这个能整除的数,是还要根据设计稿能整除的数。)
- 对于切的图片,尺寸是根据设计图的尺寸宽度的,显示起来会很大,如果是 Img 标签, 可以设置宽度为切出的图片尺寸,换算成 rem,如果是 background-img,用 background-size 属性,设置设计图尺寸宽高,换算成 rem 进行图片的缩放适配。
对于上述的第二点,根据设计稿动态转换 rem,这里说一下,前面的计算是动态的设置 html
的 font-size 的大小,这是根据设备的独立像素计算的。而设计稿往往是根据物理像素,即设备素设计的,往往很大,是 750px 及以上,所以在转换 rem 的时候,转换是根据 psd 设计稿的像素进行转换,即 1rem = 设计稿像素宽度/系数,例如,如果是 1080px 的设计 稿,那么,就用 1rem = 1080/18 = 60px(这里用 18 做系数,是因为能整除),然后布局的时候就根据设计稿的元素尺寸转换,例如设计稿一个元素的高为 60px,那么就可以转 化为 1rem 了
特点:
- 1、所有有单位的属性会根据屏幕的尺寸自动计算大小
- 2、同样一个元素,在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小,在尺寸大的设备下显示的大
- 3、一般以 iphone6 为基准,以它的宽度 750 除上一个系数,再去算 rem
Tips:上述步骤 2 中换算可以通过 Hbuilder 将 px 自动转 rem 以及通过 less 自动计算成 rem,sublime 也可以通过插件进行自动转换
打开 Hbuilder,顶部栏的工具》选项》Hbuilder》代码助手》px 自动转 rem 设置
3.less 自动转换:Hbuilder 也可以将 less 文件自动转成 css 文件。less 文件的书 写如下所示
比如想设置宽度为 187px,高度为 100px 的元素,可以通过下面方式计算适配
@rem:25rem; /*这是 1rem = X px 的 X 的值,但是用了 rem 做单位而已*/
div{
width: 187/@rem;
height: 100/@rem;
}
弹性布局适配(会配合 rem 适配使用 )
兼容情况
IE10 及以上、ios9 及以上、android4.4 及以上版本支持
特点
1、默认所有子元素都会在一行中显示,即使给子元素一个很大的宽度
2、父级加了这条属性,子级的 float、vertical-align 就会失效
3、如果兼容低版本的机型要加前缀-webkit-,包括后面讲的所有属性,容器属性(父元素样式) 这里说一下一些重点知识
-
flex-direction:子元素排列方向(主轴的方向如果设置了 column则意味着 主轴旋转了 90 度)
- flex-wrap:换行方式
- flex-flow:以上两种方式的简写
- justify-content:水平对齐方式(子元素在主轴上的对齐方式)
- align-items:垂直对齐方式(子元素在交叉轴上的对齐方式)
- align-content:多行垂直对齐方式(多根轴线的对齐方式)
项目属性(子元素样式)
1、order:排列位置 //如果有两个的值是相等,按书写顺序排列
2、flex-grow:扩展比例
flex-grow 当父级的宽度大于所有子元素宽度之和时,根据父级的剩余空间,设置子元素 的扩展比例(设置后,元素给的固定宽度会被覆盖)它是一个系数默认为 0,即如果存在剩 余空间也不扩展
剩余空间:剩余空间=父级的宽度-所有子元素的宽度和
注意:如果没有设置初始宽度,也没有内容,则默认为 0,否则为内容的宽度。例如设置了 文字,会撑开有初始宽度
子元素宽度计算公式
子元素的宽度=(父级的宽度-所有子元素的宽度和)/所有子元素的 flex-grow 属性值之和*子
元素的 flex-grow 属性值+子元素初始宽度
3、flex-shrink:收缩比例
flex-shrink 当所有子元素宽度之和大于父级宽度的时候,根据超出的空间,设置子元素的 收缩比例设置后,元素给的固定宽度会被覆盖)它是一个系数默认为 1,如果给个 0 的话, 就不会收缩 超出空间:超出空间=所有子元素的宽度和-父级的宽度
子元素宽度计算公式
- 1、算出超出空间,所有子元素的宽度和-父级的宽度
- 2、子元素的初始宽度*子元素的 flex-shrink 值
- 3、算出第二步所有结果的和
- 4、每个子元素的第二步/第三步*第一步
- 5、子元素的初始宽度-第四步