CSS_09_盒子模型(二)

CSS3盒模型

box-sizing设置盒子类型，默认盒子模型为content-box,css3增加了border-box,这样计算盒子的大小方式也发生改变。

box-sizing:content-box 盒子大小等于width+padding+bolder;
box-sizing:border-box 盒子的大小为width,也就是说设置padding、bolder不会撑开盒子。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒模型</title><style>div:first-child {color: red;width: 200px;height: 50px;border: 1px solid #000;/*默认盒子模型*/box-sizing: content-box;padding: 50px;margin: 10px;}div:last-child {width: 200px;height: 80px;border: 10px solid red;box-sizing: border-box;padding-left: 30px;/* 边框往里面增加，padding值如果在容量范围内不会撑大盒子*/}</style>
</head>
<body><div>默认centent-box 盒子模型</div><div>css3新增 border-box</div></body>
</html>

盒子阴影

box-shadown用来设置盒子阴影，与文字阴影相似。

格式：box-shadown:水平阴影垂直阴影阴影程度阴影颜色阴影尺寸(面积大小) 内外阴影(inset);

内外阴影设值为outset不起作用,而且还会报错。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子阴影</title><style>div:first-child {color: yellow;font-size: 40px;/*水平距离 垂直距离 模糊程度 阴影颜色*/text-shadow: 5px 5px 1px rgba(0,0,0,0.1);}div:last-child {width: 200px;height: 200px;border: 5px solid pink;/*水平距离 垂直距离 模糊程度 阴影尺寸(影子大小) 阴影颜色 内外阴影（只允许写inset）*/box-shadow: 5px 5px 10px 5px rgba(255,0,0,0.2) inset;}</style>
</head>
<body><div>大吉大利，今晚吃鸡</div><div></div>
</body>
</html>

比如小米的官网就用盒子阴影效果，鼠标点击商品时就会出现阴影。

简单效果实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子阴影模拟</title><style>body {background-color: #f5f5f5;}.mi {height: 246px;width: 234px;border-right: 1px solid #ffffff;background-color: #fff;margin: 200px 200px;box-shadow: 0 15px 30px rgba(0,0,0,0.4);}.img {height: 150px;width: 150px;background-image: url("../img/mi.jpg");background-size: 150px 150px;background-repeat: no-repeat;margin: 10px 40px;}a {text-decoration: none;color: #000;}span {display: inline-block;padding-left: 30px;}.big a {color: #000;font: 14px "Helvetica Neue";}.small a {color: #9d9d9d;font: 10px "Helvetica Neue";padding-left: 12px;}.price  {color: #ff6700;font-size: 12px;padding: 10px 90px;}</style>
</head>
<body><div class="mi"><div class="img"></div><span class="big"><a href="#">米家互联网空调(一级能效)</a></span> <br><span class="small"><a href="#">米家互联网空调(一级能效)</a></span><span class="price">2294元</span></div>
</body>
</html>

立体球

设置内部盒子阴影为高光和外部盒子阴影暗黑，达到视觉立体效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水晶</title><style>div {width: 249px;height: 249px;margin: 100px;background: #fff url("../img/水晶.jpeg") 0 0 no-repeat;font-size: 30px;text-align: center;color: rgba(255,255,255,0.8);line-height: 249px;border-radius: 50%;/* 内阴影和外阴影效果*/box-shadow: 5px 5px 5px 5px rgba(255,255,255,0.4) inset,5px 4px 10px rgba(0,0,0,0.4);}</style>
</head>
<body>
<div>水晶图片</div>
</body>
</html>

CSS_09_盒子模型(二)相关推荐

Web开发（一）·期末不挂之第五章·CSS盒子模型(盒子模型各属性行级元素和块级元素导航栏的实现)
CSS盒子模型一.盒子模型二. 块级元素与行级元素✪✪✪ 块级元素行内元素转化三.导航栏的实现一.盒子模型盒子是页面内容的容器,通过盒子的堆叠.嵌套能实现网页布局各属性: 大小(wid ...
超详细的css知识树状图~CSS选择器盒子模型、浮动、定位和装饰
前言学习任何新知识,最重要的永远都是搭建属于自己的知识框架,随后学习的细碎知识点往框架里面填入,最后形成一棵属于自己的知识大树.本系列的博客专注更新总结好的思维导图,希望可以帮助大家快速理清知识结构 ...
CSS---div盒子模型、相对绝对位置、float浮动、清除浮动
目录一.初识盒子模型二.div页面布局 1.绝对定位 position:absolute 2.相对定位position:relative 三.浮动(重点) 3.1标准流 3.2浮动 3.3浮动的特 ...
CSS盒子模型及属性
CSS盒子模型目录 CSS盒子模型一.什么是盒子模型二.盒子模型的说明 CSS盒子模型的属性一.Margin(外边距) 二.Border(边框) 三.Padding(内边距) 四.Conten ...
CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
CSS布局(二) 盒子模型属性
盒子模型的属性宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...
css盒子模型相关知识点二
目录一.垂直布局二.外边距的折叠三.内联元素的盒子四.默认样式五.盒子的大小六.阴影和圆角一.垂直布局使用overflow属性设置父元素如何处理溢出的子元素: 可选值: visible ...
（二）盒子模型之边框border
1.边框的组成及用法 border可以设置元素的边框,边框有三部分组成:边框宽度(粗细).边框样式.边框颜色. 语法: border:border-width | border-style | bor ...
html逻辑像素和实际像素,物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口...
1.1物理像素手机屏幕横向有828个点手机屏幕纵向上有1792个点同等大小屏幕下,点越多.图像显示越精细上面所说屏幕上一个个点就是物理像素(physical pixel) 物理像素也叫设备像素 ...

CSS_09_盒子模型(二)

CSS3盒模型

盒子阴影

简单效果实现

立体球

CSS_09_盒子模型(二)相关推荐

最新文章

热门文章