zoukankan      html  css  js  c++  java
  • CSS:轮廓属性 & 盒子模型

    1 轮廓属性

    轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

    轮廓和边框的区别:

      边框 (border) 可以是围绕元素内容和内边距的一条或多条线;

      轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用

    CSS outline 属性规定元素轮廓的样式、颜色和宽度。

     

    2 盒子模型

    所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

    CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

    盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

    下面的图片说明了盒子模型(Box Model):  

     

    margin(外边距) - 盒子与盒子之间的距离

    border(边框) - 盒子的保护壳

    padding(内边距/填充) - 内填充,盒子边与内容之间的距离

    content(内容) - 盒子的内容,显示的文本或图像

  • 相关阅读:
    Jira 8.5.1 安装教程
    Postgres 10.11安装教程
    SonarQube 7.7 安装教程
    Apollo基于K8S的部署以及接入
    Nexus 安装教程
    Drone 安装教程
    Harbor 安装教程
    Gitlab 11.9.1 高可用教程
    Gitlab 11.9.1 安装教程
    大明的FAQ
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/15120745.html
Copyright © 2011-2022 走看看