CSS常见样式

CSS常见样式_第1张图片
图片发自App


块级元素有: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

你可能感兴趣的:(CSS常见样式)