zoukankan      html  css  js  c++  java
  • html css笔记 -度一


    """
    浏览器

    shell 内核
    外表 内心

    IE trident
    Firefox Gecko
    google chrome webkit/blink
    safari webkit
    opera presto

    css 权重
    !important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符

    !important Infinity 正无穷
    行间样式 1000
    id 100
    class|属性|伪类 10
    标签|伪元素 1
    通配符 0


    1000和100 256进制
    一位工程师手测试出来的

    浏览器父子选择器的内部原理是由右到左查找

    设置字体大小实际上是设置字体的高
    三角形用的是border设置


    段落 text-indent: 2em;
    1em = 1 * font-size

    1.行级元素/内联标签 display:inline
    feature:内容决定元素所占位置
    不可以通过css改变宽高
    span strong em a del

    2.块级元素 display:block
    feature:独占一行
    可以通过css改变宽高
    div p ul li ol form address

    3.行级块元素 inline-block
    feature:内容决定大小
    可以改宽高
    img

    凡是带有inline的元素,都有文字特性

    代码压缩,去掉了空格回车,所以img不能用margin调节间距



    先定义功能(先写CSS)非常重要!
    em可以自定义功能

    a标签去掉下划线:text-decoration:none;
    ui标签去掉圆点:list-style:none;
    padding:0;
    margin:0;

    通配符用法
    初始化标签
    *{
    padding:0;
    margin:0;
    text-decoration:none; ?
    list-style:none; ?
    }




    盒子模型

    盒子三大部分

    盒子壁 border

    内边距 padding

    外边距 margin

    盒子内容 width + height



    padding : 四个参数:上 右 下 左 三个参数:上 左右 下 两个参数:上下 左右 一个参数:全都有

    body的margin 默认为8px

    position

    absolute
    脱离原来位置进行定位
    相当于最近的有定位的父级进行定位
    如果没有,那么相对于文档进行定位
    relative
    保留原来位置进行定位
    相当于自己本身原来的位置进行定位
    fixed
    固定定位
    用relative作为位置,用absolute进行定位

    居中:
    html:
    <div></div>
    css:
    div{

    positoin:absolute/fixed; a..相对于文档中间 f..相对于浏览器中间
    left:50%;
    top:50%;
    100px;
    height:100px;

    margin-left:-50px;width * 0.5
    margin-top:-50px;height * 0.5

    }

    z-index:*; position 层的优先显示

    border-radius:50% 可以把方块变成圆圈



    浮动元素产生了浮动流

    所有产生了浮动流的元素,块级元素看不到他们
    产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动元素
    利用伪元素让父级包裹住浮动元素




    clear:both
    必须是块级元素



    伪元素必须加上content才能生效


    原型继承圣杯模式:


    """





  • 相关阅读:
    Spark技术内幕:Stage划分及提交源代码分析
    从中国制造到中国智造,奥克斯怎样独当一面?
    Spring 类构造器初始化实例
    国庆遐想:漫步云计算数据中心
    osx下快捷键相应符号
    【LuTy推荐】Samba for Android轻松无线访问手机存储,Android安卓软件下载
    WiFi共享精灵官网_笔记本变无线路由器,手机免费wlan上网软件
    vector中的find
    redis web cli nb
    Redis:安装、配置、操作和简单代码实例(C语言Client端)
  • 原文地址:https://www.cnblogs.com/GhostCatcg/p/9334334.html
Copyright © 2011-2022 走看看