标签:dex 无效 pos 大小 display 继承 属性 单词 position
一:字体属性设置
1:字体设置:分为中文字体设置和英文字体设置。英文字体主要有五种:Serif字体,San-serif字体,Monospace字体(等宽体),Cursive字体(草书体),Fantasy字体(奇幻体)
英文字体在各个window平台下的使用率:www.cssfontstack.com.(也称为web安全字体)
常用的中文字体:www.aoao.org.cn/blog/2008/03/font-chinese
2:font-famaily、font-size、font-style、font-weight都具有继承性
3:font简写时注意,必须写上font-size、font-famaily属性,而且是font-size必须在前面,如果加上font-style的话,必须在font-size前面加,切记不可调换顺序。
二:文本属性设置
1:文本文字默认大小为16px。
2:注意letter-spacing与word-spacing 的区别。letter-spacing字符之间的间距(汉字也算字符)。word-spacing 指的是单词之间的间距,以空格为分隔符。
3:最重要的一点,也是最容易混淆的一点。line-height设置行高。默认行高为22px,22px=16px+3px+3px。也就是默认文字大小加上文字上下各有3px的间距,这个3px系统按比例算得的,改变字体大小
会引起改变。这个属性常常用于文字的垂直对齐,假如只有一行文字,只需要将行高设置为区域的高度即可,这样就达到了垂直居中的效果。
4:text-align与vertical-align属性。水平对齐很简单。说起vertical-align(垂直对齐属性),我们需要说到5条线。就像我们写英语单词差不多。首先是baseline基线,对应于我们写单词起步的底线。第二条是
线是指有些小写字母比如y,g等等的底线。第三条指的是一些小写字母o,c,e等等的顶线,第四条是对于大写字母的线比如G,H等等顶线,最后一条是小写字母h的顶线。
vertical-align默认的值为baseline,一旦设置text-top对应于第四条线,text-buttom对应于第第二条线,center对应于基线与第三条线的中央。
三:盒子模型
1:学习Web技术,一定要学会如何看盒子模型。盒子分为4层,最里面的一层称为填充层,主要放置内容的;第二层为padding内边距;第三层为border边框;第四层为margin外边距。
box-sizing主要设置两个值,分别为content-box,border-box,默认为content-box。一旦改变为border-box,这会导致边框以内的大小不会在改变,一旦改变padding属性,只会引起填充层高和宽的变化。
2:垂直外边距的折叠问题:指的是两个相邻的兄弟元素各自设置外边距之后,他们之间的外边距不会累加,而是选择会发生重叠。
四:display属性
1:取值为inline时,改变高度和宽度不会引起变化(除了image之外),添加外边距也是无效的,可以将多行写成一行。常用于导航栏。
2:取值为block时,刚好与inline相反,它是一个元素会占据一行的空间,不论内容多少。
3:取值为inline-block时,结合了上面两种值的优点。可以改变高度和宽度,可以一行写。
3:取值为none时,内容和内容的大小进行回收了,可以达到隐藏的效果。
五:CSS的布局
1:float 属性。主要将上下排列的方式改为左右排列。但是有一个很大的缺点就是会脱离父元素的控制。比如<div>中有三个p元素,一旦全部设置为浮动,着会导致div没有了高度,相当于失效。
2:解决float的缺点的办法:1:向父元素添加overflow:hidden属性
2:让父元素也浮动起来
3:清除方法;(一般在父元素中写clear:both清除左浮动和右浮动的的影响)
4:添加伪元素(一般定义为类属性):clearfix::after{content:"."; clear:both; display:block ;visibility:hiddle; height:0}
3:CSS的定位(及其重要)
常用四个值(static,relative,absolute,fixed)
static:是非定位元素,是所有元素position的默认值。若两个区域重叠,可以使用z-index属性,也就是建议z轴,面对与我们,如果想要看到一个区域的全部范围,着只需要将z-index值设置大一些即可。
relative:相对定位元素(使用偏移量设置)
absolute:绝对定位元素(它是相对最接近的相对定位父元素为参考物)
fixed:固定元素,其实与absolute差不多,主要区别在于浏览器视角的,即往下滑动,他将在固定在同一位置,永远看得见。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
标签:dex 无效 pos 大小 display 继承 属性 单词 position
原文地址:https://www.cnblogs.com/dengwang/p/8977741.html