• 盒子模型


    一.边框样式:
    1.border-color:边框颜色
      1.1 border-top-color:上线颜色
      1.2 border-bottom-color:下线颜色
    .................................
      1.3 border-color:颜色1 所有边框
      1.4 border-color:颜色1 颜色2 上下为颜色1 左右为颜色2
      1.5 border-color:颜色1 颜色2 颜色3 上为颜色1 左右为颜色2 下为颜色3
      1.6 border-color:颜色1 颜色2 颜色3 颜色4 上右下左

    2.border-width:指定的是边框的粗细
      2.1 thin细
      2.2 medium中等
      2.3 thick粗
      2.4 像素xxxpx
      3.border-style:指定边框风格
      3.1 none:默认
      3.2 hidden:隐藏
      3.3 dotted:圆点
      3.4 dashed:虚线
      3.5 solid:实线
      3.6 double:双实线
    4.border: 边框线宽度 颜色 边框风格
      4.1 border:1px purple solid;
    二.外边距
      margin:外边距,盒子与盒子
      margin-top:上外边距
      margin-right:下外边距
      margin-bottom
      margin-left
      margin:0px auto; 网页居中对齐的必要条件 1.块元素 2.固定宽度
    三.内边距
      padding:内边距,内容与盒子
      padding-left :左内边距
      padding-right
      padding-top
      padding-bottom
      padding:位置1 位置2 上下为位置一 左右为位置二
    四.盒子模型尺寸
      盒子模型总尺寸=border+padding+margin+内容宽度
      box-sizing:content-box | border-box | inherit;
      content-box:默认值,盒子的宽度或者高度=border+padding+(margin)+width/height
      border-box:盒子的宽度或者高度等于元素内容的宽度或者高度
      inherit:元素集成父元素的盒子模型模式
    五.圆角
      border-radius:圆角
      border-radius:20px 10px 50px 30px; 四个属性值按顺时针排列

    1.原形:
      border-radius: 50%; 宽度和高度相同
    2.半圆:
      border-radius: 150px 150px 0px 0px; 两个角变,两个角不变,按照顺序,上半圆和下半圆宽度是高度的二倍,左半圆和右半圆高度是宽度的二倍
    3.四分之一圆:
      border-radius: 0px 0px 150px 0px; 一个角变,按照顺序,宽度和高度相同
    六.盒子阴影
      box-shadow:10px 10px 30px yellow;
      inset:内阴影.

    WangDaYe
  • 相关阅读:
    扫描线算法模板
    spark submit 常用设置
    networkx 画有向图 使用DiGraph
    超实用的Spark数据倾斜解决
    解决spark中遇到的数据倾斜问题
    TrickBot 恶意木马软件
    windows 打开snappy文件 安装python snappy——还是直接用pip install xx.whl 打包好的安装吧
    解决CentOS删除文件后没有释放磁盘空间(lsof命令)
    Linux 系统下 centOS 7 ipconfig 提示没有安装
    tomcat启动报错org.apache.catalina.LifecycleException: The configured protocol [org.apache.coyote.http...
  • 原文地址:https://www.cnblogs.com/wangdayexinyue/p/9196595.html
Copyright © 2020-2023  润新知