CSS面试考点之画三角形、圆和线等

html-css010

CSS面试考点之画三角形、圆和线等,第1张

1)先画个正方形;

2)将 border 的值加大,并设为不同的颜色;

3)宽高均设为 0,剩下四个border,就变成。

4)想要哪个三角形,就保留哪个三角形的颜色,其他的都设置为透明。transparent 表示透明。将边框宽度设置为不同,就可以变换三角形的形状。

1)画圆角矩形;

2)画一个深色的三角形;

3)然后再画一个同样大小白色的三角形盖在它上面,两个三角形错位 2 个像素,这样深色三角形的边缘就刚好露出一个像素

a、normal: 连续的空白符会被合并,换行符会被当作空白符来处理。

b、nowrap: 和 normal 一样,连续的空白符会被合并。但文本内的换行无效。

c、pre: 连续的空白符会被保留。在遇到换行符或者 <br>元素时才会换行。

d、pre-wrap: 连续的空白符会被保留。在遇到换行符或者 <br>元素,或者需要为了填充「行框盒子( line boxes )」时才会换行。

e、pre-line: 连续的空白符会被合并。在遇到换行符或者 <br>元素,或者需要为了填充「行框盒子( line boxes )」时会换行。

f、break-spaces:

与pre-wrap的行为相同,除了:

任何保留的空白序列总是占用空间,包括在行尾。

每个保留的空格字符后都存在换行机会,包括空格字符之间。

这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)。

text-overflow 属性确定如何显示的溢出内容。它可以被剪切,显示一个省略号('...')或显示一个自定义字符串。

a、clip:此为默认值。在内容区域的极限处截断文本, 因此在字符的中间可能会发生截断。如果你的目标浏览器支持text-overflow: '',为了能在两个字符过渡处截断,你可以使用一个空字符串值 ('') 作为text-overflow属性的值。

b、ellipsis:用一个省略号 ('…')来表示被截断的文本。 这个省略号被添加在内容区域中,因此会减少显示的文本。如果空间太小到连省略号都容纳不下,那么这个省略号也会被截断。

c、<string>:用来表示被截断的文本。 字符串内容将被添加在内容区域中,所以会减少显示出的文本。如果空间太小到连省略号都容纳不下,那么这个字符串也会被截断。

- webkit-line-clamp 是webkit的私有属性,是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

-webkit-line-clamp 属性 可以把块容器中的内容限制为指定的行数。

它只有在display属性设置成 -webkit-box或者-webkit-inline-box并且-webkit-box-orient(en-US) 属性设置成vertical时才有效果

在大部分情况下,也需要设置overflow属性为hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).

不看你的截图了,知道是怎么回事。

表格使用不重复的背景图片,精确定位比较麻烦,而且有时候dreamweaver可视化显示和真实的浏览器里显示还不统一。这个只能慢慢调试了,表格多的话调试比较麻烦。对于表格设计来说没有什么更好的办法。div+css设计的话就不会出现这样的事情了。

1、在网页代码的头部,加入一行viewport元标签。

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

注意:该方式不支持IE8及IE8以下的版本

2、不使用绝对宽度

由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。对图像来说也是这样。

具体说,CSS代码不能指定像素宽度:width:xxx px

只能指定百分比宽度: width: xx%或者 width:auto

3、使用相对大小的字体

字体也不能使用绝对大小(px),只能使用相对大小(em或者rem)

例如: body

上面的代码指定,字体大小是页面默认大小的100%,即16像素(1em=16px)。

h1

h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)

将想要的像素去除默认的16像素可以得到em

4、流动布局(fluid grid)

"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。

.main

.leftBar

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

5、媒体查询器@media

"自适应网页设计"的核心,就是CSS3引入的MediaQuery模块。

它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

总而言之,自适应屏幕是在底层实现的。

希望可以帮到你~~希望采纳谢谢