一.em,rem.vm,vw的计算方式
em:它是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸:如果有设置,则是相对于你设置过后的字体大小.同时 em会继承父级元素的字体大小.
rem:它是相对于根节点默认字体大小.
vw,vh:分别为视口宽度,视口高度单位;
1% vw(vh):1%浏览器视口宽度(视口高度)
比如浏览器默认字体大小为16px的情况下,不作任何设置的话2em=32px;2rem=32px.若是在<body>中设置过font-size=a,则2em=2a;2rem=16px;若是在<html>中设置font-size=a,则2em=16px;2rem=2a.也就是说在没有任何字体大小设置情况下,em,rem都是以默认字体大小为基数;在有字体大小设置情况下em已<body>或是所在元素中的大小设置为参照基数.而rem只以<html>中的设置为参照.
二.颜色的几种写法
1.颜色关键字
color:red; background-color:blue;
2.RGB
color:rgb(111,222,333); background-color:rgb(111,222,333);
3.十六进制
color:#eeffcc(#efc); background-color:e8a6b3;
透明色如何表示
可以用RGBA 或HSLA(色相.饱和度,明度,透明度)
color:rgba(111,222,333,0.3);background-color:rgba(111,222,333,0.8);小数点表示透明度
color:hsla(111,222,333,0.3);background-color:hsla(111,222,333,0.8);
透明效果如何实现
用opacity
opacity:0.5;
rgb:(111,222,333);小数点表示透明度
currentColor如何来用
用于不知道当前元素的颜色而又需要设置与当前颜色一致的颜色.
三.盒模型有哪些属性
width:宽度
height:高度
border(top,right,bottom,left):边框宽度
margin(top,right,bottom,left):当前元素边框与周围元素的距离
padding(top,right,bottom,left):内容与边框的距离
四.标签的默认样式
即使没有给他们定义样式属性值，他们在浏览器中显示时，也会具有各种样式属性
body{
display:block;
margin:8px;
}
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h3 {
display: block;
font-size: 1.17em;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
a:-webkit-any-link {
color: -webkit-link;
cursor: auto;
text-decoration: underline;
}
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
ol {
display: block;
list-style-type: decimal;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
dl {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
dd {
display: block;
-webkit-margin-start: 40px;
}
五.列举display 的几个值
| 值 | 作用 |
|---|---|
| block | 块对象的默认值。用该值为对象之后添加新行 |
| none | 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 |
| inline | 内联对象的默认值。用该值将从对象中删除行 |
| compact | 分配对象为块对象或基于内容之上的内联对象 |
| marker | 指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用 |
| inline-table | 将表格显示为无前后换行的内联对象或内联容 |
| list-item | 将块对象指定为列表项目。并可以添加可选项目标志 |
| run-in | 分配对象为块对象或基于内容之上的内联对象 |
| table | 将对象作为块元素级的表格显示 |
| table-caption | 将对象作为表格标题显示 |
| table-cell | 将对象作为表格单元格显示 |
| table-column | 将对象作为表格列显示 |
| table-column-group | 将对象作为表格列组显示 |
| table-header-group | 将对象作为表格标题组显示 |
| table-footer-group | 将对象作为表格脚注组显示 |
| table-row | 将对象作为表格行显示 |
| table-row-group | 将对象作为表格行组显示 |
六.块级元素和行内元素分别有什么特点
块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行内元素：span, strong, em, br, img , input, label, select, textarea, cite
区别
1）块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
2） 块级元素可以设置 width, height属性，行内元素设置width, height无效
3 ) 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。
七.box-sizing: border-box有什么用
用于更改用于计算元素宽度和高度的默认的 CSS 盒模型。
.box {
width: 300px;
border: 10px;
}
这样渲染出来的为320px;
.box {
width: 300px;
border: 10px;
padding: 10px;
box-sizing: border-box;
}
这样渲染出来的为300px;
八.inline-block有什么作用？inline-block的缝隙是怎么回事？如何解决
1.使元素具有宽度高度特性，又具有同行特性
2.相邻元素之间有换行或者出现空格会导致有缝隙
3.①负margin
②给其父元素设置font-size:0;给其自身设置实际需要的字号大小
③元素之间不换行,用<span>
网友评论