块级元素有:div,h1,h2,h6,p,hr,form,ul,dl,ol,pre,table,li,dd,dt,tr,td,th等。
行内元素有:em,strong,a,span,br,img,button,input,label,select,textarea,code,script等。
2 - css继承是指父元素的样式会继承给子元素。有些属性可以继承,有些不可以。####
常见的可以继承的属性有:#####
属性 属性
color:#eee list-style
font: list-style-image
font-style list-style-position
font-variant: table-layout
font-weight:bold border-collapse
font-size border-spacing
list-style-type caption-side
font-family: empty-cells
font-stretch: text-decoration-skip 检索或设置对象中的文本装饰线条必须略过内容中的哪些部分。
font-size-adjust: text-underline-position 检索或设置对象中的下划线的位置。
visibility:visible/hidden/collapse 主要用来隐藏表格的行或列。隐藏的行或列能够被 其他内容使用。对于表格外的其他对象,其作用等同于hidden。 text-shadow 设置或检索对象中文本的文字是否有阴影及模糊效果
text-transform 检索或设置对象中的文本的大小写 white-space 设置或检索对象内空格的处理方式
tab-size 检索或设置对象中的制表符的长度 word-wrap 设置或检索当内容超过指定容器的边界时是否断行
overflow-wrap 设置或检索当内容超过指定容器的边界时是否断行 word-break 设置或检索对象内文本的字内换行行为
text-align 设置或检索对象中内容的水平对齐方式 text-align-last 设置或检索一个块内的最后一行(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)或者被强制打断的行的对齐方式
text-justify 设置或检索对象内调整文本使用的对齐方式 letter-spacing 检索或设置对象中的字符之间的最小,最大和最佳间隙
word-spacing 检索或设置对象中的单词之间的最小,最大和最佳间隙 text-indent 检索或设置对象中的文本的缩进
vertical-align 设置或检索对象内容的垂直对其方式 text-size-adjust 检索或设置移动端页面中对象文本的大小调整
line-height 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离 cursor:
zoom: direction:ltr/rtl
常见的不可继承的属性有#####
属性| |属性
------|-------|-----|-----|-----
border| |padding |
display| |margin|
background| |height|
min-height||max- height|
width||min-width|
max-width||overflow|
position||left|
right||top|
bottom||z-index|
float||clear|
table-layout||vertical-align|
page-break-after|| page-bread-before|
unicode-bidi||
3 . 如何让会计元素水平居中?如何让行内元素水平居中?####
块级元素水平居中可以通过设置margin来实现
.box{margin:0 auto;}/*左右margin值为auto,平均分配间距实现水平居中*/
注:块级元素设置水平居中一定要设置宽度。
行内元素水平居中
div{text-align:center} /*DIV内的行内元素均会水平居中*/
4 . 用css实现一个三角形####
.box{ height:0; width:0px; border-top:solid 150px red; border-left:solid 1px red; border-right:solid 400px transparent; border-bottom:solid 1px transparent; }
实现如下图所示
图片.png
5 .单行文本溢出加...实现####
#sp{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
图片.png
6 .px,em,rem有什么区别?####
如下图所示,px,em,rem都是单位,但是有不同点。
图片.png
px为固定单位,实际上就是像素,用PX设置字体大小时,比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。;
em和rem都是相对单位,但是em和rem的不同之处在于其相对的父元素不同。
em是相对于其父元素字体的大小,rem相对于根元素(html)字体大小。
7 . 解释下面代码的作用,为什么药加引号,字体里\5b8b\4f53代表什么?####
图片.png
body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; }
这段代码设置字体:字号为12px,1.5倍行距,有空格,不加引号会被识别成两个元素。数字是Unicode码,宋体、微软雅黑。
代码###
一. 参考1: http://js.jirengu.com/mifopodume/2/edit
二.参考2: http://js.jirengu.com/rupicadula/2/edit
三.参考3:http://js.jirengu.com/gifosujibo/2/edit
四.参考4:http://js.jirengu.com/zejacucemi/7/edit
五.参考5:http://js.jirengu.com/rozesugevi/1/edit