《CSS学习之路》005-CSS盒子模型

猫哥的技术博客
681 阅读4分钟

什么是盒子模型

  • HTML 中元素的排列, 盒子套盒子

image-20200406100720490

  • 再来两个立体的....

image-20200406100748958

image-20200406100955156

  • 有几个词需要解释一下...
padding 内边距
margin 外边距
content 内容区
border 边框
top bottom left right 上 下 左 右

padding 内边距

  • 所谓内边距, 就是内容区到边框的距离

image-20200406102736247

  • 上下左右对应padding-top, padding-bottom, padding-left, padding-right
  • 可以单独设置, 也可以同时设置
div {
    padding: 20px;
}
  • 相当于
div {
    padding: 20px 30px 40px 50px;
}
  • 相当于
div {
    padding-top: 20px;
    padding-bottom: 40px;
    padding-left: 50px;
    padding-right: 30px;
}
  • 可以通过浏览器很方便的调试

image-20200406102736247

  • 内边距会把边框撑大

margin 外边距

  • 所谓外边距就是边框到盒子最外边界的距离

image-20200406104525975

  • 可以单独设置, 也可以同时设置
div {
    margin: 20px;
}
  • 相当于
div {
    margin: 20px 30px 40px 50px;
}
  • 相当于
div {
    margin-top: 20px;
    margin-bottom: 40px;
    margin-left: 50px;
    margin-right: 30px;
}

border 边框

  • 所谓边框就是内外边距之间的部分

image-20200406104814899

  • 可以对边框进行设置, 宽度, 线条类型, 颜色
div {
    border: 20px solid blue;
}
  • 相当于...
div {
    border-color: red;
    border-style: solid;
    border-width: 20px;
}

  • 边框也可以设置上下左右
div {
    width: 200px;
    height: 200px;
    border-width: 10px;
    border-color: red;
    border-style: solid;
}
  • 相当于
div {
    width: 200px;
    height: 200px;
    border-bottom: 10px;
    border-left: 10px;
    border-right: 10px;
    border-top: 10px;
    border-color: red;
    border-style: solid;
}

  • 注意border-style: solid;, 要写在设置宽度代码的下面

  • 通过设置border-bottom, 可以实现下划线的效果

再来回顾一下盒子模型

  • 注意看图, 找出内容区, 边框, 内边距, 外边距

块级元素的居中

  • 之前的text-align:center, 只能让文字居中

  • 如果想让块级元素居中, 需要margin:0 auto

  • margin:0 auto的含义
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;

上下边距重叠的问题

  • 如果有两个元素, margin:20px, 那这两个元素之间的距离应该是多少呢?
  • 本能的, 我们觉得应该是第一个元素的margin-bottom加上第二个元素的margin-top
  • 其实应该是, 这两个值, 那个大, 选哪个

image-20200406142908466

固定盒子的宽度

  • 之前我们说过, 内边距padding会把边框"撑起来"

  • 如果我们想固定盒子的最大宽度, 可以使用box-sizing:border-box
p {
    border: 1px solid green;
    width: 200px;
    height: 200px;
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
}

设置边框

  • 可以试着边框的样式

  • 也可以单独设置样式

值 描述
none 定义无边框。
dotted 定义点状边框
double 双实线
solid 定义实线。

设置边框的圆角

  • 使用border-radius, 来设置圆角
  • 支持数字和百分比

  • 如果百分比是 50%, 就是一个圆形

  • 可以同时设置四个角, 也可以分别设置
border-radius: 20px;
  • 相当于
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
  • 可以四个角的设置可以写在一起, 从左往右代表上右下左

去除 input 框的轮廓线

  • 通过outline: none; 来去除轮廓线
input {
    outline: none;
}

设置元素的显示和隐藏

  • 可以通过display属性控制显示和隐藏
display: block; /* 显示 */
display: none; /* 隐藏 */

display:none 和 visibility:hidden 的区别

  • 都可以隐藏元素
  • display:none会让元素消失, 元素原来的位置会空出来

  • visibility:hidden, 会让元素消失, 但是位置保留, 相当于透明了

设置最大宽度和最小宽度

  • 所谓最大宽度, 意味着最大不能超过这个宽度
  • 所谓最小宽度, 意味着最小不能小于这个宽度
  • 最大宽度使用max-width, 可以是数字, 可以是百分比, 如果是百分比, 相对于父元素

  • 最小宽度使用min-width, 可以是数字, 可以是百分比, 如果是百分比, 相对于父元素

设置宽度和内容自适应

  • 可以通过width:fit-content来设置

根据子元素的宽度, 设置父元素的宽度

  • 可以使用width: max-content;或者width: min-content;
  • 以最大的子元素宽度为准, 或者以最小的子元素宽度为准

快速跳转

avatar
文章
阅读
粉丝