您现在的位置:首页 >> 前端 >> 内容

CSS相关知识学习

时间:2017/7/24 9:54:54 点击:

  核心提示:CSS相关知识学习一、float浮动float:left | right浮动的特点:1.浮动找浮动,不浮动找不浮动2.浮动只影响后面的元素3.浮动以元素顶部为基准对齐4.浮动可是实现模式转换(span...

CSS相关知识学习

一、float浮动

float:left | right

浮动的特点:

1.浮动找浮动,不浮动找不浮动

2.浮动只影响后面的元素

3.浮动以元素顶部为基准对齐

4.浮动可是实现模式转换(span设置浮动可以设置宽高)

5.让块级元素在一行显示

二、margin 外边距的总结

1.margin:设置四个方向的外边距

margin:上 右 下 左

2.margin-left,margin-top,margin-right,margin-bottom:对左上右下分别设置外边距

3.margin:20px 20px;

第一个20px:代表上下

第二个20px:代表左右

4.margin: 20px auto

auto:自适应大小,类似于在父容器居中

三、mac中HBuilder整理代码格式快捷键

cmd+shift+F

四、新人快速工作方法总结(画网站)

1.不要拿来就做,要去思考,去规划

2.根据原型图做出模块分布图

要设计好结构(多思考会出现的冲突)

为没一个模块做好命名/规划等

3。将各个模块以border或背景的形式展示出来

4.具体的填充每一个模块

五、原型图

一般由设计/美工使用ps制作,

根据项目需求/产品需求设定界面,

在原型图中要规定处颜色/大小/位置等信息,

必要图标单独切图。

开发人员根据项目原型图去设计完成代码。

六、overflow的使用

overflow 属性规定当内容溢出元素框时

overflow:visibe

默认值。内容不会被修剪,会呈现在元素框之外

overflow:hidden

内容会被修剪,并且其余内容是不可见的

overflow:scroll

内容会被修剪,做单时浏览器会显示滚动条以便查看其余的内容

overflow:auto

如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容

七、position定位

position:static 静态定位

position:absolute 绝对定位

position:relative 相对定位

position:fixed 固定定位

八、绝对定位

1.以浏览器左上角为基准设置位置

2.当一个盒子包含在另一个盒子中,父盒子未设置定位,子盒子以浏览器左上角为基准设置位置;当父盒子设置定位,子盒子以父盒子左上角为基准设置位置

3.绝对定位绝对不占空间位置(与浮动一样)

4.绝对定位可是实现模式转换

九、相对定位

1:相对定位以元素自身的位置为基准设置位置

2:相对定位占位置

3:一般子元素设置相对定位,父元素设置绝对定位(子相父绝)

十、固定定位fixed

固定定位不占位置

Tags:CS SS S相 相关 
作者:网络 来源:Soda_lw的博客