zoukankan      html  css  js  c++  java
  • 盒子模型

    盒子模型
    1.盒子模型=网页布局的基石
    由4部分组成:边框(border)、外边距(margin)、内边距、(padding)、盒子中的内容(content)。
    2. 边框(border)、外边距(margin)、内边距、(padding)是盒子模型的属性,
    有四个方向,可以设定属性值。 顺时针方向设置,为上、右、下、左
    3.三个值的属性为: a为上、 b为左右、c为下。
    两个值的属性为: a为上下、b为左右。
    一个值的属性为: a为上下左右。
    4.优先级,就近原则, 行内样式> 内部样式> 外部样式
    5.边框三个属性:边框的粗细、样式、颜色、每一个属性值都要有一个空格来个开,空格必须在英文输入法状态下输入才可以,三个属性缺一不可。
    6.盒子模型的三维模式的包裹层与ps的模型一样,分为五层:
    border为第一层、
    content+padding为第二层、
    background-image为第三层、
    background-color为第四层、
    marg为第五层。
    7.盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸

    1.float属性的3个属性值:
                          left-左浮动   right-右浮动  none-不浮动 
    特点:元素会左移,或右移,直至碰触到容器为止。
    2.设置了浮动的元素,仍旧处于标准文档流中,意味着它仍占据标准文档中的空间,会对它周围的元素产生影响。
    3.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。
    4.当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特质紧邻后面的元素(DOM结构中的紧邻其后面的元素)。

    1.清除浮动的常用方法
    clear属性-常用clear:both;
    clear:left,或者clear:right; 清除元素左侧或右侧的浮动
    同时设置width:100%(或固定宽度)+overflow:hidden;也是可以清除浮动的。一般给受到浮动的元素设定的。
    p{100%; overflow:hidden}或p{width:both}
    一:横向两列布局的实现:这是网页布局最常见的方式之一 主要应用技能: float属性——使纵向排列的块级元素,
    横向排列 margin属性——设置两列之间的间距 二:当父包含块缩成一条时,用clear:both方法清除浮动无效,它一般用于紧邻后面的元素的清除浮动
    。所以设置父的overflow:hidden ☆div块的高度一般不需要设置,这样高度就会随着内容自动扩展。
    若设置了高度,又设置了overflow:hidden,当内容超过高度的时候,就无法正常显示了


  • 相关阅读:
    Android实现简单的检测手机自由落体关闭屏幕
    Android Disable Package/Component 跳过app安装
    求单向链表中倒数第k个节点(c++):快慢指针/递归
    算法学习笔记---链表与数组
    pycharm使用matplotlib绘图学习笔记
    pycharm使用matplotlib绘制图像报错
    python numpy学习笔记
    python刷leetcode算法-- 左旋转字符串
    机器学习算法扫盲篇
    Kaggle入门篇
  • 原文地址:https://www.cnblogs.com/Yimi/p/6069264.html
Copyright © 2011-2022 走看看