首页 前端知识 前端Html5/Css3—div盒子模型

前端Html5/Css3—div盒子模型

2024-09-03 02:09:13 前端知识 前端哥 338 937 我要收藏

文章目录

  • 第六章 盒子模型
    • 6.1 border边框
    • 6.2 border-width粗细
    • 6.3 border-style边框样式
    • 6.4 border简写
    • 6.5 margin外边距
    • 6.6 padding内边距
    • 6.7 盒子模型尺寸
    • 6.8 box-sizing
    • 6.9 border-radius圆角边框
      • 6.9.1 制作圆形
      • 6.9.2 半圆
      • 6.9.3 四分之一圆
    • 6.10 box-shadow盒子阴影

第六章 盒子模型

6.1 border边框

属性说明示例
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左、右边框颜色*:*#000border-color:#369 #000;
上边框颜色:#369左、右边框颜色:#000下边框颜色:#f00border-color:#369 #000 #f00;
上、右、下、左边框颜色:#369、#000、#f00、#00fborder-color:#369 #000 #f00 #00f;

6.2 border-width粗细

thin/ medium /thick /像素值

div{
  border-top-width:5px; 
  border-right-width:10px; 
  border-bottom-width:8px; 
  border-left-width:22px; 
  border-width:5px ; 
  border-width:20px 2px;
  border-width:5px 1px 6px;
  border-width:1px 3px 5px 2px;
}

6.3 border-style边框样式

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

div{
  border-top-style:solid; 
  border-right-style:solid; 
  border-bottom-style:solid; 
  border-left-style:solid; 
  border-style:solid ; 
  border-style:solid dotted;
  border-style:solid dotted dashed;
  border-style:solid dotted dashed double;
}


6.4 border简写

div{
   border:1px solid #3a6587;
	 border: 1px dashed red;
}

6.5 margin外边距

网页居中的必要条件:

  • 块元素
  • 固定宽度
margin{0px,auto} /* 设置居中; */

div{
  margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;
}

6.6 padding内边距

div{
padding-left:10px; 
padding-right: 5px; 
padding-top: 20px; 
padding-bottom:8px; 
padding:20px 5px 8px 10px ; 
padding:10px 5px; 
padding:30px 8px 10px ; 
padding:10px;
}


6.7 盒子模型尺寸

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

6.8 box-sizing

box-sizing:消除 paddingborder边框把盒子撑大的效果,即盒子的大小不变,其设置的边距会往里缩。

div{
  box-sizing: border-box ;
  
  /* content-box:默认值,盒子的总尺度
  	border-box:盒子的宽度或高度等于元素内容的宽度或高度
  	inherit:元素继承父元素的盒子模型模式
 */
  box-sizing:content-box  |  border-box  |  inherit;

}



6.9 border-radius圆角边框

div{
  border-radius: 20px  10px  50px  30px;/*顺时针*/
}

6.9.1 制作圆形

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

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

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

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

  • 另:span变圆:用padding撑开

    span{
    				padding: 0 6px;
    				background-color: pink;
    				color: white;
    				border-radius: 50%;
    			}
    

6.9.2 半圆

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

  • 制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值
  • 制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值
/* 右半圆 */
.div_one{
	width: 50px;
	height: 100px;
	border-radius: 0 50px 50px 0;
	
}
/* 左半圆 */
.div_two{
	width: 50px;
	height: 100px;
	border-radius:50px 0 0 50px ;
}

6.9.3 四分之一圆

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

  • 三同”是元素宽度、高度、圆角半径相同
  • 一不同”是圆角取值位置不同
/* 左上四分之一 */
.div_six{
	width: 50px;
	height: 50px;
	border-radius: 50px 0 0 0;
}
/* 右下四分之一圆 */
.right_boo{
	width: 50px;
	height: 50px;
	border-radius: 0 0 50px 0 ;
}

6.10 box-shadow盒子阴影

box-shadow:inset x-offset y-offset blur-radius color;

inset:阴影类型内阴影/从外层的阴影(开始时)改变阴影内侧阴影s

x-offset :X轴位移,指定阴影水平位移量

blur-radius:半径

color:颜色

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

inset:阴影类型内阴影/从外层的阴影(开始时)改变阴影内侧阴影s

x-offset :X轴位移,指定阴影水平位移量

blur-radius:半径

color:颜色

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
转载请注明出处或者链接地址:https://www.qianduange.cn//article/17575.html
标签
评论
发布的文章

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!