前端学习笔记(二)浮动 盒子

167 阅读4分钟

1.什么是浮动? 浮动就是让块级标签不独占一行。目的(使用场景):把块级标签元素可以排在一行上。 2.浮动的原理 就是让元素脱离文档流,不占用标准流。 3.float的属性值: left:左浮动 right:右浮动 none:默认值,不浮动 4.浮动后,后面的元素不管是块级还是行级元素,不会显示在下一行。 5.清除浮动 目的:让后面的元素自动掉到下一行。 方法: 1)添加空标签,并设置样式:clear:both; clear:left; 清除左浮动 clear:right; 清除右浮动 clear:both; 清除左右浮动 clear:none; 左右浮动都不清除 2)在要清除浮动的父级添加样式:overflow:hidden; overflow:hidden; 超出部分隐藏,也可以用来实现清除浮动。 3)在要清除浮动的父级添加伪元素,并设定样式: 父元素:after{ content:""; display: block; clear:both; }

注意:在实际项目开发中,我们一般首先第2种方案。

6.CSS盒子模型 每个元素都是一个盒子,一个盒子由margin(外边距),border(边框线),padding(内边距)和content(内容)组成。 IE的盒子中的content又由padding和content组成。

区别外边距和内边距是以边框为参照。

系统默认外边距为8px1)外边距(margin):指元素边框线之外的距离。
    margin-left:左边距
    margin-right:右边距
    margin-top:上边距
    margin-bottom:下边距
    margin:可用来设置任意一个边的边距,可以带14个参数。
        1个(apx):表示上下左右都有这样的外边距apx
        2个(apx bpx):表示上下外边距为apx,左右外边距为bpx
        3个(apx bpx cpx):表示上外边距为apx,下外边距为cpx,左右外边距为bpx
        4个(apx bpx cpx dpx):表示上为apx,右为bpx,下为cpx,左为dpx
2)内边距(padding):指元素的文本内容与边框之间的距离。
    它的用法与margin完全一样。
3)边框(border)
    border-width:边框线宽度
    border-style:边框线样式
    border-color:边框线颜色

    复合写法(简写):
        border:border-width border-style border-color;
        注意:border-width border-style border-color这三个参数没有位置之分。

7.盒子的真实尺寸 盒子宽度 = width + padding左右 + border左右 盒子高度 = height + padding上下 + border上下 8.display属性:用来设置元素的显示方式。 属性值: none:不显示元素 block:块显示,在元素前后设置换行符。目的:将行级标签转换为块级标签(因为行级标签不识别宽高, 而块级标签识别,转换后,行级标签也可以设置宽高了) inline:行内显示,将块级标签转换为行级标签。 inline-block;将块级或行级标签转换为行内块级标签。 9.table样式 table一般不用来布局,主要用来格式化数据。 属性: width:宽度 height:高度 border-collapse:collapse; 单线边框 border:边框线 td,tr属性: width:宽度 height:高度 border:边框线 text-align:文本左右对齐(left(默认)/center/right) vertical-align:文本垂直对齐(top/middle(默认)/bottom) 10.列表样式 不是描述性的文本的任何内容都可以认为是列表。比如:菜单、商品列表等。 1)列表类型 无序(ul)、有序(ol)和自定义列表(dl)。 ul和ol的列表项都是用li表示的,而dl是由一个dt和一个或多个dd组成的。 dl一般用来设定一个定义,比如名词解释等。dt:标题,dd:描述,用来对dt的内容进行解释并说明的。 2)样式(用来修改标识类型) list-style-image:用图像表示标识 list-style-position:标识的位置(inside/outside(默认)) list-style-type:标识类型

    简写:
        list-style:list-style-image list-style-position list-style-type;
        list-style的值可以按任意顺序列出,而且可以任意省略,只要提供一个值,其它的都自动默认。

    list-style-type的属性值:
        a)无序
            disc(默认)/circle/square
        b)有序
            decimal(默认)/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha/
            lower-greek/lower-latin/upper-latin...
        有序和无序:
            none

11.轮播图 作用:主要用于产品或公司相关宣传。 组成: 1)轮播的组图(至少两张以上,不能太多) 2)控制器 3)计数器