zoukankan      html  css  js  c++  java
  • CSS学习笔记(一)

    1、背景

      background:url() no-repeat left center red;

      background-repeat、background-position、background-image、background-color

    2、文字的样式

      font-size 改变文字的大小

      font-weight  加粗文字

      font-family  字体

      font-style   italic斜体   normal正常

      text-indent   缩进 10px 2em

      font:12px/2 arial,sans-serif;  表示font-size是12px, line-height是font-size的2倍,后边的是字体。可能这个就是最少的font了

      说下em,px,rem的区别

      px就是字体大小,写上之后,即使页面放大,字体应该是不会变大的

      em是个单位,比如父级的font-size是12px,子级设置font-size位2em,那么子级的font-size真实大小是24px;

       <div style="font-size:12px;">我是测试</div>
            <div style="font-size:12px;"><p style="font-size:2em;">我是测试</p></div>

      如果父级设置了em,子级再设置em,那么子级真实的大小时父级的em*子级的em,看下面的例子

    *{ margin:0; padding:0; list-style:none;}

    body{font-size:12px;}

    p{font-size:2em;}
        .div1{ font-size:2em;}
        .div2{ font-size:2em;}  

    <div class="div1">我中测试</div>
        <div class="div2">
            <p>我中测试</p>
        </div>

    如果给body的font-size设置em的话,以浏览器默认字体大小为奇数,一般就是16px,就是body{font-size:1em;}相当于body{font-size:16px;},font-size还可以用百分比

    对于rem,是css3新增的单位,如果父级为rem,子级也为rem,那么子级的真实rem还是子集的值

    3、从外到内,从上到下去写页面

    4、white-space:nowrap强制文字不换行,text-overflow:ellipsis加省略号  overflow:hidden; 溢出隐藏

    5、css的书写位置:style="css样式" --行间样式

    <style type="text/css"></style>内联样式

    6、HTML实体符号 

    &lt;    < 

    &gt;   >

    7、IE6不支持a以外标签的hover

    8、div#box(禁止用)   div.box必须是div并且有一个class是box

      选择器的前面最好限定范围,span页面里所有span都选中了。

      注意:继承没有直接给的大。

      继承    #box .text

      直接给  span

      这个标签会执行span的样式

    9、css样式继承

      font-size、font-weight、font-family、font-style、line-height、

      color ->a特殊,不能继承父级的颜色

    10、

      块标签:div  p   h1

        独占一行

        能给宽高

        不给width的时候,width为100%

      行内标签:a    span

        共处一行

        不能给宽高,宽高靠内容撑起来

          行内块标签:img input

        能给宽高,共处一行

      嵌套规则:

        块:能套块标签和行内标签。但是p比较特殊,它不能再包含其他的块标签。

        行内:只能嵌套行内标签。

      IE6不支持块的inline-block

          html语义化:该用什么标签就用什么标签,用大包住小,不要为了实现样子,就乱用标签。不要为了css而改变HTML

    11、什么时候用图片

      图片作为网页中的内容出现时,用img

      图片作为修饰(可有可无)时,用background

    12、ul无序列表,ol有序列表,<dl><dt>标题</dt><dd>内容一</dd><dd></dd></dl>描述列表  

    13、 盒模型:width+padding+border, margin不是盒模型的一部分

      注意:行内标签的margin和padding是不完整的,只有左右没有上下。

      块margin塌陷

        下边元素的margin-top,上边元素的margin-bottom,中间的距离是margin-top和margin-bottom最大的。

        注意:塌陷只存在于上下!左右margin没事

    14、margin-top合并

      父级的margin-top和子级的margin之间没有border,padding,就会发生合并,父级和子级一起拥有margin-top

      解决问题:

        1、父级加一个border

        2、父级加padding-top(推荐)  height(其次)

        3、父级overflow:hidden(推荐)

      能用padding(推荐),就是用padding,因为margin会有一些问题。

    15、浮动:

      浮动特性:

        1、浮动后脱离文档流

          其他元素当浮动的东西不存在,占据浮动元素的位置

        2、文本环绕

        3、浮动能让块到一行

        4、浮动是有顺序的left、right

        5、浮动后,父级宽度不够会被挤下来

        6、浮动后,被挤下来的元素会跟着最高的元素走

        7、浮动后,行内变块(能给宽高)

    浮动三要素:

        1、有一个元素浮动,同级元素都要浮动

        2、有浮动,就必须清除浮动

        3、浮动的元素,必须要有宽度(最好有宽度,虽然有时候不加宽度也没事儿)

    16、无语意标签:i、b、span等。

    17、

        

  • 相关阅读:
    Python字典
    Python集合
    Hungray匈牙利算法
    异常捕获模块,throw, try, catch, finally
    《加德纳艺术通史》罗杰克-劳利
    《高效休息法》久贺谷亮
    梯度检验 Gradient check,bias correction, Exponentially Weighted Averages
    方差与偏差,bias vs variance
    大数定理,中心极限定理以及一些常见分布
    聚类-均值漂移
  • 原文地址:https://www.cnblogs.com/king-bj/p/4332899.html
Copyright © 2011-2022 走看看