css怎么表示下一个标签,关于CSS部分标签用法

一.em,rem.vm,vw的计算方式

em:它是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸:如果有设置,则是相对于你设置过后的字体大小.同时 em会继承父级元素的字体大小.

rem:它是相对于根节点默认字体大小.

vw,vh:分别为视口宽度,视口高度单位;

1% vw(vh):1%浏览器视口宽度(视口高度)

比如浏览器默认字体大小为16px的情况下,不作任何设置的话2em=32px;2rem=32px.若是在

中设置过font-size=a,则2em=2a;2rem=16px;若是在中设置font-size=a,则2em=16px;2rem=2a.也就是说在没有任何字体大小设置情况下,em,rem都是以默认字体大小为基数;在有字体大小设置情况下em已或是所在元素中的大小设置为参照基数.而rem只以中的设置为参照.

二.颜色的几种写法

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;给其自身设置实际需要的字号大小

③元素之间不换行,用