zoukankan      html  css  js  c++  java
  • CSS的重点知识

    一:字体属性设置

    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差不多,主要区别在于浏览器视角的,即往下滑动,他将在固定在同一位置,永远看得见。

    。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

  • 相关阅读:
    机器学习规则:ML工程最佳实践----rules_of_ml section 2【翻译】
    机器学习规则:ML工程最佳实践----rule_of_ml section 3【翻译】
    知识图谱技术分享会----有关知识图谱构建的部分关键技术简介及思考
    【e2Open】
    【2B】企业供应链管理软件
    【交互】复杂逻辑配置的一个不错的方法(神策数据)
    【视觉】交易数据展示
    【视觉】数据平台
    【设计复盘】APP设计复盘
    【设计规范】腾讯课堂
  • 原文地址:https://www.cnblogs.com/dengwang/p/8977741.html
Copyright © 2011-2022 走看看