• 笔记:2016-06-20


    1.1 圆角矩形 (border-radius:)

    1、border-radius: 1em ;

    2、border-radius: 50% ;

    3、border-radius: 宽高一半(px);

    4、border-radius: 左上角 右上角 右下角 左下角;

    1.2 Footer部分布局

    clip_image002

    1.3 清除浮动(闭合浮动)

    清除浮动的目的:就是为了解决子盒子浮动,父盒子高度为0的问题。

    1、clear: both ;

    clip_image004

    2、Overflow: hidden ; (缺点: 超出部分,会被隐藏。)

    clip_image006

    3、伪元素法;

    .clearfix: after {

    Content: “”;

    Height: 0;

    Overflow: hidden;

    Visibility: hidden;

    Display: block;

    Clear: both;

    }

    Clearfix {

    *zoom: 1; /*兼容IE67*/

    }

    4、双伪元素法;

    .Clearfix:after, .clearfix: before {

    Content: “”;

    Display: table;

    }

    .Clearfix: after {

    Clear: both;

    }

    .Clearfix {

    *Zoom: 1; /*兼容IE67*/

    }

    1.4 量取高度

    clip_image008

    1.5 Table栏

    clip_image010

    OUT OF FLOW

    一个元素如果它是浮动、绝对定位或根元素,则被称为排版流之外out of flow的元素。

     

    影响标准流布局‘display’、 ‘position’ 与 ‘float’ 的关系

    影响框的生成和布局的三个属性——’display’,’position’和’float’

     

    BFC

    BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

     

    哪些元素会生成BFC

    根元素 html

    float属性不为none 浮动框

    position为absolute或fixed

    display为inline-block, table-cell, table-caption, flex, inline-flex 非块框的块容器

    overflow不为visible的块框。这就是为什么我们经常用overflow:hidden去清除内部浮动的原因

    触发IE的hasLayout特性

     

    BFC 作用

    解决清除浮动问题

    解决margin 合并问题

    多栏布局

     

    CSS规范小点

    文件

    CSS 文件使用无 BOM 的 UTF-8 编码

    缩进

    使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符

    空格

    1.选择器 与 { 之间必须包含空格

    2.属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。

    3.列表型属性值 书写在单行时,, 后必须跟一个空格。

    选择器

    1.当集体声明多个 selector 时,每个选择器声明必须独占一行。

    2. >、+、~ 选择器的两边各保留一个空格。

    属性

    1. 属性定义必须另起一行。

    2. 属性定义后必须以分号结尾。

    清除浮动

    当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。

    另需注意,对已经触发 BFC 的元素不需要再进行 clearfix。

    其他

    1.选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。

    2. 在可以使用缩写的情况下,尽量使用属性缩写。

    3. 使用 border / margin / padding 等缩写时,应注意隐含值对实际数值的影响,确实需要设置多个方向的值时才使用缩写。

    4.文本内容必须用双引号包围。

    5.当数值为 0 - 1 之间的小数时,省略整数部分的 0。

    6.长度为 0 时须省略单位。 (也只有长度单位可省)

    7.url() 函数中的路径不加引号。

    8.RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()

    9.颜色值可以缩写时,必须使用缩写形式。

    10. 颜色值不允许使用命名色值。

    11. 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。

    12. font-weight 属性必须使用数值方式描述。

    13. 层级(z-index)必须清晰明确,页面弹窗、气泡为最高级(最高级为999),不同弹窗气泡之间可在三位数之间调整;

    http://jigsaw.w3.org/css-validator/

     

    1.1 Js控制a链接禁止跳转

    1 <a href=”javascript:;” ></a>

    2 <a href=”javascript:void(0);” ></a>

    1.2 半透明

    1 opacity:0.5; 缺点:盒子半透明,里面的内容也跟着半透明。

    2 background: rgba(0,0,0,0.5);

    background: rgba(0,0,0, .5);

    1.3 层级

    层级是只有定位之后才有的属性。和浮动没有关系。

    使用方式是: 盒子必须添加定位。然后,我们还可以用

    :z-index 这个属性来控制层级的值。

    定位的盒子,层级默认为0。而且从左往右以此递增值,最高不过1。

    clip_image002[4]

    定位:不一定不占位置。(relative:占位置的)

    浮动:一定不占位置。他不会搞过定位。(absolute:不占位置)

  • 相关阅读:
    xampp 80端口被占用后这么办??解决了
    XAMPP配置基于虚拟目录、多域名的环境
    mysql 主从同步
    jquery插件
    Css绘制箭头实现代码
    Ubuntu下mount命令的好用处
    linux下IPTABLES配置详解
    java程序员网站
    1.Hibernate介绍
    1. Mybatis介绍
  • 原文地址:https://www.cnblogs.com/binperson/p/5608718.html
Copyright © 2020-2023  润新知