【Web前端HTML5&CSS3】08-盒模型补充
盒模型补充及田径场实战
1. 盒子大小
默认情况下,盒子可见框的大小由内容区、内边距和边框共同决定
box-sizing
用来设置盒子尺寸的计算方式(设置width和height的作用)
.box {
width: 200px;
height: 200px;
background-color: yellow;
border: 10px red solid;
/* box-sizing: content-box; */
box-sizing: border-box;
}
可选值:
content-box
默认值,宽度和高度用来设置内容区的大小border-box
宽度和高度用来设置整个盒子可见框的大小
width
和height
指的是内容区、内边距和边框的总大小
2. 轮廓
outline
用来设置元素的轮廓线,用法和border
一模一样
轮廓和边框不同点是,轮廓不会影响到可见框的大小
边框
.box {
width: 200px;
height: 200px;
background-color: yellow;
border: 10px red solid;
}
轮廓
.box {
width: 200px;
height: 200px;
background-color: yellow;
outline: 10px red solid;
}
可以很明显看到outline
与border
的区别
我们一般不会直接这么设置轮廓,而是下面这种场景
.box:hover {
outline: 10px red solid;
}
从上面的动态图也可以很清晰地看出,outline
属性并没有改变盒子的布局
3. 阴影
box-shadow
属性用于在一个元素的框架周围添加阴影效果你可以设置多个由逗号分隔的效果
一个盒状阴影由相对于元素的X和Y的偏移量、模糊和扩散半径以及颜色来描述
box-shadow
用来设置元素的阴影效果,阴影不会影响页面布局
.box {
width: 200px;
height: 200px;
background-color: yellow;
box-shadow: 10px 10px orange;
}
box-shadow: 10px 10px 5px orange;
box-shadow: 10px 10px 5px rgba(0, 0, 0, .2);
- 第一个值-水平偏移量:设置阴影的水平位置
- 正值向右移动
- 负值向左移动
- 第二个值-垂直偏移量:设置阴影的垂直位置
- 正值向下移动
- 负值向上移动
- 第三个值-阴影的模糊半径
- 第四个值-阴影的颜色
4. 圆角
border-radius
属性使一个元素的外边框边缘的角变圆你可以设置一个半径来做圆角,或者设置两个半径来做椭圆角
border-radius
用来设置圆角,圆角设置的是圆的半径大小
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border-radius: 20px;
border-top-right-radius: 50px 100px;
border-radius
可以分别指定四个角的圆角
- 四个值:
左上
右上
右下
左下
- 三个值:
左上
右上/左下
右下
- 两个值:
左上/右下
右上/左下
- 一个值:
左上/右上/右下/左下
这里同样不需要死记硬背,只要记住遵循顺时针方向和矩形中心点对称原则
与border
不同的是,border
是从上
开始顺时针设置,而圆角是从左上
开始
圆
原理很简单,就是绘制正方形,并将四个圆角半径设置为正方形的一半
.box {
width: 200px;
height: 200px;
background-color: yellow;
border-radius: 50%;
}
椭圆
只需要对上述样式对一点点的改动,设置width
和height
属性不相等即可
.box {
width: 300px;
height: 200px;
background-color: yellow;
border-radius: 50%;
}
【Web前端HTML5&CSS3】08-盒模型补充的更多相关文章
- 【Web前端HTML5&CSS3】06-盒模型
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 盒模型 1. 文档流(normalflow) 2. 块元素 3. 行内元素 4. 盒子模型 盒模型.盒子模型.框 ...
- 【Web前端HTML5&CSS3】11-定位
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 定位的简介 1. 相对定位 偏移量(offset) 相对定位的特点 2. 绝对定位 绝对定位的特点 包含块(co ...
- 【Web前端HTML5&CSS3】03-字符实体与语义标签
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 字符实体与语义标签 1. 字符实体 2. meta标签 3. 语义标签 4. 块元素与行内元素 块元素(bloc ...
- 【Web前端HTML5&CSS3】05-样式继承与其他概念
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 样式继承与其他概念 1. 继承 2. 选择器的权重 3. 长度单位 像素 屏幕分辨率 图像分辨率 百分比 em ...
- 【Web前端HTML5&CSS3】12-字体
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 字体 1. 字体相关的样式 2. font-family 3. 几种字体 手写体 艺术体 乱码字体 中文字体 4 ...
- Web前端:2、盒模型的组成
在HTML中,若想要实心划分区域,则:1.添加标签:2.对标签设置尺寸(宽高) 但只要是添加了一个元素(标签),就会在页面中生成一个盒子,不同元素产生的盒子模型可能不同,这取决于它CSS的displa ...
- CSS3弹性盒模型flexbox布局基础版
原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...
- css3基础教程:CSS3弹性盒模型
今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...
- CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
随机推荐
- .net core 和 WPF 开发升讯威在线客服系统【私有化部署免费版】发布
希望 .net 和 WPF 技术时至今日,还能有一些存在感. 这个项目源于2015年前后,当时开发的初版,我使用了 ASP.NET MVC 做为后端,数据库使用原生 ADO.NET 进行操作.WPF ...
- Android Studio 上传本地项目到 GitHub 上
•准备工作 注册 GitHub 账号 [GitHub官网] [视频教程] 安装 Git [官方链接] [极速下载链接] 创建本地代码仓库 在桌面上,鼠标右击,选择 Git Bash Here : 接 ...
- Android Studio 之 在活动中使用 Toast
•简介 Toast 是 Android 系统提供的一种非常好的提醒方式: 在程序中可以使用它将一些短小的信息通知给用户: 这些信息会在一段时间内自动消失,并且不会占用任何屏幕空间 •Toast.mak ...
- Android Studio 之 制作 Nine-Patch 图片(.9图片)
•引言 9.png 可以保证图片在合适的位置进行局部拉伸,避免了图片全局缩放造成的图片变形问题. 但是由于Android Studio对于.9图片的检查更加严格,所以不符合AS要求的.9图片会带来很多 ...
- Android Studio 有关 RecycleView 的使用
•导入相关包 右击File->Project Structure: 搜索 com.android.support: 找到 recyclerview: 导入好后 Sync Now 同步一下,到这 ...
- 最小生成树,Prim和Kruskal的原理与实现
文章首先于微信公众号:小K算法,关注第一时间获取更新信息 1 新农村建设 大清都亡了,我们村还没有通网.为了响应国家的新农村建设的号召,村里也开始了网络工程的建设. 穷乡僻壤,人烟稀少,如何布局网线, ...
- 热更新解决方案--xlua学习笔记
一.热更新方案简介 在Unity游戏工程中,C#代码(编译型语言)资源和Resources文件夹下的资源打包后都不可以更改,因此这部分内容不能进行热更新,而lua代码(解释型语言)逻辑不需要进行预编译 ...
- 下拉框动态显示options遇到的问题
百度后发现,目前资源比较多的就是layui和bootstrap这两种框架了,我是用的bootstrap-select,不知道为啥使用layui的formselect,引入css和js文件后,在sele ...
- 字符串转成KB,MB, GB
import java.text.DecimalFormat; public class SizeUtil { public static String GetImageSize(String ima ...
- Day13_70_join()
join() 方法 * 合并线程 join()线程合并方法出现在哪,就会和哪个线程合并 (此处是thread和主线程合并), * 合并之后变成了单线程,主线程需要等thread线程执行完毕后再执行,两 ...