html5盒子模型

 1.边框的常用属性
border-color

属性

说明

示例

border-top-color

上边框颜色

border-top-color:#369;

border-right-color

右边框颜色

border-right-color:#369;

border-bottom-color

下边框颜色

border-bottom-color:#fae45b;

border-left-color

左边框颜色

border-left-color:#efcd56;

border-color

四个边框为同一颜色

border-color:#eeff34;

上、下边框颜色#369

左、右边框颜色#000

border-color:#369 #000;

上边框颜色#369

左、右边框颜色#000

下边框颜色#f00

border-color:#369 #000 #f00;

上、右、下、左边框颜色

#369#000#f00#00f

border-color:#369 #000 #f00 #00f;

border-width

属性

说明

示例

border-top-width

上边框粗细

border-top-width:5px;

border-right-width

右边框粗细

border-right-width:10px;

border-bottom-width

下边框粗细

border-bottom-width:8px;

border-left-width

左边框粗细

border-left-width:22px;

border-width

四个边框的粗细统一

border-width:5px;

上、下边框粗细:10px

左、右边框粗细:5px

border-width:10px  2px;

上边框粗细:5px

左、右边框粗细:1px

下边框粗细:6px

border-width:5px 1px 6px;

上、右、下、左边框粗细:

1px  2px  5px 2px

border-width:1px  2px  5px 2px;

border-style:
none
hidden
dotted
dashed:虚线边框
solid:实线边框
double

border:
border:1px solid #3a6587;
border:1px dashed red;

2.外边距margin
margin-top
margin-right
margin-bottom
margin-left
margin
网页居中对齐        margin:0px auto;

3.内边距padding
padding-left 
padding-right
padding-top
padding-bottom
padding

4.box-sizing属性
content-box:盒子的实际宽度和高度仅应用于元素内容,不包括内边距和边框
border-box:盒子的实际高度和宽度包括元素内容、边框和内边距
box-sizing:content-box  |  border-box  |  inherit;

5.圆角边框
border-radius: 20px  10px  50px  30px;

6.使用border-radius制作特殊图形
圆形
利用border-radius属性制作圆形的两个要点
元素的宽度和高度必须相同
圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%
半圆形
利用border-radius属性制作半圆形的两个要点
制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值。
制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值
扇形
利用border-radius属性制作扇形遵循“三同,一不同”原则
“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同

7.盒子阴影
box-shadow:inset  x-offset  y-offset  blur-radius  color;
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/493747.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【GPTs分享】每日GPTs分享之Image Generator Tool

今日GPTs分享:Image Generator Tool。Image Generator Tool是一种基于人工智能的创意辅助工具,专门设计用于根据文字描述生成图像。这款工具结合了专业性与友好性,鼓励用户发挥创造力,同时提供高效且富有成效的交互体验。 主要功能…

mac flutter 配置

下载Flutter Sdk 直接访问官网无法下载,需要访问中国镜像下载 Flutter SDK 归档列表 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter Start building Flutter Android apps on macOS - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 下载后解压…

索引学习以及索引原理

有时候,建索引并不一定会加快查询效率。但是,有时候,表的数据量是大数据量的话,还是要看下是否能使用索引优化查询效率。 1、建索引的几大原则: 1.1、最左前缀匹配原则非常重要的原则,mysql会一直向右匹配…

【信息系统项目管理师】--【信息技术发展】--【现代化创新发展】--【大数据】

文章目录 第二章 信息技术发展2.2 新一代信息技术及应用2.2.3 大数据1.技术基础2.关键技术3.应用和发展 第二章 信息技术发展 信息技术是在信息科学的基本原理和方法下,获取信息、处理信息、传输信息和使用信息的应用技术总称。从信息技术的发展过程来看&#xff0c…

安防视频监控平台EasyNVR级联视频上云管理平台EasyNVS,出现报错“i/o deadline reached”该如何解决?

上云网关管理平台EasyNVS视频综合管理系统具备汇聚与管理EasyGBS、EasyNVR等平台的能力,系统可以将接入的视频资源实现视频能力统一输出,并能进行远程可视化运维等管理功能,还能解决设备现场没有固定公网IP却需要在公网直播的需求。 有用户反…

2.26作业

1.整理链栈的代码 //link_stack.c#include"link_stack.h" //申请栈顶指针 top_p create_top() {top_p top(top_p)malloc(sizeof(top_t));if(topNULL){printf("空间申请失败\n");return NULL;}top->len 0;top->ptop NULL; //刚申请栈指针时没有指…

TensorFlow2.x 精选笔记(2)自动求导与概率

学习参考: 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning ①如有冒犯、请联系侵删。 ②已写完的笔记文章会不定时一直修订修改(删、改、增),以达到集多方教程的精华于一文的目的。 ③非常推荐上面(学习参考&#x…

Docker基础篇(六) dockerfile体系结构语法

FROM:基础镜像,当前新镜像是基于哪个镜像的 MAINTAINER :镜像维护者的姓名和邮箱地址 RUN:容器构建时需要运行的命令 EXPOSE :当前容器对外暴露出的端口号 WORKDIR:指定在创建容器后,终端默认登…

pyspark分布式部署随机森林算法

前言 分布式算法的文章我早就想写了,但是一直比较忙,没有写,最近一个项目又用到了,就记录一下运用Spark部署机器学习分类算法-随机森林的记录过程,写了一个demo。 基于pyspark的随机森林算法预测客户 本次实验采用的…

一般情况下,硬件中使用Repeating Sequence出现波形很奇怪就是数据的周期频率和mcu运行的频率不一致导致的

一般情况下,出现波形很奇怪就是数据的周期频率和mcu运行的频率不一致导致的 把timer values 修改为0 1就好了,如果是0,0.1就不行,不会有下面的波形

线程的六种状态

New:新建状态,此时线程刚被创建,未调用线程的启动方法 start() Runnable:运行状态,已经处于可运行状态的线程,已经调用 start()方法 Blocked:阻…

cmake构建在Visual stdio 2019 和Xcode的Qt的程序

概述:用CMake可以方便地构建Qt的应用程序,前提是你已经配置好用Visual Stdio 开发的Qt的环境或者Xcode的Qt开发环境。 1、编写CMakeLists.txt cmake_minimum_required(VERSION 3.6)set(CMAKE_CONFIGURATION_TYPES "Debug;Release" CACHE STR…