• css学习_css盒模型及应用


    1、看透网页布局的本质

    2、盒模型

    margin、border、padding、width、height

     a、 border: 1px solid red                (solid/dashed/dotted/double)

     案例:table表格中  合并边框的写法

    table {border-collapse:collapse}

    案例:圆角边框(css3)

    border-radius:5px;(4个角都是5px,最大是变成一个圆)

    b、padding(内边距)

    padding:1px 2px 3px 4px;   (上  右  下  左)

    c、magin

    1.1文字水平居中和盒子水平居中的区别

    text-align:center;(文字)

    margin:0 auto;(盒子)

    2.2、插入图片和背景图片的区别

    3、清楚内外边距

    一般是用来清除默认样式,解决不同浏览器的兼容性

    *{margin:0;padding:0;}(一般不用)

    工作中用法:

    body{margin:0;padding:0;}

    4、margin、padding注意点:

      a、行内元素设置上下外边距不起作用,上下内边距也最好不要设置。

         

      b、外边距合并(塌陷)的问题(遵循以大的边距为准)-----注意是块元素和块元素之间,行内块和行内元素没有这些问题。

      场景一:(相邻块元素垂直外边距的合并,注意是上面的设置的margin-bottom、下面的设置的是margin-top)

     

      避开 :上下的设置一个就好了,不同时出现

      场景二:嵌套且相邻块元素垂直外边距的合并----嵌套和相邻及块级元素之间都是前提。

    注意:就是说如果没有用解决方案时,被嵌套的元素的margin-top是始终是作用在父元素上的。

     5、盒子模型的空间尺寸、实际尺寸

    元素自己的border、padding会影响自己的实际尺寸的大小

    注意:

    盒子(每个标签都可以看做一个盒子)没有给宽度时,padding、border不会影响盒子大小

    注意:自己设置的pading或高度超过父元素大小时

    会导致自己超出。

    6、学会用盒子来看布局

     7、盒子模型布局稳定性

    案例:宽度剩余法

    8、css3盒模型

    box-sizing:border-box;

  • 相关阅读:
    JS实现菜单滚动到一定高度后固定
    原生js如何获取某一元素的高度
    在Vue项目中,添加的背景图片在服务器上不显示,如何处理
    单行文本截断 text-overflow
    使用line-height垂直居中在安卓手机上效果不好
    css 苹方字体
    十二. for of 示例 (可以解决大多数应用场景)
    npm详解
    webpack搭建服务器,随时修改刷新
    探讨弹性布局Flexible Box
  • 原文地址:https://www.cnblogs.com/yangyutian/p/10504947.html
Copyright © 2020-2023  润新知