【css】H6_盒子模型

文章目录

第六章盒子模型

第六章盒子模型

边框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	上、下边框颜色：#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

thin
medium:中等的
thick
像素值

边框样式border-style

none
hidden
Dotted: 点线边框
Dashed: 虚线
Solid: 实现
Double: 定义两个边框。两个边框的宽度和 border-width 的值相同

border简写

同时设置颜色、粗细和样式 ；border-style样式必须有

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

input中，border：0；可以清楚文本框的边框线。

外边距margin

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

网页居中对齐：margin：0px auto;

内边距padding

属性	说明
padding	使用简写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-left	设置元素的左部填充
padding-right	设置元素的右部填充
padding-top	设置元素的顶部填充

在这里插入图片描述

盒子模型的尺寸

盒子模型总尺寸=border+padding+margin+内容宽度

在这里插入图片描述

box-sizing

倘若盒子里面的内容变大，最外围盒子的宽高将会被撑大，盒子模型整体尺寸变

为了保持盒子整体尺寸不变，在将要改变宽高的小盒子设置box-sizing:boeder-box使盒子尺寸不变。

只控制padding和border，不能控制margin

圆角边框border-radius

四个属性值按照顺时针方向转，从左上角开始

border-radius: 20px  10px  50px  30px;

1
2

圆形：

利用border-radius属性制作圆形的两个要点:

Ø元素的宽度和高度必须相同

Ø圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

<style>
    div{
    width: 100px;
    height: 100px;
    border: 4px solid red;
    border-radius: 50%;
 }

head>
<body>
	<div>div>
body>
1
2
3
4
5
6
7
8
9
10
11
12

半圆形：

利用border-radius属性制作半圆形的两个要点：

Ø制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值

Ø制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

上半圆数据：
div{
    width: 200px;
    height: 100px;
    background-color: red;
    border-radius: 100px 100px 0 0;
}
1
2
3
4
5
6
7

左半圆数据：
div{
    width: 100px;
    height: 200px;
    background-color: red;
    border-radius: 100px 0 0 100px;
	}
1
2
3
4
5
6
7

扇形：

利用border-radius属性制作扇形遵循“三同，一不同”原则：

Ø“三同”是元素宽度、高度、圆角半径相同

Ø“一不同”是圆角取值位置不同

盒子阴影box-shadow

box-shadow:inset  x-offset  y-offset  blur-radius  color;
           内阴影     偏移方向         模糊半径     颜色
box-shadow: 
	0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0,0,0,0.2);
1
2
3
4

相关阅读:
深度学习区分不同种类的图片
学Cocos Creator 3.8.0链接GoWorld自带示例ChatRoom
如何打开html格式文件？Win11打开html文件的方法
进阶JAVA篇-深入了解 Stream 流对象的创建与中间方法、终结方法
Linux操作系统：IPTables
SL7220线性降压恒流3.6A 外围只需两个电阻耐压40V汽车大灯IC
如何给PDF文件进行加密？
基于ssm+vue的美食分享网站
云开发寝适闹钟微信小程序源码
网站优化Preload进行预加载的使用方法

原文地址：https://blog.csdn.net/m0_70083523/article/details/127766381