分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

HTML盒子模型冷知识!!!

发布时间:2023-09-06 02:20责任编辑:沈小雨关键词:HTML盒子模型

一.边框    1.边框颜色     border-color 边框颜色(可以设置上边框,如:border-top-color,也可以整体设置,但是要注意顺序)     2.边框粗细     border-width 边框粗细(可以设置上边框,如:border-top-width,也可以整体设置,但是要注意顺序)     2.边框样式     border-style 边框样式(可以设置上边框,如:border-top-style,也可以整体设置,但是要注意顺序)    二.外边距  1.margin   盒子距离浏览器的距离  (可以设置上外边距,如:margin-top,也可以整体设置,但是要注意顺序)    2.居中 margin: 0px auto

三.内边距   1.padding   内容到盒子的距离  (可以设置上内边距,如:padding-top,也可以整体设置,但是要注意顺序)  

四.盒子模型的尺寸    尺寸默认:padding+margin+wigth+border    box-sizing 方便计算盒子模型尺寸(默认为content-box,border-box代表随着内容的宽度高度变化而变化)

五.圆角    border-radius 圆角(左上,右上,右下,左下)  /*如果想要一个圆,那么必须满足宽和高一致,圆角取宽度或者高度的二分之一*/  /*如果想要半圆,那么必须满足宽是高的2倍,圆角取宽度的二分之一*/  /*如果想要四分之一圆,那么必须满足宽和高相等,圆角取宽度相等值*/   六.盒子阴影  box-shadow 默认为外阴影,内阴影为inset  box-shadow: 5px -5px 20px black;

HTML盒子模型冷知识!!!

原文地址:https://www.cnblogs.com/mayuan01/p/9895540.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved