美文网首页
近几日学习CSS小结(杂记)

近几日学习CSS小结(杂记)

作者: Save_Onfir3 | 来源:发表于2018-06-18 16:10 被阅读0次

    CSS的引入方式

    内联style属性,
    style标签,
    外部文件CSS link,
    @import url(./b.css)

    英文单词具有不可分割性,可用以下代码处理:

    word-break //单词打断
    word-break-all //单词以字母为结构粉碎性打断
    

    两个块级元素并排最好用float,然后在包裹它们的div里用clearfix,最好不要用display: inline-block;
    clear fix:

    .clearfix:after {
        content:" ";
        display: block;
        clear: both;
    } //用于解决使用float后出现bug的问题。
    

    文档流就是文档内元素的流动方向:

    1.内联元素从左上往右下流动。
    2.块级元素从上往下流。

    div的高度是由其内部文档流元素的高度总和决定;
    内联元素的高度基本不可测,在font-size比较小的时候可以用line-height来控制内联元素所占高度;
    (一般情况下,字体大小比较小的时候,你写行高是多少,那么行高就是多少。)

    内联元素高度:
    1.基线对齐;
    2.字体都有一个建议行高,如果不写行高,则浏览器会默认取建议行高;
    3.span里只有一个字,那么这个span就由这个字的建议行高再综合其它的字体相关的设计,来得到一个无法确定的值,前端无法确定,由设计师确定。

    content-box与border-box区别在于两者的盒子的宽度是否包含表框和内边距。

    content-box的width不包括padding和border;
    border-box的width包括padding和border;

    给display:inline元素设置宽高是无效的,设置margin-top,margin-bottom是无效的。

    position属性的五个取值:

    static //默认值。没有定位,元素出现在正常的流中。
    inherit //规定应该从父元素继承position属性的值。
    relative //生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20”会向元素的LEFT位置添加20像素。
    absolute //生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。
    fixed //生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。
    

    背景图片居中及按照比例缩放的代码:

    background-position: center center; //第一个center表示水平方向上居中,第二个center表示垂直方向上居中
    background-size: cover; //cover的意思是盖住所有面积按照比例缩放
    

    div居中小方法:

    如果有一个div,然后你有一个宽度,不管是max-width还是width,只需要写margin-right: auto; margin-left: auto; 此div就会水平居中。

    用CSS做出 各种形状的网站:CSS tricks shape
    图标的工具网站:iconfont.cn

    svg的语法:
    width :宽 height :高 fill :颜色
    vertical-align:top;

    相关文章

      网友评论

          本文标题:近几日学习CSS小结(杂记)

          本文链接:https://www.haomeiwen.com/subject/hgeneftx.html